javascript - события - Что такое делегирование событий DOM?




события js (4)

Концепция делегации

Если внутри одного родителя есть много элементов, и вы хотите обрабатывать события на них, не привязывайте обработчики к каждому элементу. Вместо этого привяжите одиночный обработчик к своему родительскому объекту и получите дочерний элемент из event.target. На этом сайте представлена ​​полезная информация о том, как реализовать делегирование событий. http://javascript.info/tutorial/event-delegation

Может ли кто-нибудь объяснить делегирование событий в JavaScript и как это полезно?


Делегат в C # похож на указатель на функции в C или C ++. Использование делегата позволяет программисту инкапсулировать ссылку на метод внутри объекта делегата. Затем объект делегата может быть передан в код, который может вызвать ссылочный метод, без необходимости знать во время компиляции, какой метод будет вызываться.

См. Эту ссылку -> http://www.akadia.com/services/dotnet_delegates_and_events.html


Делегирование событий позволяет избежать добавления прослушивателей событий к конкретным узлам; вместо этого прослушиватель событий добавляется к одному родителю. Этот прослушиватель событий анализирует пузырьковые события, чтобы найти соответствие для дочерних элементов.

Пример JavaScript:

Предположим, что у нас есть родительский элемент UL с несколькими дочерними элементами:

<ul id="parent-list">
<li id="post-1">Item 1</li>
<li id="post-2">Item 2</li>
<li id="post-3">Item 3</li>
<li id="post-4">Item 4</li>
<li id="post-5">Item 5</li>
<li id="post-6">Item 6</li>

Давайте также скажем, что что-то должно произойти, когда щелкнут каждый дочерний элемент. Вы можете добавить отдельный прослушиватель событий для каждого отдельного элемента LI, но что, если элементы LI часто добавляются и удаляются из списка? Добавление и удаление прослушивателей событий было бы кошмаром, особенно если код добавления и удаления находится в разных местах вашего приложения. Лучшее решение - добавить прослушиватель событий в родительский элемент UL. Но если вы добавите прослушиватель событий к родительскому объекту, как вы узнаете, какой элемент был нажат?

Простой: когда событие пузырится до элемента UL, вы проверяете целевое свойство объекта события, чтобы получить ссылку на фактический щелкнутый узел. Вот очень простой фрагмент JavaScript, который иллюстрирует делегирование событий:

// Get the element, add a click listener...
document.getElementById("parent-list").addEventListener("click", function(e) {
// e.target is the clicked element!
// If it was a list item
if(e.target && e.target.nodeName == "LI") {
    // List item found!  Output the ID!
    console.log("List item ", e.target.id.replace("post-"), " was clicked!");
       }
 });

Начните с добавления прослушивателя событий щелчка к родительскому элементу. Когда прослушиватель событий запускается, проверьте элемент события, чтобы убедиться, что это тип элемента, на который реагирует. Если это элемент LI, бум: у нас есть то, что нам нужно! Если это не тот элемент, который мы хотим, событие можно игнорировать. Этот пример довольно прост - UL и LI - прямое сравнение. Давайте попробуем что-нибудь более сложное. Давайте иметь родительский DIV с большим количеством детей, но все, о чем мы заботимся, это тег A с классом CSS класса:

  // Get the parent DIV, add click listener...
  document.getElementById("myDiv").addEventListener("click",function(e) {
// e.target was the clicked element
if(e.target && e.target.nodeName == "A") {
    // Get the CSS classes
    var classes = e.target.className.split(" ");
    // Search for the CSS class!
    if(classes) {
        // For every CSS class the element has...
        for(var x = 0; x < classes.length; x++) {
            // If it has the CSS class we want...
            if(classes[x] == "classA") {
                // Bingo!
                console.log("Anchor element clicked!");
                // Now do something here....
            }
        }
    }

  }
});

http://davidwalsh.name/event-delegate


Delegation - это метод, при котором объект выражает определенное поведение снаружи, но на деле делегирует ответственность за реализацию этого поведения для связанного объекта. Это звучит вначале очень похоже на прокси-шаблон, но он выполняет совершенно другую цель. Делегирование - это механизм абстракции, который централизует поведение объекта (метода).

Обычно говорят: используйте делегирование как альтернативу наследованию. Наследование - хорошая стратегия, когда близкие отношения существуют между родительским и дочерним объектами, однако наследование очень близко переносит объекты. Часто делегация является более гибким способом выражения отношений между классами.

Этот шаблон также известен как «сети прокси». Некоторые другие шаблоны проектирования используют делегирование - от этого зависят состояние, стратегия и шаблоны посетителей.





event-delegation