В DOM & JavaScript события имеют свойство "всплывать". Например, если вы кликните по вложенному элементу, то обработчик клика вызовется сначала для этого элемента, а затем для всех родительских вплоть до document. Иногда "всплывание" мешает и его можно оборвать.
Поставим конкретную задачу
Есть HTML-документ с DIV-ом. Необходимо, чтобы при клике на любую часть документа появлялось окно-предупреждение с текстом "Document". Если же клик пришелся на DIV, то текстом окна должен быть "DIV".
Решение:
1) Создаем HTML-элемент (приведен только актуальный код):
<div id="divId">DIV</div>
<body>
2) Запишем функции для добавления обработчиков событий и для обрыва всплывания событий.
if (object.addEventListener) {
object.addEventListener(event, handler, useCapture ? useCapture : false);
} else if (object.attachEvent) {
object.attachEvent('on' + event, handler);
} else alert("Add handler is not supported");
}
function cancelBubbling(evt) {
evt = evt || window.event;
evt.cancelBubble = true;
}
3) Добавим обработчики, в один из которых поставим функцию cancelBubbling:
document,
"click",
function() {alert("Document");}
);
addHandler(
document.getElementById("divId"),
"click",
function(event) {
alert("DIV");
// Запрещаем всплывание событий после DIV-а
cancelBubbling(event);
}
);
4) Готово!
Функция cancelBubbling работает со свойством cancelBubble объекта event, которое и запрещает всплывание событий.
1) Функция добавления обработчика события может быть записана в более комплексном виде (для совместимости со старыми и редкими браузерами):
if (node.AddEventListener) {
node.addEventListener (type, f, false);
} else if (node.attachEvent) {
node.attachEvent('on' + type, f);
} else {
node['on' + type] = f;
}
}
Код в последнем условии выполняется и в старых браузерах, и в новых, так что, на самом деле, можно было бы всю функцию заменить на строку кода вида:
node['on' + type] = f;
}
2) cancelBubbling - это фишка Microsoft, для работы с W3C моделью событий нужно использовать метод stopPropagation() у объекта event. Так что вашу функцию cancelBubbling я бы записал вот так:
e = e || event;
e.cancelBubble = true;
if (e.stopPropagation) {
e.stopPropagation();
}
}
Ну а ваш метод - остановка всплытия в non-IE браузерах путем перехвата распространения события в trickling фазе, на мой взгляд, несколько не верно и не очевидно.
2) Тут вы не совсем правы. Событие может всплывать и просачиваться, причем последнее не реализовано в ИЕ. Но всплывание и его блокирование работает кроссбраузерно и функцию cancelBubbling лучше оставить в исходном виде.
2) А вот тут буду спорить :)
Лично я всегда третий параметр функции addEventListener устанавливаю в false. И сейчас объясню, почему.
Этот третий параметр указывает, на какой фазе распространения события передавать его в функцию обработчик - на стадии просачивания (true) или на стадии всплытия (false).
Таким образом, я в своем коде полностью отказываюсь от trickling-фазы (просачивания), и вот по каким причинам:
а) модель Bubbling намного проще для понимания (да, ведь приходят же новички, и их тоже надо учить); модель bubbling намного логичнее. Этот пункт - полное имхо.
б) Модель bubbling дает серьезные бонусы в экономии памяти при работе с большим количеством элементов (можно приаттачить обработчик функции только родительскому контейнеру, вместо того, чтобы приаттачивать 100+ обработчиков каждому из элементов)
в) в IE реализована только модель bubbling, и, насколько можно судить (по бетам в IE 8), Microsoft не будет добавлять просачивание событий. А это значит, что для того, чтобы код приложения был кроссбраузерным, проще везде использовать модель bubbling (несколько нелогично использовать две модели в одном приложении - это же в два раза больше кода).
Так что я всегда ловлю события на стадии всплытия, и останавливаю их распространения в non-IE браузерах с помощью stopPropagation().