JS事件机制----捕获和冒泡

在工作学习中,事件绑定机制用到了addEventListener()绑定方法,其具体用法如下:

element.addEventListener('event', function, useCapture),其参数值介绍如下:


参数值

简单理解捕获和冒泡

捕获(capture)和冒泡(bubble)是事件传播过程中的两个概念, 比如用户单击某个元素, 但由于元素处于父元素内, 该父元素又处于document对象中, document对象又处于window对象中, 因此该单击事件实际发生在该元素, 父元素, document, window对象上, 而事件传播过程就是浏览器决定依次触发哪个对象的事件处理函数的过程.

DOM事件模型将事件传播过程分为两个阶段: 捕获阶段和冒泡阶段

在事件捕获阶段, 事件从最顶级的父元素逐层向内传递, 

在冒泡阶段, 事件从事件发生的直接元素 , 逐层向父元素传递

举例说明

点击孙子元素, 给body中的元素都添加点击事件并输出触发事件的对象id:


控制台输出

捕获和冒泡优先级

捕获 > 冒泡

用捕获还是冒泡

对于事件代理来说,在事件捕获或者事件冒泡阶段处理并没有明显的优劣之分,但是由于事件冒泡的事件流模型被所有主流的浏览器兼容,从兼容性角度来说还是建议大家使用事件冒泡模型

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

相关阅读更多精彩内容

  •   JavaScript 与 HTML 之间的交互是通过事件实现的。   事件,就是文档或浏览器窗口中发生的一些特...
    霜天晓阅读 3,695评论 1 11
  • 以下文章为转载,对理解JavaScript中的事件处理机制很有帮助,浅显易懂,特分享于此。 什么是事件? 事件(E...
    jxyjxy阅读 3,170评论 1 10
  • JavaScript 程序采用了异步事件驱动编程模型。在这种程序设计风格下,当文档、浏览器、元素或与之相关的对象发...
    劼哥stone阅读 1,333评论 3 11
  • js之事件机制 1、事件初探 1.1 js事件的概述 JavaScript事件:JavaScript是基于事件驱动...
    道无虚阅读 2,632评论 0 2
  • 事件流 JavaScript与HTML之间的交互是通过事件实现的。事件,就是文档或浏览器窗口中发生的一些特定的交互...
    DHFE阅读 911评论 0 3

友情链接更多精彩内容