1.0Чудо{вищные} заметкиhttps://miracle.rpz.nameMiRacLehttps://miracle.rpz.name/author/miracle/Всплытие покажет<p>
Предположим у нас есть html-таблица 100x100 ячеек,в каждой ячейке - ссылка. При нажатии на каждую, должно происходить что-либо невероятное.
Мы можем сделать 10 тыс обработчиков onclick и медленно, но верно добиться своей цели.
А можем глупостей не делать. Ведь хватит только одного!
</p>
<p><img src="http://miracle.rpz.name/shared/event_bubbling.gif" align="right">
Дело в том, что события в DOM умею "всплывать" - т.е. если представить документ в виде слоёной структуры, где сам document находиться сверху, радуя глаз хрустящей корочкой, а все дочерние элементы под ним, то событие возбуждённое на нижних уровнях, не найдя свой законный обработчик у потревоженного объекта начинает потихоньку лезть наверх, шевеля всё на своём пути, и искать свой обработчик последовательно у всех предков.
Что это собственно даёт? Это может существенно сократить количество обработчиков событий на странице. На идеальной сферической странице вакуумного веб-приложения всего один обработчик!
</p>
Перейду к примерам:<!--more-->
<pre class="js:nocontrols">
window.onload = function(){
var tbl = document.getElementById('tbl'), links = tbl.getElementsByTagName('a'), linkcount = links.length;
for (var i = 0; i < linkcount; i++){
(function(){
var num = i;
x[i].onclick = function(){
alert('Это обработчик номер ' + num + ' из ' + linkcount + ', ужас правда?');
return false;
};
})();
}
}
</pre>
Готово. 10000 обработчиков. Легко. Просто. И долго…
А теперь Горбатый! (Я сказал "Горбатый?!?")
<pre class="js:nocontrols">
window.onload = function(){
var tbl = document.getElementById("tbl");
tbl.onclick = function(e) {
e = e || window.event;
var elem = e.target || e.srcElement;
if ('a' === elem.nodeName.toLowerCase()) {
alert('Это обработчик. Один. ЕДИНСТВЕННЫЙ!');
}
}
}
</pre>
А если не видно разницы, то зачем платить <strike>больше</strike> ?
С jQuery эта техника будет выглядеть следующим образом:
<pre class="js:nocontrols">
$('#tbl').bind('click',function(e) {
if ($(e.target).is('a')) {
alert('Это обработчик. Один. ЕДИНСТВЕННЫЙ!');
return false;
}
});
</pre>
В заключение пару плагинов для <a href="http://jquery.com">jQuery</a>, берущие "пыльную" работу в свои руки:
<a href="http://flesler.blogspot.com/2007/10/jquerylisten.html">jQuery.listen</a>
<pre class="js:nocontrols">
$('#tbl').listen('click', 'a', function (e) {
alert('Это обработчик. Один. ЕДИНСТВЕННЫЙ!');
e.preventDefault();
});
</pre>
и <a href="http://dev.distilldesign.com/log/2008/jan/27/event-delegation-jquery/">jquery.eventdelegation</a>
<pre class="js:nocontrols">
$('#tbl').delegate('click', 'a', function () {
alert('Это обработчик. Один. ЕДИНСТВЕННЫЙ!');
return false;
});
</pre>
Удачного всплытия!rich