Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 02.09.2018, 15:14
Интересующийся
Отправить личное сообщение для __Alex__ Посмотреть профиль Найти все сообщения от __Alex__
 
Регистрация: 18.06.2018
Сообщений: 21

Listenerы срабатывают сразу, не дожидаясь события, почему?
Добрый день, помогите разобраться. Listenerы срабатывают сразу, не дожидаясь события, почему?

Код:
<div id='1'>1: X</div>
<div id='2'>2: X</div>
<div id='3'>3: X</div>
<div id='out'></div>

<script>
    function out(id) {
        document.getElementById('out').innerHTML += (id + ' ');
    }

    function listener(id) {
        document.getElementById(id).addEventListener('click', out(id));
        /*
            а так работает корректно!!!:
            document.getElementById(id).addEventListener('click', function() {
            document.getElementById('out').innerHTML += (id + ' ');
        });
        */
    }

    listener(1);
    listener(2);
    listener(3);
</script>

Результат запуска:
1: X
2: X
3: X
1 2 3
Ответить с цитированием
  #2 (permalink)  
Старый 02.09.2018, 17:21
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,199

https://javascript.ru/forum/misc/750...jj-knopki.html
__________________
29375, 35
Ответить с цитированием
  #3 (permalink)  
Старый 02.09.2018, 19:19
Интересующийся
Отправить личное сообщение для __Alex__ Посмотреть профиль Найти все сообщения от __Alex__
 
Регистрация: 18.06.2018
Сообщений: 21

Переделал по аналогии, ожидаемо заработало, т.к. по сути стало равным закомментированному куску.

<div id='1'>1: X</div>
<div id='2'>2: X</div>
<div id='3'>3: X</div>
<div id='out'></div>

<script>
    function out(id) {
        return function() {
            document.getElementById('out').innerHTML += (id + ' ');
        }
    }

    function listener(id) {
        document.getElementById(id).addEventListener('click', out(id));
        /*
                а так работает корректно!!!:
                    document.getElementById(id).addEventListener('click', function() {
                        document.getElementById('out').innerHTML += (id + ' ');
                    });
        */
    }

    listener(1);
    listener(2);
    listener(3);

</script>


Но осталось не понятно, почему работает именно так, почему не работает в первом случае? Подскажите, что почитать, чтобы разобраться в этом вопросе.
Ответить с цитированием
  #4 (permalink)  
Старый 02.09.2018, 19:32
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 32,274

__Alex__,
потому-что в первом случае вы пишите
document.getElementById(id).addEventListener('clic k', undefined);
Ответить с цитированием
  #5 (permalink)  
Старый 02.09.2018, 19:53
Интересующийся
Отправить личное сообщение для __Alex__ Посмотреть профиль Найти все сообщения от __Alex__
 
Регистрация: 18.06.2018
Сообщений: 21

рони, неожиданно Думал, что листенер просто вызывает функцию при наступлении события... а ему оказывается нужно результат через замыкание вернуть...

Слегка прояснилось , спасибо
Ответить с цитированием
  #6 (permalink)  
Старый 02.09.2018, 19:57
Интересующийся
Отправить личное сообщение для __Alex__ Посмотреть профиль Найти все сообщения от __Alex__
 
Регистрация: 18.06.2018
Сообщений: 21

Правда, осталось всё равно не понятно, почему функция вызывается до наступления события...
Ответить с цитированием
  #7 (permalink)  
Старый 02.09.2018, 20:05
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 32,274

Сообщение от __Alex__
Думал, что листенер просто вызывает функцию при наступлении события
да именно так, но дайте функцию!!! а не результат функции.
Ответить с цитированием
  #8 (permalink)  
Старый 02.09.2018, 20:18
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,199

__Alex__, медитируем на этот коммент до понимания.
__________________
29375, 35
Ответить с цитированием
  #9 (permalink)  
Старый 02.09.2018, 21:32
Аватар для Белый шум
Профессор
Отправить личное сообщение для Белый шум Посмотреть профиль Найти все сообщения от Белый шум
 
Регистрация: 19.01.2012
Сообщений: 456

Сообщение от __Alex__
Правда, осталось всё равно не понятно, почему функция вызывается до наступления события...
out(id) - когда со скобками, то это сразу же вызовет ф-ию, в момент встречи в коде. Т.е. параметром, переданным в addEventListener будет результат выполнения данной ф-ии.

А если так - document.getElementById(id).addEventListener('clic k', out); - т.е. без скобок, то вы передаёте переменную out, которая содержит функцию. В этом случае она будет вызвана только при наступлении события 'click', но без параметров.

А вот так - document.getElementById(id).addEventListener('clic k', function() { out(id); }); - вы передали анонимную ф-ю, которой параметры и не нужны, но в момент своего вызова (при событии 'click') она выполнит out(id);
Ответить с цитированием
  #10 (permalink)  
Старый 03.09.2018, 07:53
Интересующийся
Отправить личное сообщение для __Alex__ Посмотреть профиль Найти все сообщения от __Alex__
 
Регистрация: 18.06.2018
Сообщений: 21

Белый шум, стало понятнее, спасибо.
Ответить с цитированием
Ответ


Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Функция назначенная обработчику события срабатывает сразу Velidan Общие вопросы Javascript 9 18.02.2015 16:02
Не срабатывают события из iframe при перетаскивании в него курсора в Opera jaguar954 Events/DOM/Window 1 01.08.2011 11:17
Не срабатывают события на элементе <option> DreamTheater Events/DOM/Window 2 14.06.2011 19:24
setTimeout и setInterval срабатывают без задержки! ПОЧЕМУ? shureg Общие вопросы Javascript 1 12.05.2011 08:06
не срабатывают события к объектам созданым ajax пока не запустишь любое др событие Jonyst jQuery 0 08.05.2011 12:10