0

В JQuery для того что бы повесить обработчик на на все ссылки на странице достаточно вот такого кода

$( "a" ).click(function() {
  alert( "Handler for .click() called." );
});

При этом если на страницу динамически добавить новый элемент <a></a> то событие сработает и на наём.

Я хочу понять как это сделано. На чистом JS получается вот так:

var a = d.getElementsByTagName("a");

for(var i = 0; i < a.length; i ++) {
    a[i].addEventListener("click", function (e) {
        alert( "Handler for .click() called." );
    });
}

Но таким образом событие вешается только на элементы которые уже существуют и если добавить ещё один динамически, обработчика события на нём не будет.

Как это исправит ? И как этот момент реализован в jQuery ?

2 ответа 2

2

Это называется делегирование событий. Чтобы понять как это работает посмотрите эту статью: https://learn.javascript.ru/event-delegation

Вкратце суть в том, в случае делегирования, обработчик события вешается на какой-то корневой элемент, например на document. Далее, по мере всплытия событий, внутри обработчика мы проверяем то, на каком узле DOM оно произошло, и если узел нам подходит, то выполняем нужное действие.

Пример кода из статьи:

table.onclick = function(event) {
  var target = event.target; // где был клик?

  if (target.tagName != 'TD') return; // не на TD? тогда не интересует

  highlight(target); // подсветить TD
};

На jQuery конечно делать делегирование гораздо проще чем на чистом JS. Вся эта логика под капотом.

3
  • А можете добавить еще и пример кода, для наглядности =) 13 авг 2015 в 14:58
  • Да нет, я знаю как это работает, просто думал что они придумали что-то лучше. Дело в том что у меня сайт жрёт слишком много ресурсов и сначала я подумал что это из-за того, что все события у меня сразу присвоены в document. Если кто-то встречался с такой проблемой подскажите как справится. 13 авг 2015 в 15:02
  • @СтаниславДалинин слишком много обработчиков конечно могут привести к тормозам, но если уж привели, то приведут в любом случае, хоть на документе, хоть где. Скорее всего у вас вообще в другом проблема.
    – IonDen
    13 авг 2015 в 15:04
0

Пример, описанный в вопросе

$( "a" ).click(function() {
     alert( "Handler for .click() called." );
  });

как раз не поддерживает обработку событий для динамически добавленных элементов. Для обработки необходимо использовать функции:

  $('.container').delegate('a', 'click', function() {
     alert( "Handler for .click() called." );
  });

или

  $('.container').on('click', 'a', function() {
     alert( "Handler for .click() called." );
  });

В Javascript, честно говоря, не знаю существуют ли аналогичные методы. Как вариант, можно вешать события непосредственно при добавлении элемента.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.