事件委托（详解）

最新推荐文章于 2025-06-09 08:14:13 发布

原创最新推荐文章于 2025-06-09 08:14:13 发布 · 730 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript

收录于

javascript 专栏收录该内容

60 篇文章

订阅专栏

本文介绍了事件委托的基本概念，展示了如何使用事件冒泡机制来管理大量事件，通过一个实例讲解了事件委托的具体实现方法及其优势，并指出了一些不适用于事件委托的情况。

事件委托就是利用事件冒泡。指定一个事件的处理程序，就可以管理某一类型所有的时间。
在绑定大量事件的时候往往选择事件委托。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul id="rarent">
        <li class="child">one</li>
        <li class="child">two</li>
        <li class="child">three</li>
    </ul>
</body>
</html>
<script type="text/javascript">
//获取父元素
var dom = document.getElementById('rarent')

dom.onckick = function (event){
    var event = event || window.event
    var ct = event.target || event.srcElement;
    if(ct.tagName.toLowerCase() == 'li'){
        //要处理的事件
    }
}

</script>

优点：
节省内存占用，减少事件注册
新增子对象时无需再次对其事件绑定，适合动态添加元素
局限性：
focus，blur之类的事件本身没有事件冒泡机制，所以无法委托
mousemove，mouseout这样的事件，虽然有事件冒泡，但只能不断通过位置去计算定位，对性能消耗高，不适合事件委托