Последним этапом нашего квеста по распутыванию будет код, подробно расписывающий содержимое схемы и все три шага:

let theParent = document.querySelector("#theDude");

theParent.addEventListener("click", doSomething, false);

function doSomething(e) {

if (e.target != e.currentTarget) {

let clickedItem = e.target.id;

console.log("Hello " + clickedItem);

}

e.stopPropagation();

}

Уделите время и внимательно прочитайте и проанализируйте этот код. Приняв во внимание наши изначальные цели и схему, мы будем слушать событие в родительском элементе theDude:

let theParent = document.querySelector("#theDude");

theParent.addEventListener("click", doSomething, false);

Обработкой этого события занимается один обработчик, которым является функция doSomething:

function doSomething(e) {

if (e.target != e.currentTarget) {

let clickedItem = e.target.id;

console.log("Hello " + clickedItem);

}

e.stopPropagation();

}

Этот слушатель событий будет вызван каждый раз, когда будет происходить щелчок как в самом элементе theDude, так и в любом из его потомков. Нас же интересуют только события щелчка потомков. Правильным способом игнорировать щелчки по родительскому элементу будет просто избежать выполнения любого кода, если элемент, на котором произошел щелчок (то есть целевое событие), совпадает со слушателем событий (то есть элементом theDude):

function doSomething(e) {

if (e.target != e.currentTarget) {

let clickedItem = e.target.id;

console.log("Hello " + clickedItem);

}

e.stopPropagation();

}

Цель события представлена e.target, а целевой элемент, к которому прикреплен слушатель событий, — e.currentTarget. Простая проверка равенства этих событий даст гарантию, что обработчик событий не среагирует на ненужные вам события, запущенные из родительского элемента.

Чтобы остановить распространение события, мы просто вызываем метод stopPropagation:

function doSomething(e) {

if (e.target != e.currentTarget) {

let clickedItem = e.target.id;

console.log("Hello " + clickedItem);

}

e.stopPropagation();

}

Обратите внимание, что этот код располагается вне инструкции if. Я сделал так, чтобы остановить перемещение события по DOM во всех случаях, как только оно будет услышано.