Въведение

Това е публикация в моята поредица „Въпроси за интервю с JavaScript за преден край“, където предоставям отговори и примери за общи въпроси за интервю за JavaScript за предния край. Ако оценявате тази публикация, не се колебайте да ме последвате в Medium, Github или Twitter!

Забележка: Получавам повечето от въпросите си за интервю от тази отлична справка, но може да се отклонявам от време на време!

Въпрос на тази публикация: Какво е делегиране на събития?

Делегирането на събитие добавя event listener към родителски елемент в DOM, вместо да го прикачва към всеки дъщерен елемент. За да разберем защо бихме искали да направим това, нека вземем общ пример: елементи в списък. Ето нашия HTML:

<ul id="my-list">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

Да кажем, че искаме да console.log съдържанието на елемент от списък, когато се щракне върху него. Без делегиране на събитие можем да напишем следния javascript:

let listItems = document.querySelectorAll("#my-list li");
for (let i = 0; i < listItems.length; i++) {
  listItems[i].addEventListener("click", e => {
    console.log(e.target.innerHTML);
  });
}

Това ще работи, но да кажем, че трябва динамично да добавим друг елемент от списъка. Нашият javascript става нещо подобно:

let listItems = document.querySelectorAll("#my-list li");
for (let i = 0; i < listItems.length; i++) {
  listItems[i].addEventListener("click", e => {
    console.log(e.target.innerHTML);
  });
}
let list = document.querySelector("#my-list");
let newItem = document.createElement("li");
newItem.innerHTML = "Four";
list.appendChild(newItem);

Но сега, ако се опитаме да щракнем върху този четвърти елемент, нищо не се регистрира в конзолата (вижте това в цялата му неуспешна слава тук). Това е така, защото четвъртият елемент не съществуваше, когато event listeners бяха добавени към другите елементи от списъка. Технически бихме могли да добавяме нов event listener всеки път, когато добавяме нов елемент от списъка, но това е тромаво. Вместо това можем да използваме делегиране на събитие!

За да използваме event delegation, просто трябва да осъзнаем, че събитието за щракване се издига от елементите li до ul елемент. Можем да прикрепим щракване event listener към родителския елемент ul и да изпълним нашето действие console.log, ако събитието target за щракване е li. Нашият javascript става това:

let list = document.querySelector("#my-list");
list.addEventListener("click", e => {
  if (e.target && e.target.nodeName == "LI") {
    console.log(e.target.innerHTML);
  }
});
let newItem = document.createElement("li");
newItem.innerHTML = "Four";
list.appendChild(newItem);

Както можете да видите в тази цигулка, желаният console.log работи перфектно на четвъртия елемент, без да се налага ръчно да добавяте допълнителни event listeners.