什么是事件传播、事件冒泡、事件捕获?

2023-12-22 13:28:08

一、事件传播

1、概述

(1)当事件发生在DOM元素上时,该事件并不完全发生在那个元素

(2)在冒泡阶段中,事件冒泡或向上传播至父级、祖父级、祖父的父级,直到 window 为止

(3)在捕获阶段中,事件从 window 开始,向下触发元素、事件或 event.target

2、事件传播的三个阶段

(1)捕获阶段——事件从 window 开始,然后向下到每个元素,直到到达目标元素

(2)目标阶段——事件已达到目标元素

(3)冒泡阶段——事件从目标元素冒泡,然后上升到每个元素,直到到达 window


二、事件冒泡

1、概述

(1)当事件发生在DOM元素上时,该事件并不完全发生在那个元素上

(2)在冒泡阶段、事件冒泡或者事件发生在它的父级,祖父级,祖父的父级,直到到达 window 为止

2、代码实例

(1)HTML结构

<div class="grandparent">
  <div class="parent">
    <div class="child">1</div>
  </div>
</div>

(2)对应的JS代码

function addEvent(el, event, callback, isCapture = false) {
  if (!el || !event || !callback || typeof callback !== 'function') return;
  if (typeof el === 'string') {
    el = document.querySelector(el);
  };
  el.addEventListener(event, callback, isCapture);
}

addEvent(document, 'DOMContentLoaded', () => {
  const child = document.querySelector('.child');
  const parent = document.querySelector('.parent');
  const grandparent = document.querySelector('.grandparent');

  addEvent(child, 'click', function (e) {
    console.log('child');
  });

  addEvent(parent, 'click', function (e) {
    console.log('parent');
  });

  addEvent(grandparent, 'click', function (e) {
    console.log('grandparent');
  });

  addEvent(document, 'click', function (e) {
    console.log('document');
  });

  addEvent('html', 'click', function (e) {
    console.log('html');
  })

  addEvent(window, 'click', function (e) {
    console.log('window');
  })

});

addEventListener 方法具有第三个可选参数 useCapture,其默认值为 false

事件将在冒泡阶段中发生,如果为 true,则事件将在捕获阶段中发生。如果单击 child 元素,它将分别在控制台上记录 childparentgrandparenthtmldocument?window,这就是事件冒泡


三、事件捕获

1、概述

(1)当事件发生在 DOM 元素上时,该事件并不完全发生在那个元素上

(2)在捕获阶段,事件从?window?开始,一直到触发事件的元素

2、代码实例

(1)HTML 结构

<div class="grandparent">
  <div class="parent">
    <div class="child">1</div>
  </div>
</div>

(2)对应的JS代码

function addEvent(el, event, callback, isCapture = false) {
  if (!el || !event || !callback || typeof callback !== 'function') return;
  if (typeof el === 'string') {
    el = document.querySelector(el);
  };
  el.addEventListener(event, callback, isCapture);
}

addEvent(document, 'DOMContentLoaded', () => {
  const child = document.querySelector('.child');
  const parent = document.querySelector('.parent');
  const grandparent = document.querySelector('.grandparent');

  addEvent(child, 'click', function (e) {
    console.log('child');
  });

  addEvent(parent, 'click', function (e) {
    console.log('parent');
  });

  addEvent(grandparent, 'click', function (e) {
    console.log('grandparent');
  });

  addEvent(document, 'click', function (e) {
    console.log('document');
  });

  addEvent('html', 'click', function (e) {
    console.log('html');
  })

  addEvent(window, 'click', function (e) {
    console.log('window');
  })

});

addEventListener 方法具有第三个可选参数 useCapture,其默认值为 false

事件将在冒泡阶段中发生,如果为 true,则事件将在捕获阶段中发生。如果单击 child 元素,它将分别在控制台上打印 windowdocumenthtmlgrandparent?parent,这就是事件捕获。

文章来源:https://blog.csdn.net/qq_51478745/article/details/135142020
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。