您的位置:

JavaScript 事件冒泡和事件捕获

JavaScript 事件冒泡和事件捕获是两种处理 DOM 事件机制的方式,它们的区别在哪里呢?本文将会从以下几个方面进行详细阐述:

一、事件冒泡和事件捕获的简介

事件冒泡和事件捕获是 DOM 事件机制中触发事件后处理过程中两种不同的捕获方式。

在事件冒泡(bubbling)模式中,事件首先在触发元素上被捕获,然后沿着 DOM 树向上传递,直到到达文档的根节点。在此过程中,会触发所有的父元素的相应事件处理函数。

而在事件捕获(capturing)模式中,事件首先被捕获到文档的根节点,然后从根节点沿着 DOM 树一层层向下传递,直到到达触发元素。在此过程中,会触发所有的父元素的相应事件处理函数。

二、事件冒泡和事件捕获的区别

1、触发顺序不同

在事件冒泡模式中,事件处理的顺序是从触发元素开始,由内向外逐步冒泡,最终到达 document 元素。

而在事件捕获模式中,事件处理的顺序是从 document 元素开始,由外向内逐步捕获,最终到达触发元素。

2、事件处理的方式不同

在事件冒泡模式中,事件的处理方式是先从子节点开始,再向父节点传递。也就是说,先触发节点自己的事件处理函数,再依次触发父元素的事件处理函数。

而在事件捕获模式中,事件的处理方式是先从父节点开始,再向子节点传递。也就是说,先触发 document 的事件处理函数,然后依次触发子节点的事件处理函数。

3、默认事件优先级不同

默认情况下,事件冒泡和事件捕获模式都会触发默认的事件处理函数。但是,在事件冒泡模式中默认的事件处理函数会在所有的父节点处理完之后再触发,而在事件捕获模式中默认的事件处理函数则会在到达目标元素之前被触发。

三、代码示例

1、事件冒泡模式的代码示例

  
    <div id="grandparent">
      <div id="parent">
        <button id="button">点击我</button>
      </div>
    </div>

    <script>
      const grandparent = document.querySelector('#grandparent');
      const parent = document.querySelector('#parent');
      const button = document.querySelector('#button');

      grandparent.addEventListener('click', function() {
        console.log('触发 grandparent 的点击事件处理函数');
      }, false);

      parent.addEventListener('click', function() {
        console.log('触发 parent 的点击事件处理函数');
      }, false);

      button.addEventListener('click', function() {
        console.log('触发 button 的点击事件处理函数');
      }, false);
    </script>
  

在上面的代码中,当我们点击 button 按钮时,输出的结果是:

  
  触发 button 的点击事件处理函数
  触发 parent 的点击事件处理函数
  触发 grandparent 的点击事件处理函数
  

由此可见,事件处理是从子节点开始,依次向上父节点冒泡传递。

2、事件捕获模式的代码示例

  
    <div id="grandparent">
      <div id="parent">
        <button id="button">点击我</button>
      </div>
    </div>

    <script>
      const grandparent = document.querySelector('#grandparent');
      const parent = document.querySelector('#parent');
      const button = document.querySelector('#button');

      grandparent.addEventListener('click', function () {
        console.log('触发 grandparent 的点击事件处理函数');
      }, true);

      parent.addEventListener('click', function () {
        console.log('触发 parent 的点击事件处理函数');
      }, true);

      button.addEventListener('click', function () {
        console.log('触发 button 的点击事件处理函数');
      }, true);
    </script>
  

在上面的代码中,当我们点击 button 按钮时,输出的结果是:

  
  触发 grandparent 的点击事件处理函数
  触发 parent 的点击事件处理函数
  触发 button 的点击事件处理函数
  

由此可见,事件处理是从 document 节点开始,依次向下子节点传递。

四、总结

事件冒泡和事件捕获是 JavaScript 中用于处理 DOM 事件机制的两种不同的方式。区别在于事件的触发顺序、事件的处理方式以及默认事件的触发时机等。在实际开发中,可以根据具体需求选择使用合适的方式。

JavaScript 事件冒泡和事件捕获

2023-05-23
JavaScript阻止事件冒泡详解

2023-05-23
JS阻止事件冒泡

2023-05-18
js事件中change,js事件中监听其他事件

本文目录一览: 1、js中的change事件不起作用 2、js中关于change的问题 3、这段JS代码为什么change事件中先删除上一次事件创建的option删不干净,会剩下一个城市 4、汇总js

2023-12-08
阻止事件捕获的方法详解

2023-05-18
深入探究Vue事件冒泡

2023-05-23
Vue中阻止事件冒泡的方法详解

2023-05-19
Vue阻止事件冒泡详解

2023-05-17
uniapp如何阻止事件冒泡?

2023-05-19
js选中事件,js下拉框选中事件

2023-01-03
js选中事件,js选择框改变事件

2023-01-07
详解JavaScript中的onclick事件

2023-05-23
js的事件处理丶java教程网(js中事件)

本文目录一览: 1、关于js事件捕获的用法 2、JS中事件的调用 3、请简单说明javascript中处理事件的步骤 4、java中js的事件使用---$("p").style("background

2023-12-08
详解JavaScript onclick事件

2023-05-24
JS中阻止事件捕获的方法

2023-05-18
js中的事件委托实例浅析,前端事件委托

本文目录一览: 1、JS-阻止冒泡事件与事件委托 2、细说什么是js中的事件冒泡和事件捕获以及事件委托 3、javascript 中的事件委派的作用是什么 JS-阻止冒泡事件与事件委托 事件冒泡:开始

2023-12-08
如何使用JavaScript阻止点击事件穿透

2023-05-21
jQuery阻止事件冒泡

2023-05-20
深入理解iframe事件

2023-05-19
包含javascript事件综合的词条

2022-11-23