JavaScript事件的传播,你知道吗?

今天给大家说下JavaScript中的事件传播,三个包裹着的DIV,都绑定了点击事件,问:当点击div1时,会发生什么现象?

图片发自简书App

图片发自简书App

当点击div1时,触发事件1,但是,紧跟着,事件2和事件3也被触发了;

这种现象,我们称为事件冒泡

在JS中当一个事件发生以后,它会在不同的DOM节点之间传播。这种传播分成三个阶段:第一阶段:从window对象传导到目标节点,称为捕获阶段。第二阶段:在目标节点上触发,称为目标阶段。第三阶段:从目标节点传

导回window对象,称为冒泡阶段。

图片发自简书App

事件传播的最上层对象是window;事件的传播顺序,在捕获阶段依次为window、document、html、body、div;在冒泡阶段依次为div、body、html、document、window。

注意:三种事件绑定方式全部默认监听冒泡阶段事件;

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  •   JavaScript 与 HTML 之间的交互是通过事件实现的。   事件,就是文档或浏览器窗口中发生的一些特...
    霜天晓阅读 3,701评论 1 11
  • 以下文章为转载,对理解JavaScript中的事件处理机制很有帮助,浅显易懂,特分享于此。 什么是事件? 事件(E...
    jxyjxy阅读 3,173评论 1 10
  • Dom事件 事件是一种异步编程的实现方式,本质上是程序各个组成部分之间的通信。DOM支持大量的事件 (一) Eve...
    woow_wu7阅读 1,889评论 0 1
  • 事件是一种异步编程的实现方式,本质上是程序各个组成部分之间的通信。DOM支持大量的事件,本节介绍DOM的事件编程。...
    许先生__阅读 1,035评论 0 3
  • js之事件机制 1、事件初探 1.1 js事件的概述 JavaScript事件:JavaScript是基于事件驱动...
    道无虚阅读 2,632评论 0 2

友情链接更多精彩内容