JS事件的三个阶段，事件代理/委托的原理及优缺点

最新推荐文章于 2023-06-12 17:26:20 发布

嗳华裳

最新推荐文章于 2023-06-12 17:26:20 发布

阅读量821

点赞数 1

文章标签： js javascript dom

本文链接：https://blog.csdn.net/weixin_42475867/article/details/105408134

版权

JS事件的三个阶段，事件代理/委托的原理及优缺点

JS事件的三个阶段
事件代理/委托的原理及优缺点
- 事件代理/委托的原理
- 事件代理/委托的优缺点
适合用事件委托的事件

JS事件的三个阶段

捕获阶段

捕获阶段：事件由页面元素接收，逐级向下，到具体的元素。当使用事件捕获时，父级元素先触发，子元素后触发。

当我们在 DOM 树的某个节点发生了一些操作（例如单击、鼠标移动上去），就会有一个事件发射过去。这个事件从 Window 发出，不断经过下级节点直到触发的目标节点。在到达目标节点之前的过程，就是捕获阶段（Capture Phase）。

在这里插入图片描述

目标阶段

目标阶段：

当事件不断的传递直到目标节点的时候，最终在目标节点上触发这个事件，就是目标阶段。具体的元素本身。

冒泡阶段

冒泡阶段：跟捕获相反，具体元素本身，逐级向上，到页面元素（我们平时用的事件绑定就是利用的事件冒泡的原理）。当使用事件冒泡时，子级元素先触发，父元素后触发。

事件冒泡即事件开始时，由最具体的元素接收（也就是事件发生所在的节点），然后逐级传播到较为不具体的节点。

<!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>
</head>
<body>
   <div id='parentID' onclick="parentfunc()">
       <div id='childID' onclick="childfunc()">你好</div>
   </div>

    <script>
        function parentfunc() {
            alert('父级事件触发了！')
        }

        function childfunc(){
            alert('子级事件触发了！')
            stopBubble();
        }
        
    }
    </script>
</body>
</html>

阻止事件传播（冒泡）的方法

W3C:

stopPropagation()方法。

IE:

cancelBubble = true方法。

<!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>
</head>
<body>
   <div id='parentID' onclick="parentfunc()">
       <div id='childID' onclick="childfunc()">你好</div>
   </div>

    <script>
        function parentfunc() {
            alert('父级事件触发了！')
        }

        function childfunc(){
            alert('子级事件触发了！')
            stopBubble();
        }

        function stopBubble(e) {
          //如果提供了事件对象，则这是一个非IE浏览器
          if ( e && e.stopPropagation ){
            //因此它支持W3C的stopPropagation()方法
            e.stopPropagation();
          }else{
            //否则，我们需要使用IE的方式来取消事件冒泡
            window.event.cancelBubble = true;
          }
          
        }
    </script>
</body>
</html>

阻止浏览器的默认行为

W3C:

preventDefault（）方法。

IE:

return false。

总结

W3C ：任何事件发生时，先从顶层开始进行事件捕获，直到事件触发到达事件源，再从事件源向上进行事件捕获（事件冒泡）。

：

标准浏览器：

事件捕获：addEventListener(“click”,function,“true”)

事件冒泡：addEventListener(“click”,function,“false”)

IE浏览器：

仅支持事件冒泡，不支持事件捕获

事件冒泡：ele.attachEvent(“onclick”,doSomething)

事件代理/委托的原理及优缺点

事件代理/委托的原理

事件代理：又称之为事件委托。把原本需要绑定在子元素的响应事件（click、keydown…）委托给父元素，让父元素担当事件监听的职务，利用事件的冒泡原理来实现的。将事件绑定在父标签上，然后点击子标签通过事件冒泡到父标签上处理。

比如页面上有这么一个节点树，div>ul>li>a;比如给最里面的a加一个click点击事件，那么这个事件就会一层一层的往外执行，执行顺序a>li>ul>div，有这样一个机制，那么我们给最外面的div加点击事件，那么里面的ul，li，a做点击事件的时候，都会冒泡到最外层的div上，所以都会触发，这就是事件委托，委托它们父级代为执行事件。

事件代理/委托的优缺点

事件代理/委托的优点

可以大量节省内存占用，减少事件注册，比如在ul上代理所有li的click事件

可以实现当新增子对象时无需再次对其绑定（动态绑定事件）

管理的函数变少了。不需要为每个元素都添加监听函数。对于同一个父节点下面类似的子元素，可以通过委托给父元素的监听函数来处理事件。

可以方便地动态添加和修改元素，不需要因为元素的改动而修改事件绑定。

JavaScript和DOM节点之间的关联变少了，这样也就减少了因循环引用而带来的内存泄漏发生的概率。

适合用事件委托的事件

click，mousedown，mouseup，keydown，keyup，keypress

所有用到按钮的事件，多数的鼠标事件和键盘事件。

mouseover和mouseout虽然也有事件冒泡，但是处理它们的时候需要特别的注意，因为需要经常计算它们的位置，处理起来不太容易。

mousemove、focus，blur

mousemove每次都要计算它的位置，非常不好把控

focus，blur本身就没有冒泡的特性，自然就不能用事件委托了。

嗳华裳

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
JS事件的三个阶段，事件代理/委托的原理及优缺点

JS事件的三个阶段，事件代理/委托的原理及优缺点JS事件的三个阶段捕获阶段目标阶段冒泡阶段阻止事件传播（冒泡）的方法阻止浏览器的默认行为总结事件代理/委托的原理及优缺点事件代理/委托的原理事件代理/委托的优缺点适合用事件委托的事件JS事件的三个阶段捕获阶段捕获阶段：事件由页面元素接收，逐级向下，到具体的元素。当使用事件捕获时，父级元素先触发，子元素后触发。当我们在 DOM 树的某个节点发...
复制链接

扫一扫