昨天在yahoo user interface blog 看到了一片文章 : Event Driven Web Application Design
在读到关于event delegation的时候,我被这个概念吸引注了,于是通过这个地址看到了一篇关于
event delegation vs event handling 的文章, 这篇文章将event delegation的概念讲的比较详细了,
不过还是在自己动手写的代码之后才真正明白了是怎么一回事,看看我写的这个非常简单的例子吧

<html>
<head>

<script src="prototype.js"></script>
<script>
function containerHandler(e){
alert("target:"+e.target.id+"—currentTarget:"+e.currentTarget.id+"—bubbles:"+e.bubbles) ;
}

</script>
</head>

<body>
<div id="container">
<ul id="list">
<li id="li-1">List Item 1</li>
<li id="li-2">List Item 2</li>

<li id="li-3">List Item 3</li>
<li id="li-4">List Item 4</li>
<li id="li-5">List Item 5</li>

<li id="li-6">List Item 6</li>
</ul>
</div>
</body>
<script>
Event.observe($(’container’),’click’,containerHandler,false);
</script>
</html>

Event对象有几个比较重要的属性,也就是我们alert出来的那几个,其中target表示触发事件的元素,currentTarget表示监听事件的元素,bubbles表示时间是否向外层传播. 乍看上去target和currentTarget非常容易混淆,不过让我们看看event bubble的概念可能就会更清楚一些.
…In essence this means that whenever you do something to an [...]