2022-12-20 事件流,事件委托,事件冒泡,事件捕获,阻止冒泡,一个DOM同时绑定事件冒泡和事件捕获,DOM0级事件,DOM2级事件,使用事件委托解决新增节点没有绑定上事件的问题

前端OnTheRun

已于 2024-01-12 16:49:36 修改

阅读量203

点赞数

分类专栏：知识点文章标签： javascript 前端 html

于 2022-12-20 18:55:44 首次发布

本文链接：https://blog.youkuaiyun.com/rowlet/article/details/128388763

版权

本文详细介绍了JavaScript中的事件流，包括事件捕获、冒泡阶段和目标阶段。讲解了事件冒泡的定义和示例，以及事件捕获的概念，并通过addEventListener的第三个参数设置事件捕获或冒泡。此外，还探讨了阻止事件冒泡和捕获的方法。重点介绍了事件委托的概念、原理和应用，以及如何利用事件委托解决动态添加节点的事件绑定问题。最后，讨论了DOM0级和DOM2级事件的区别，并给出了一道关于同时绑定捕获和冒泡事件的面试题。

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

文章目录

1.事件流

JS事件:用于HTML和JavaScript之间的交互
事件流:事件传播的过程
DOM中完整的事件流包括三个阶段:事件捕获阶段,目标阶段,事件冒泡阶段(注意中间的目标阶段不要记成事件委托阶段)
事件通过捕获到达目标元素,这个时候就是目标阶段,从目标节点元素将事件上传到根节点的构成阶段即冒泡阶段

2.事件冒泡

2.1.事件冒泡的定义

从事件源朝父级一直到根元素（HTML）。当某个元素的某类型事件被触发时，那么它的父元素同类型的事件也会被触发，一直触发到根源上；
从具体的元素到不确定的元素。

2.2.事件冒泡的示例

var ul = document.querySelector("ul");
var li = document.querySelector("li");
ul.onclick = function() {
   
    console.log(this.innerHTML);
};
li.onclick = function() {
   
    console.log(this.innerHTML);
};
// 父子元素绑定同一个事件时,触发子元素绑定的事件时,父元素绑定的事件也会触发
//当点击子元素时，先触发父元素的点击事件，再触发子元素的点击事件，打印相应的内容；

3.事件捕获

3.1,事件捕获的定义

从根元素（HTML）到事件源，当某个元素的某类型事件被触发时，先触发根元素的同类型事件，朝子一级触发，一直触发到事件源。
从不确定的元素到具体的元素；

3.2.事件捕获的示例

    var ul = document.querySelector("ul");
    var li = document.querySelector("li");
    ul.addEventListener("click", () => {
   
        console.log("ulululul");
    }, false);
    li.addEventListener("click", () => {
   
        console.log("lililili");
    }, false);