Событие для делегирования события - PullRequest
Новая
       24

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

1 голос
/ 03 февраля 2012

Я пытаюсь реализовать делегирование события с помощью следующего кода: 

<html>
<head>
<script>
document.addEventListener('click', function(e){
    alert(e.target.className);
}, false);
</script>
</head>
<body>
<ul class="list">
    <li class="item">A</li>
    <li class="item">B</li>
    <li class="item">C</li>
    <li class="item">D</li>
</ul>
</body>
</html>

Я хочу, чтобы событие всплыло, чтобы при нажатии на элемент <li> предупреждение показывало item,а затем еще одно предупреждение показывает list.Но этот код дает предупреждение только с item.Как я могу изменить это так, чтобы событие пузырилось?

Ответы [ 5 ]

1 голос
/ 28 ноября 2012

Я только что выпустил небольшую библиотеку делегирования событий, чтобы было проще делать такие вещи. Проверьте это в http://craig.is/riding/gators

Вы можете сделать 

Gator(document).on('click', 'li', function() { alert('li clicked!'); });
Gator(document).on('click', 'ul', function() { alert('ul clicked!'); });

Это свяжет обработчик одного клика с документом и отправит события соответственно.

Они оба будут срабатывать при нажатии li, если вы не остановите распространение.

1 голос
/ 03 февраля 2012

Вам нужно добавить событие в список, чтобы предупредить его.Событие перехватывается родительскими объектами, но с ними не связано событие, поэтому оно не предупреждает.Вам нужно добавить событие для всех объектов, чтобы предупредить его.

1 голос
/ 03 февраля 2012

Обратный вызов события срабатывает только один раз, но это не значит, что событие не всплывает.Обратный вызов выполняется только тогда, когда сам элемент слушает событие.

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

1 голос
/ 03 февраля 2012

Когда вы связываете обработчик щелчка с объектом document, вы не можете ожидать, что он будет вызываться несколько раз. Он будет вызван только один раз (для объекта document).

Кстати, событие делает пузырь вверх по дереву DOM. Если этого не произойдет, он не достигнет объекта document, и вы не увидите ни одного окна предупреждения.

Итак, событие запускается в элементе LI, а затем всплывает до самого объекта document, где вызывается обработчик нажатия.

Кстати, обычно вы делегируете не весь объект document, а ближайшему общему предку. Например, если вы хотите обрабатывать щелчки на элементах LI, вы делегируете элементу UL: 

var list = document.getElementsByClassName( 'list' )[0];    

list.addEventListener( 'click', function ( e ) {
    var item = e.target;

    // handle item click
}, false );

Демонстрационная версия: http://jsfiddle.net/rCVfq/

0 голосов
/ 03 января 2014

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

var list = document.getElementsByClassName('list')[0];
list.addEventListener("click", function (e) {
   var target = e.target;
   while (target !== list) {
      switch(target.nodeName) {
          case "LI": //alert('li clicked!')
          break;
          case "UL": //alert('ul clicked!')
          break;
      }
      target = target.parentNode;
   }
});
...