JavaScript

Объясните как работает event.target

Есть простейший код для выделения пунктов списка при клике:
 let selectedItem; 

menu.onclick = function(event) { // Вот эта строчка где передается event

    if (!event.target.classList.contains('menu__item')) { 

        return; 

    } 

    select(event.target) 

} 

 

function select(item) { 

    if(selectedItem) { 

        selectedItem.classList.remove('selected'); 

    } 

    selectedItem = item; 

    selectedItem.classList.add('selected'); 

}
Я не понимаю как работает передача event в функцию. Ведь функция не вызывается таким образом:
 menu.onclick = func('click')
Так почему же в параметр event передается именно событие а не что нибудь еще? Или это данность языка, и первый параметр передающийся в функцию прослушивателя всегда событие?
ШМ
Шариф Мирзоев
138
Выполняя menu.onclick = ..., ты указываешь интерпретатору JS привязать функцию к событию click объекта menu. И когда это событие происходит, интерпретатор автоматически создаёт объект события и вызывает привязанную к событию функцию - передавая этой функции этот объект в качестве параметра.

Событие клика сначала срабатывает для того элемента, на котором кликнули, потом на охватывающем его элементе, потом на элементе, охватывающем охватывающий элемент и т.д. Событие всплывает от точки клика до body.

В процессе всплытия срабатывает каждый обработчик, встретившийся на этом пути. И внутри обработчика надо отличить ситуацию "кликнули именно по элементу, к которому привязан обработчик" и "кликнули по вложенному элементу". Именно для этого и нужен event.target - содержащий тот элемент, на котором реально кликнули.

В твоём случае вместо того, чтобы повесить по отдельному обработчику на каждый элемент menu__item, повешен единственный обработчик на охватывающий все menu__item элемент menu. А в обработчике проверяем, что кликнули именно на menu__item, и передаём элемент, на котором кликнули, в функцию select.

Такой способ обработки (когда один обработчик вешается не на каждый объект клика, а на охватывающий все объекты кликов объект) называется "делегирование событий": https://learn.javascript.ru/event-delegation
Роман Чернуха
Роман Чернуха
98 084
Лучший ответ
***mr** ...sultan(Hik... Спасибо конечно, но весь код я понимаю, я сам его написал подглядывая на learnjavascript. Меня интересует лишь описанный мною в конце вопроса момент с передачей event в функцию. Почему туда передается именно событие а не что угодно другое?
И что тут непонятно. event.target - просто элемент, которые передается в аргументе другой функции, которая его обрабатывает. По идее в аргументе функции в данном случае было бы правильнее использовать деструктуризацию, ибо самое событие не нужно.
 menu.onclick = function({target}) {...}
ВА
Вадим Аристов
65 078
Шариф Мирзоев Да я это понимаю, мне не понятно, как функция понимает что event который она принимает это именно событие?
считай что переменная event определена за функцией и если ее указать в параметрах то она заполнится текущим событием в котором будет самое главное инициатор (target, Event.currentTarget ) координаты мыши pageX pageY нажатые клавиши keyCode и еще какая то бесполезная шняга про событие
ВШ
Витя Ширяев
59 846
Это фича. Вообще, надо писать так:
 menu.onclick = function(event){
МБ
Максим Бойко
8 642
***mr** ...sultan(Hik... Да я знаю как писать, я именно спрашивал как работает передача параметра
Так почему же в параметр event передается именно событие а не что нибудь еще? Или это данность языка, и первый параметр передающийся в функцию прослушивателя всегда событие?
menu.onclick = function(event) {
Дмитрий Коробов
Дмитрий Коробов
267
***mr** ...sultan(Hik... Ну так у меня так и написано. Я же вот тут спросил
Так почему же в параметр event передается именно событие а не что нибудь еще? Или это данность языка, и первый параметр передающийся в функцию прослушивателя всегда событие?

Похожие вопросы