事件委托

事件委托

先看问题,如下,需要实现当鼠标悬停在哪个li标签时,就弹出123的提示。

<ul id="ul1">
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
</ul>

方法一

用for循环遍历每个li元素为其绑定事件。这是一般的做法。

方法二

为事件绑定ul元素实现上述效果的办法就是事件委托。

<script>
window.onload = function(){
    var oUl = document.getElementById("ul1");
    //将ul这个dom节点储存在变量oul中
   oUl.onclick = function(){
        alert(123);
        //为上述节点绑定事件
    }
}
</script>

那么为啥绑定的是ul,点击li标签内内容时,会触发事件呢?这是因为一般的浏览器默认都是采用冒泡的事件流。

为啥要事件委托

节省内存

参考

js中的事件委托 - leejersey - 博客园
js中的事件委托或是事件代理详解 - 凌云之翼 - 博客园

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容