【web前端】关于javaScript事件代理,委托

    假设我们要弄个瀑布了页面用来做一个有故事的相册接下来开始做。

<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.你的操作.......
	}
}






 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值