javascript事件委托

最新推荐文章于 2025-05-09 09:25:24 发布

原创最新推荐文章于 2025-05-09 09:25:24 发布 · 347 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

web前端同时被 2 个专栏收录

99 篇文章

订阅专栏

javascript

90 篇文章

订阅专栏

本文介绍了事件委托技术，这是一种通过在DOM树的较高层级添加单一事件处理程序来管理多个子元素事件的方法。文章详细解释了如何利用事件冒泡原理减少代码复杂度，并提供了具体的HTML和JavaScript示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

对“事件处理程序过多”问题的解决方案就是事件委托。事件委托利用了事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。例如，click 事件会一直冒泡到document 层次。也就是说，我们可以为整个页面指定一个onclick 事件处理程序，而不必给每个可单击的元素分别添加事件处理程序。

例如如果要给每个li绑定click事件,一般第一印象肯定是这样

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        label{display: inline-block;width:200px;height:40px;border:1px solid #ccc;}
        .ob{width:200px;background:#ccc;padding:10px;}
        .child{width:100px;height:100px;background:red;}
    </style>
</head>
<body>
    <div class="ob" id="od">
        <ul>
            <li class="o1">1</li>
            <li class="o2">2</li>
            <li class="o3">3</li>
            <li class="o4">4</li>
        </ul>
    </div>
    <a href="#od">hah </a>
    <a href="#oh">hah </a>
    <script>
        document.querySelector(".ob .o1").click = function(){
             alert("o1");
        }
        document.querySelector(".ob .o2").click = function(){
             alert("o2");
        }
        document.querySelector(".ob .o3").click = function(){
             alert("o3");
        }
        document.querySelector(".ob .o4").click = function(){
             alert("o4");
        }


    </script>
</body>
</html>

如果在一个复杂的Web 应用程序中，对所有可单击的元素都采用这种方式，那么结果就会有数不清的代码用于添加事件处理程序。此时，可以利用事件委托技术解决这个问题。使用事件委托，只需在DOM 树中尽量最高的层次上添加一个事件处理程序，如下面的例子所示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        label{display: inline-block;width:200px;height:40px;border:1px solid #ccc;}
        .ob{width:200px;background:#ccc;padding:10px;}
        .child{width:100px;height:100px;background:red;}
    </style>
</head>
<body>
    <div class="ob" id="od">
        <ul>
            <li class="o1">1</li>
            <li class="o2">2</li>
            <li class="o3">3</li>
            <li class="o4">4</li>
        </ul>
    </div>
    <a href="#od">hah </a>
    <a href="#oh">hah </a>
    <script>

        var ob = document.querySelector(".ob");
        ob.onclick = function(e){
            e = e || window.event;
            var targetDom = e.target || e.srcElement;
            var n = targetDom.className;
            console.log(targetDom);
            switch(n){
                case "o1" :{
                    alert("o1");
                    break;
                }
                case "o2":{
                    alert("o2");
                    break;
                }
                case "o3":{
                    alert("o3");
                    break;
                }
                case "o4":{
                    alert("o4");
                    break;
                }
                default:{
                    alert("other");
                }
            }
        }
    </script>
</body>
</html>

由于所有列
表项都是这个元素的子节点，而且它们的事件会冒泡，所以单击事件最终会被这个函数处理。我们知道，事件目标是被单击的列表项，故而可以通过检测class属性来决定采取适当的操作。与前面未使用事件委托的代码比一比，会发现这段代码的事前消耗更低，因为只取得了一个DOM 元素，只添加了一个事件处理程序。虽然对用户来说最终的结果相同，但这种技术需要占用的内存更少。所有用到按钮的事件（多数鼠标事件和键盘事件）都适合采用事件委托技术。
如果可行的话，也可以考虑为document 对象添加一个事件处理程序，用以处理页面上发生的某种特定类型的事件。这样做与采取传统的做法相比具有如下优点。

document 对象很快就可以访问，而且可以在页面生命周期的任何时点上为它添加事件处理程序（无需等待DOMContentLoaded 或load 事件）。换句话说，只要可单击的元素呈现在页面上，就可以立即具备适当的功能。在页面中设置事件处理程序所需的时间更少。只添加一个事件处理程序所需的DOM 引用更少，所花的时间也更少。整个页面占用的内存空间更少，能够提升整体性能。
最适合采用事件委托技术的事件包括click、mousedown、mouseup、keydown、keyup 和keypress。虽然mouseover 和mouseout 事件也冒泡，但要适当处理它们并不容易，而且经常需要计算元素的位置。（因为当鼠标从一个元素移到其子节点时，或者当鼠标移出该元素时，都会触发mouseout 事件。）