Сделайте так, чтобы по клику на любой из дивов ему в конец записывался его порядковый номер.
Подумал и решил так, все работает
let div = document.getElementsByTagName('div');
for (let i=0; i< div.length; i++){
div[i].addEventListener('click', function () {
div[i].innerHTML = div[i].innerHTML + div[i].dataset.num
});
}
Но пока соображал написал такой вариант, и вот его поведение мне непонятно. Почему функция go(i) вызывается каждую итерацию цикла?
По идее я ведь просто создаю «слушатель» который должен срабатывать по клику. А тут идет срабатывание сразу при запуске без клика.
let div = document.getElementsByTagName('div');
for (let i=0; i< div.length; i++){
div[i].addEventListener('click', go(i));
}
function go(i) {
div[i].innerHTML = div[i].innerHTML + div[i].dataset.num
}
ArbNet
let div = document.getElementsByTagName('div');
for (let i=0; i< div.length; i++){ div[i].addEventListener('click', go); } function go(ev) { let div=ev.target; div.innerHTML=div.innerHTML+div.dataset.num }
Не проверял, но должно работать 😊
Dram :
Почему функция go(i) вызывается каждую итерацию цикла?
По идее я ведь просто создаю «слушатель» который должен срабатывать по клику.
Очередное доказательство, что учебник JS не читали..
Dram
Я уже сделал рабочий вариант, вопрос не в том.
Мне интересно почему нерабочий вариант работает так как работает. Почему слушатель вызывает функцию, хотя клика нет?
timo-71
Dram #: Мне интересно почему нерабочий вариант работает так как работает
Вы напрямую вызвали функцию
go(i)
, она и отработала. Все штатно. addEventListener вторым аргументом ждет функцию обратного вызова с 1 аргументом — эвент. Соответственно прямой вызов должен ее отдать.
Для понимания, того, что ждет addEventListener — вот такой бессмысленный, в данном случае код. Хотя, иногда может возникнуть ситуация, когда нужны какие то данные, которых в элементе нет, но в момент обхода (HTMLCollection в вашем случае или NodeList если querySelectorAll) они есть.
let div = document.getElementsByTagName('div'); for (let i=0; i< div.length; i++){ div[i].addEventListener('click', go(i)); } function go(i) { return function(){ div[i].innerHTML = div[i].innerHTML + div[i].dataset.num } }
console.log(go) #просто посмотреть, что это
Доки это супер нужная и важная вещь, но: есть ф12/консоль. Оттуда можно понять
letdivs = document.querySelectorAll('div.sssy');
divs.forEach(el=>{
el.addEventListener('click',
function(e){
console.log(
e.target.dataset.num,
this.dataset,
e, # какой то pageX и еще куча всего
e.target, # el = e.target = this
el,
this)
});
});
И уже тогда в гугл
Dram
Правильно ли я понимаю?
1. addEventListener(‘click’, go) — обработчик события вызовет функцию go только когда произойдет триггер события click?
2. Если указать круглые скобки
addEventListener(‘click’, go(i)) или addEventListener(‘click’, go()) — функция go вызовется сразу как только интерпретатор дойдет до нее ?
P.S. получается, чтобы избежать прямого вызова, нужно оборачивать прямой вызов в еще одну функцию?
addEventListener(‘click’, function (){go(i)});
timo-71
Dram #: addEventListener(‘click’, function (){go(i)});
Попробуйте посмотреть, что получится, если div изменится где то ниже. Что div[i] в вашей функции покажет. Лучше сделать примерно так, как выше написал ArbNet
let div = document.getElementsByTagName('div');
for (let i=0; i< div.length; i++){ div[i].addEventListener('click', function(){go(i)}); } function go(i) { div[i].innerHTML = div[i].innerHTML + div[i].dataset.num }
.......... ........... div = 22
Dram
timo-71 мне уже давно не интересно как тут нужно сделать ПРАВИЛЬНО, мне хочется понять как реально работает addEventListener, прошу, ответьте на эти вопросы? Я перечитал главу https://learn.javascript.ru/introduction-browser-events и не нашел там ответы на эти вопросы.
Правильно ли я понимаю?
1. addEventListener(‘click’, go) — обработчик события вызовет функцию go только когда произойдет триггер события click?
2. Если указать круглые скобки
addEventListener(‘click’, go(i)) или addEventListener(‘click’, go()) — функция go вызовется сразу как только интерпретатор дойдет до нее ?
ArbNet
Dram #: Я перечитал главу https://learn.javascript.ru/introduction-browser-event
Вы наверно с закрытыми глазами читаете.. или соображение напрочь отсутствует..
Но 1,2 п. — поняли правильно 😀 addEventListener работает аналогично
Dram
Дана задача
Даны дивы, содержащие в атрибуте data-num свой порядковый номер:
Сделайте так, чтобы по клику на любой из дивов ему в конец записывался его порядковый номер.
Подумал и решил так, все работает
Но пока соображал написал такой вариант, и вот его поведение мне непонятно. Почему функция go(i) вызывается каждую итерацию цикла?
По идее я ведь просто создаю «слушатель» который должен срабатывать по клику. А тут идет срабатывание сразу при запуске без клика.
ArbNet
Не проверял, но должно работать 😊
Почему функция go(i) вызывается каждую итерацию цикла?
По идее я ведь просто создаю «слушатель» который должен срабатывать по клику.
Очередное доказательство, что учебник JS не читали..
Dram
Я уже сделал рабочий вариант, вопрос не в том.
Мне интересно почему нерабочий вариант работает так как работает. Почему слушатель вызывает функцию, хотя клика нет?
timo-71
Мне интересно почему нерабочий вариант работает так как работает
Вы напрямую вызвали функцию
, она и отработала. Все штатно. addEventListener вторым аргументом ждет функцию обратного вызова с 1 аргументом — эвент. Соответственно прямой вызов должен ее отдать.
Для понимания, того, что ждет addEventListener — вот такой бессмысленный, в данном случае код. Хотя, иногда может возникнуть ситуация, когда нужны какие то данные, которых в элементе нет, но в момент обхода (HTMLCollection в вашем случае или NodeList если querySelectorAll) они есть.
Доки это супер нужная и важная вещь, но: есть ф12/консоль. Оттуда можно понять
И уже тогда в гугл
Dram
Правильно ли я понимаю?
1. addEventListener(‘click’, go) — обработчик события вызовет функцию go только когда произойдет триггер события click?
2. Если указать круглые скобки
addEventListener(‘click’, go(i)) или addEventListener(‘click’, go()) — функция go вызовется сразу как только интерпретатор дойдет до нее ?
P.S. получается, чтобы избежать прямого вызова, нужно оборачивать прямой вызов в еще одну функцию?
addEventListener(‘click’, function (){go(i)});
timo-71
addEventListener(‘click’, function (){go(i)});
Попробуйте посмотреть, что получится, если div изменится где то ниже. Что div[i] в вашей функции покажет. Лучше сделать примерно так, как выше написал ArbNet
Dram
timo-71 мне уже давно не интересно как тут нужно сделать ПРАВИЛЬНО, мне хочется понять как реально работает addEventListener, прошу, ответьте на эти вопросы? Я перечитал главу https://learn.javascript.ru/introduction-browser-events и не нашел там ответы на эти вопросы.
Правильно ли я понимаю?
1. addEventListener(‘click’, go) — обработчик события вызовет функцию go только когда произойдет триггер события click?
2. Если указать круглые скобки
addEventListener(‘click’, go(i)) или addEventListener(‘click’, go()) — функция go вызовется сразу как только интерпретатор дойдет до нее ?
ArbNet
Я перечитал главу https://learn.javascript.ru/introduction-browser-event
Вы наверно с закрытыми глазами читаете.. или соображение напрочь отсутствует..
Но 1,2 п. — поняли правильно 😀 addEventListener работает аналогично
Синтаксис добавления обработчика:
element . addEventListener ( event , handler [ , options ] ) ;
event Имя события, например «click» .
handler Ссылка на функцию-обработчик. ===> Функция должна быть присвоена как sayThanks , а не sayThanks()
options Дополнительный объект со свойствами:
timo-71
Правильно ли я понимаю?
1. addEventListener(‘click’, go) — обработчик события вызовет функцию go только когда произойдет триггер события click?
2. Если указать круглые скобки
addEventListener(‘click’, go(i)) или addEventListener(‘click’, go()) — функция go вызовется сразу как только интерпретатор дойдет до нее ?
1. Функция addEventListener вторым параметром получит ссылку на go, которая в вашем случает является функцией
2. Функция addEventListener получит результат выполнения функции go
Для понимания
Dram