为了账号安全,请及时绑定邮箱和手机立即绑定

js中的事件委托或是事件代理详解

标签:
JavaScript

<div id="gaga">  
<a href="#" gaga = "xixi">1</a>  
<a href="#">10</a>  
<a href="#">100</a>  
<a href="#">1000</a>  
<a href="#">10000</a>  
<a href="#">100000</a>  
<a href="#">1000000</a>  
<a href="#">10000000</a>  
<a href="#">100000000</a>  
<a href="#">1000000000</a>  
<a href="#">10000000000</a>  
<a href="#">100000000000</a>  
</div>  
<script>  
var gaga = document.getElementById( "gaga" );  
gaga.onclick = function( e ){  
var e = e || window.event;  
var Target = e.srcElement || e.target;      // srcElement这个只是支持firefox

alert( Target.tagName);  if( Target.tagName.toUpperCase() == "A" ){      alert( Target.innerHTML );  };  return false;   //  防止跳转

};  
</script>

这样的好处就不用给每个a链接绑定一个onclick事件,减少了内存泄露问题,提高了性能,还降低浏览器崩溃的风险。

不过不是所有的事件都能冒泡的。blur、focus、load和unload不能像其它事件一样冒泡。事实上blur和focus可以用事件捕获而非事件冒泡的方法获得(在IE之外的其它浏览器中)。
在管理鼠标事件的时候有些需要注意的地方。如果你的代码处理mousemove事件的话你遇上性能瓶颈的风险可就大了,因为mousemove事件触发非常频繁。而mouseout则因为其怪异的表现而变得很难用事件代理来管理。

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消