假设我们要弄个瀑布了页面用来做一个有故事的相册接下来开始做。
<div id="targetBOX">
<div>照片</div>
<div>照片</div>
<div>照片</div>
<div>照片</div>
<div>照片</div>
</div>
假设这里的targetBOX是一个相册盒子,里面全是一张一张的照片对象,但是我们需要给这些每一张相片添加一个鼠标点击弹出旋转到背后照片背后是关于照片的故事。显然随着时间的推移,同一个页面照片越来越多,同样onclick绑定的DOM越来越多,这样的话无疑给这个页面增加了负担-因为每个函数都是一个对象,对象会占用内存。
怎么办呢?
我们要利用事件冒泡(Event Bubble)
从这里开始我认为你已经了解了冒泡
我们把这个些照片的事件统一委托给他们的 父级targetBOX 你肯定会疑惑 这样targetBOX怎么会知道我点的是谁? 这里就要用到Event对象提供的属性一个叫target 这个属性会返回事件源头这样就知道了 事件源是那个box了
然后我们这样写 var obj=Event.target 这样我们就得到了这个点击的对象
tarbox.onclick=function(event){
var eve = event || window.event;//浏览器用ev.target,IE浏览器用event.srcElement
var obj=eve.target||eve.srcElement;//获取到了事件源
if(obj.nodeName.toLowerCase() =='div'){
obj.你的操作.......
}
}