<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Чудо{вищные} заметки &#187; events</title>
	<atom:link href="http://miracle.rpz.name/tag/events/feed/" rel="self" type="application/rss+xml" />
	<link>http://miracle.rpz.name</link>
	<description>Sorry for my terrible english. My native language is PHP.</description>
	<lastBuildDate>Thu, 12 Jan 2012 20:42:08 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.4-alpha-19719</generator>
		<item>
		<title>Всплытие покажет</title>
		<link>http://miracle.rpz.name/2008/05/05/event-bubbling/</link>
		<comments>http://miracle.rpz.name/2008/05/05/event-bubbling/#comments</comments>
		<pubDate>Mon, 05 May 2008 09:51:14 +0000</pubDate>
		<dc:creator>MiRacLe</dc:creator>
				<category><![CDATA[dev]]></category>
		<category><![CDATA[js]]></category>
		<category><![CDATA[web]]></category>
		<category><![CDATA[events]]></category>
		<category><![CDATA[jquery]]></category>

		<guid isPermaLink="false">http://miracle.rpz.name/2008/05/05/event-bubbling/</guid>
		<description><![CDATA[Предположим у нас есть html-таблица 100&#215;100 ячеек,в каждой ячейке &#8211; ссылка. При нажатии на каждую, должно происходить что-либо невероятное. Мы можем сделать 10 тыс обработчиков onclick и медленно, но верно добиться своей цели. А можем глупостей не делать. Ведь хватит только одного! Дело в том, что события в DOM умею &#8220;всплывать&#8221; &#8211; т.е. если представить [...]]]></description>
			<content:encoded><![CDATA[<p>
Предположим у нас есть html-таблица 100&#215;100 ячеек,в каждой ячейке &#8211; ссылка. При нажатии на каждую, должно происходить что-либо невероятное.<br />
Мы можем сделать 10 тыс обработчиков onclick и медленно, но верно добиться своей цели.<br />
А можем глупостей не делать. Ведь хватит только одного!
</p>
<p><img src="http://miracle.rpz.name/shared/event_bubbling.gif" align="right"><br />
 Дело в том, что события в DOM умею &#8220;всплывать&#8221; &#8211; т.е. если представить документ в виде слоёной структуры, где сам document находиться сверху, радуя глаз хрустящей корочкой, а все дочерние элементы под ним, то событие возбуждённое на нижних уровнях, не найдя свой законный обработчик у потревоженного объекта начинает потихоньку лезть наверх, шевеля всё на своём пути, и искать свой обработчик последовательно у всех предков.<br />
Что это собственно даёт? Это может существенно сократить количество обработчиков событий на странице. На идеальной сферической странице вакуумного веб-приложения всего один обработчик!
</p>
<p>Перейду к примерам:<span id="more-106"></span></p>
<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>
<p>Готово. 10000 обработчиков. Легко. Просто. И долго…</p>
<p>А теперь Горбатый! (Я сказал "Горбатый?!?")</p>
<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>
<p>А если не видно разницы, то зачем платить <strike>больше</strike> ?</p>
<p>С jQuery эта техника будет выглядеть следующим образом:</p>
<pre class="js:nocontrols">
    $('#tbl').bind('click',function(e) {
            if ($(e.target).is('a')) {
                    alert('Это обработчик. Один. ЕДИНСТВЕННЫЙ!');
                    return false;
            }
    });
</pre>
<p>В заключение пару плагинов для <a href="http://jquery.com">jQuery</a>, берущие "пыльную" работу в свои руки: </p>
<p><a href="http://flesler.blogspot.com/2007/10/jquerylisten.html">jQuery.listen</a> </p>
<pre class="js:nocontrols">
$('#tbl').listen('click', 'a', function (e) {
    alert('Это обработчик. Один. ЕДИНСТВЕННЫЙ!');
    e.preventDefault();
});
</pre>
<p>и <a href="http://dev.distilldesign.com/log/2008/jan/27/event-delegation-jquery/">jquery.eventdelegation</a></p>
<pre class="js:nocontrols">
$('#tbl').delegate('click', 'a', function () {
    alert('Это обработчик. Один. ЕДИНСТВЕННЫЙ!');
    return false;
});
</pre>
<p>Удачного всплытия!</p>
]]></content:encoded>
			<wfw:commentRss>http://miracle.rpz.name/2008/05/05/event-bubbling/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
	</channel>
</rss>

<!-- Served from: miracle.rpz.name @ 2012-02-06 18:03:40 by W3 Total Cache -->
