事件流、事件冒泡，事件捕获，事件委托

Kratial

已于 2023-05-31 14:53:35 修改

阅读量967

点赞数

分类专栏： js 文章标签： firefox safari chrome

于 2020-09-17 11:49:13 首次发布

本文链接：https://blog.csdn.net/Kratial/article/details/108637062

版权

js 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

一、事件流

1.概念描述：

事件流包括三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段。首先发生的是事件捕获，为截获取事件流提供机会。其次是实际的目标接收到事件，最后是冒泡阶段，可以在这个阶段为事件作出响应。

2.实例描述：

<!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>
    <div onclick="alert('check')"></div>
</body>
</html>

3.总结说明：

在DOM事件流中，实际目标(div)在捕获阶段不会接收事件，也就是在捕获阶段事件从document->html->body就停止了，下一个阶段是处于目标阶段，于是事件在div上发生，并在事件处理中被看成冒泡阶段的一部分，最后，冒泡阶段发生，事件回传至document.

兼容性问题：多数支持DOM事件流的浏览器都实现了DOM2级事件，捕获阶段不会涉及事件目标。但是ie9,safari,Chrome,Firefox和Opera9.5以及更高版本都会在捕获阶段触发事件对象上的事件。结果就是有两个机会在目标对象上面操作事件。

二、事件冒泡

1.概念描述：

事件冒泡是指事件开始由最具体的元素接受，然后逐级向上传播到较为不具体的节点（document)

2.实例描述：

<!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>
    <div onclick="alert('check')"></div>
</body>
</html>

3.总结描述：

如果点击了div元素，那么这个点击事件会由div->body->html->document传播，该过程即为冒泡。

阻止事件冒泡的方法stopPropagation

兼容性问题：
现代浏览器都支持事件冒泡，但是表现上还具有一定的差别，比如IE5及更早的版本事件冒泡会跳过html,(从body直接跳至document),IE9,Firefox,Chrome和Safari则将事件一直冒泡至window对象.

三、事件捕获

1.概念描述：

事件捕获：
是指从不太具体的节点接收到事件，而最具体的节点应该最后接收到事件。（用意在于事件未到达预定目标之前捕获它）

2.实例描述：

<!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>
    <div onclick="alert('check')"></div>
</body>
</html>

3.总结说明：

点击div元素之后对应的触发顺序为:document->html->body->div

四、事件委托

1.概念描述：

事件委托就是将自己元素的操作委托给父级元素去做。利用的是事件冒泡的原理。

2.实例说明：

<!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>
        <li data-li="test1">111</li>
        <li data-li="test2">222</li>
        <li data-li="test2">333</li>
       
    </ul>
    <script>
       var elem=document.querySelector('ul');
       elem.onclick=function(e){
          debugger;
          var tag=e.target.getAttribute('data-li');
          switch (tag){
                 case 'test1':
                 alert('111');
                 break;
                 case 'test2':
                 alert('222');
                 break;
                  case 'test3':
                  alert('333');
                 break;
                 default:alert('other');
          }
       }
    </script>
</body>
</html>

3.总结说明：

在js中，添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能。
原因如下：（1）每个函数都是对象，会占用内存，内存中的对象越多，性能就越差。
（2）必须事先指定所有事件处理程序而导致的DOM访问次数，会延迟整个页面的交互就绪时间

补充：若可行，可考虑为document添加事件处理程序，用来处理页面上发生的某种特定类型的事件，优点如下：
1.document对象可以很快就访问到，而且可以在页面生命周期的任何时间点为它添加事件处理程序，无需等待其他元素的加载。
2.整个页面占用的内存空间少，能够提升整体性能。

最适合采用事件委托的事件包括:click,mousedown,mouseup,keydown和keypress.

event事件中的:
this:指向所绑定的元素
event.target：指向当前所触发的元素
event.currentTarget：指向当前所绑定的元素

实例如下：

 <div class="outer">
        222
        <div class="inner">111</div>
    </div>
    <script>
      function $(name){
          return document.querySelector(name);
      }
      //点击元素.inner
      document.body.addEventListener("click",function(e){
         
          console.log(e.target)
          //div.inner
         console.log(this)
         //body
         
         console.log(e.currentTarget)
         //body
     
      })
    </script>

本文参考至Javascript高级程序设计

Kratial

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
事件流、事件冒泡，事件捕获，事件委托

一、事件流1.概念描述：事件流包括三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段。首先发生的是事件捕获，为截获取事件提供流机会。其次是实际的目标接收到事件，最后是冒泡阶段，可以在这个阶段为事件作出响应。2.实例描述：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=devic
复制链接

扫一扫

专栏目录