События/Слушатели событий
Там нет никакой разницы между прослушивателем событий и обработчиком событий - для всех практических целей, они то же самое. Но, это может помочь думать о них иначе:
можно определить один «обработчик» ...
function myHandler(e){ alert('Event handled'); }
... и прикрепить его к нескольким элементам с помощью «addEventListener»:
elementA.addEventListener('click', myHandler);
elementB.addEventListener('click', myHandler, true);
Или, я могу определить мой "обработчик" как замыкание в 'addEventListener':
elementC.addEventListener('click', function(e){ alert('Event Handled'); });
Захват событий/событие Bubbling
Вы можете думать о захвате события как о противоположном событию Bubbling - или как о двух половинах жизненного цикла события. Элементы DOM могут быть вложены (конечно). Первое событие CAPTURES от самого внешнего родителя до самого внутреннего ребенка, а затем BUBBLES от самого внутреннего ребенка до самого внешнего родителя.
Возможно, вы заметили, что в моем примере выше слушатель, прикрепленный к элементу B, имеет дополнительный параметр - true - который не передается элементу A.Это говорит слушателю ответить на событие на фазе CAPTURE, тогда как по умолчанию будет отвечать на фазу BUBBLE. Попробуйте это на jsfiddle.net:
Скажем, у нас есть 3 вложенных DIV элементы:
<div id="one">
1
<div id="two">
2
<div id="three">
3
</div>
</div>
</div>
... и мы придаем 'Клик' обработчик к каждому:
document.getElementById('one').addEventListener('click', function(){ alert('ONE'); });
document.getElementById('two').addEventListener('click', function(){ alert('TWO'); }, true);
document.getElementById('three').addEventListener('click', function(){ alert('THREE') });
Если нажать '1', вы увидите окно с текстом «ONE».
Если нажать кнопку «2», вы увидите окно предупреждения «два», а затем встревоженное поле «ONE» (потому что «два» выстрелил первые во время ЗАХВАТА ФАЗЫ и «один» является открыл огнь по дороге обратно в течение BUBBLE ФАЗЫ)
Если вы нажмете «3», вы увидите окно предупреждения «два» (ФИГУРИРУЮТ), а затем встревоженное полем «ТРИ» (BUBBLED), а затем поле предупреждения «ONE» (BUBBLED).
Очистить как грязь, не так ли?
Насколько я знаю, обработчик события привязан один раз к элементу в dom, а прослушиватель событий запускается независимо от того, был ли загружен контент dom после того, как слушатель был связан – kurt