Совет: делегирование событий JavaScript за 4 минуты

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

Введите делегирование события

Вместо этого, с делегированием событий, мы просто добавляем один прослушиватель событий к элементу-предку, возможно, что-то вроде «ul» Затем, когда пользователь нажимает на один из его дочерних элементов, таких как тег привязки, мы проверяем только, была ли цель щелчка на самом деле тегом привязки. Если это так, мы поступаем в обычном режиме.

  $ ('ul'). click (function (e) {
	
	 if ($ (e.target) .is ('a')) {
		 предупреждение ( 'щелкнул');
	 }
 }); 

преимущества

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

Почему это работает?

Это работает из-за того, как элементы захватываются (не IE) и всплывают. Например, рассмотрим следующую простую структуру.

Когда вы нажимаете на тег привязки, вы также нажимаете на «li», «ul» и даже на элемент «body». Это называется пузыриться.

Примечания об этом скринкасте

Пожалуйста, имейте в виду, что это простой пример для объяснения функциональности. Мы использовали jQuery только потому, что у меня было четыре минуты на запись! В этом конкретном примере (сначала посмотрите скринкаст) мы могли бы использовать два альтернативных варианта:

1. Передайте true в качестве параметра метода clone (). Это затем клонирует элемент, а также любые обработчики событий.
2. Вместо этого используйте метод live (). Однако будьте осторожны при использовании этого метода: он повторно подключает обработчик событий X раз. Это не обязательно может быть необходимо.

Главным образом, это должно было продемонстрировать идею. С обычным JavaScript вы можете сделать что-то вроде:

  // Получить неупорядоченный список, содержащий теги привязки
 var ul = document.getElementById ('items');

 // Быстрый и простой кросс-браузерный обработчик событий - чтобы компенсировать обработчик IE attachEvent
 function addEvent (obj, evt, fn, capture) {
	 if (window.attachEvent) {
		 obj.attachEvent ("on" + evt, fn);
	 }
	 еще {
		 если (! capture) capture = false;  // захватить
		 obj.addEventListener (evt, fn, capture)
	 }
 }

 // Проверяем, является ли выбранный вами узел якорным тегом.  Если так, продолжайте в обычном режиме. 
 addEvent (ul, "click", function (e) {
   // Firefox и IE обращаются к целевому элементу по-разному.  e.target и event.srcElement соответственно.
   var target = e?  e.target: window.event.srcElement;
   if (target.nodeName.toLowerCase () === 'a') {
      предупреждение ( "щелкнул");
      вернуть ложь;
   }
 }); 

• Подпишитесь на нас в Твиттере или подпишитесь на ленту Nettuts + RSS для получения лучших учебных материалов по веб-разработке.