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()的点击事件需要在另外一个点击事件的上面才能够被阻断。

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

相关推荐
神之王楠3 分钟前
如何通过js加载css和html
javascript·css·html
余生H7 分钟前
前端的全栈混合之路Meteor篇:关于前后端分离及与各框架的对比
前端·javascript·node.js·全栈
程序员-珍10 分钟前
使用openapi生成前端请求文件报错 ‘Token “Integer“ does not exist.‘
java·前端·spring boot·后端·restful·个人开发
axihaihai14 分钟前
网站开发的发展(后端路由/前后端分离/前端路由)
前端
流烟默26 分钟前
Vue中watch监听属性的一些应用总结
前端·javascript·vue.js·watch
2401_8572979137 分钟前
招联金融2025校招内推
java·前端·算法·金融·求职招聘
茶卡盐佑星_1 小时前
meta标签作用/SEO优化
前端·javascript·html
与衫1 小时前
掌握嵌套子查询:复杂 SQL 中 * 列的准确表列关系
android·javascript·sql
Ink1 小时前
从底层看 path.resolve 实现
前端·node.js
金灰1 小时前
HTML5--裸体回顾
java·开发语言·前端·javascript·html·html5