1.什么是Dom事件模型

DOM事件模型。DOM事件模型分为两种：事件冒泡和事件捕获。事件冒泡最初是微软提出的DOM事件流的模型，顾名思义，就是指浏览器的事件流如同冒泡一样，从最低处到最高处。最低处对应的是DOM中最具体的元素，最高处则是最外层元素，最外层元素一般就是document元素。

事件捕获

1. 事件捕获
   捕获是从上到下，事件先从window对象，然后再到document（对象），然后是html标签（通过document.documentElement获取html标签），然后是body标签（通过document.body获取body标签），然后按照普通的html结构一层一层往下传，最后到达目标元素。我们只需要将addEventListener的第三个参数改为true就可以实现事件捕获。

<!-- HTML代码结构-->
 <div class="grandparent">
        爷爷
        <div class="parent">
            爸爸
            <div class="son">
                儿子
            </div>
        </div>
    </div>
复制代码

    const son = document.querySelector(".son");
    const grandparent = document.querySelector(".grandparent");
    const parent = document.querySelector(".parent");
    son.addEventListener("click", () => {
        console.log("儿子")
    },true)
    parent.addEventListener("click", () => {
        console.log("爸爸")
    },true)
    grandparent.addEventListener("click", () => {
        console.log("爷爷")
    },true)
    //当中addEventListener的第二个参数为true则我们点击儿子的时候,输出顺序就是爷爷->爸爸->儿子 这就是事件捕获
复制代码

页面效果:

控制台显示:

2. 事件冒泡
所谓事件冒泡就是事件像泡泡一样从最开始生成的地方一层一层往上冒。我们只需要将addEventListener的第三个参数改为false就可以实现事件冒泡。

<!-- HTML代码结构-->
 <div class="grandparent">
        爷爷
        <div class="parent">
            爸爸
            <div class="son">
                儿子
            </div>
        </div>
    </div>
复制代码

    const son = document.querySelector(".son");
    const grandparent = document.querySelector(".grandparent");
    const parent = document.querySelector(".parent");
    son.addEventListener("click", () => {
        console.log("儿子")
    },false)
    parent.addEventListener("click", () => {
        console.log("爸爸")
    },false)
    grandparent.addEventListener("click", () => {
        console.log("爷爷")
    },false)
    //当中addEventListener的第二个参数为false则我们点击儿子的时候,输出顺序是儿子->爸爸->爷爷 这就是事件冒泡
复制代码

页面效果:

控制台显示:

最后，咱给小编：

1. 点赞+评论

2. 点头像关注，转发给有需要的朋友。

谢谢！！