温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

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

发布时间:2020-06-24 16:55:39 来源:网络 阅读:378 作者:dforests 栏目:web开发

<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则因为其怪异的表现而变得很难用事件代理来管理。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI