JavaScript事件触发过程底层原理

在Web开发中,JavaScript的事件处理是一个至关重要的主题。理解事件触发的过程以及掌握事件代理是成为优秀前端工程师的关键之一。本文将深入探讨JavaScript中事件的触发过程以及事件代理的概念、优势和使用场景。


首先我们有着这样三个互相嵌套的div,a,b,c,a为红色,b为蓝色,c为黑色。 接着给a,b,c都添加上点击事件

事件触发过程

js 复制代码
 a.addEventListener("click",()=>{
        console.log('a被点击');
    },false)

    b.addEventListener("click",(event)=>{
        console.log('b被点击');
    },false)

    c.addEventListener("click",(event)=>{
        console.log('c被点击');
    },false)

显然此时点击最内层的c三个点击事件都会被触发。但是!!!

这三个事件触发的顺序是怎么样的以及为什么是这样

首先告诉大家

事件触发的过程是c,b,a,那么为什么是这样一个过程呢?

背后的底层原理

在JavaScript中的事件触发过程分为捕获过程和冒泡过程,这两个过程构成了事件传播的整体流程。

  1. 捕获过程:window往事件触发处传播。
  2. 目标触发: 传播到事件目标处,触发注册的事件处理函数。
  3. 冒泡过程: 从事件触发处往window上传播。当遇到注册的冒泡事件时,触发相应的处理函数。这个过程是默认的事件触发方式。 点击c整个事件流的传播过程是这样的:
  4. window->c->b->a捕获过程
  5. a->b->c->window冒泡过程 a,b,c绑定的事件就在冒泡过程依次被触发 需要注意的是,捕获事件和冒泡事件是互斥的,在捕获事件内触发了就不会在冒泡事件内触发。而且在JavaScript中,默认所有事件都只在冒泡过程中触发。如果想要在捕获过程中触发,可以通过修改addEventListener的第三个参数来实现

这个值默认是false,当为false时就会在冒泡过程时触发,如果设置为true就会在捕获过程时触发。

阻止默认行为

在事件处理中,有时候需要阻止事件的默认行为,比如阻止链接的跳转或表单的提交。为此,可以使用以下方法:

  1. event.stopPropagation() 该方法可以阻止事件流的传播,即停止事件在捕获或冒泡阶段的传递。
  2. event.stopImmediatePropagation() 除了阻止事件流传播外,该方法还能阻止同一容器上绑定的其他相同事件的执行。
js 复制代码
   b.addEventListener("click",(event)=>{
        console.log('b被点击');
        event.stopPropagation()
    },true)

如果设置b身上绑定的事件在捕获过程时触发并在触发的事件内部添加event.stopPropagation(),此时点击c就会输出如下

此时在捕获过程由window向c传播,c------>b然后此时b事件触发并且阻断事件流的传播。至此事件流的传播就结束了。

这两个方法之间的区别在于,event.stopImmediatePropagation()还能够阻断自身的事件传播。当我们在c身上添加两个点击事件并给第一个点击事件加入 event.stopPropagation();时,此时我们点击c就会发现

js 复制代码
    c.addEventListener("click",(event)=>{
        console.log('c被点击');
        event.stopPropagation();
    },false)

    c.addEventListener("click",(event)=>{
        console.log('c被点击2');
    },false)

会有着两次输出。如果此时把第一个点击事件中的event.stopPropagation();换成event.stopImmediatePropagation()我们就会发现 只有着一次输出了,这就是因为event.stopImmediatePropagation()还会阻断自身事件流的传播,不过需要注意的是,写有event.stopImmediatePropagation()的点击事件需要在另外一个点击事件的上面才能够被阻断。

这两个方法的灵活运用可以有效地控制事件的传播行为。

相关推荐
new出一个对象2 小时前
uniapp接入BMapGL百度地图
javascript·百度·uni-app
你挚爱的强哥3 小时前
✅✅✅【Vue.js】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本
javascript·vue.js·jquery
y先森4 小时前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy4 小时前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu10830189114 小时前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
IT女孩儿5 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡6 小时前
commitlint校验git提交信息
前端
虾球xz6 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇6 小时前
HTML常用表格与标签
前端·html
疯狂的沙粒6 小时前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript