首页 > 其他分享 >简述事件冒泡

简述事件冒泡

时间:2024-05-23 19:29:50浏览次数:19  
标签:浏览器 捕获 --- 简述 冒泡 event 事件

  DOM事件流(event  flow )存在三个阶段:事件捕获阶段、处于目标阶段、事件冒泡阶段。

  事件捕获(event  capturing):通俗的理解就是,当鼠标点击或者触发dom事件时,浏览器会从根节点开始由外到内进行事件传播,即点击了子元素,如果父元素通过事件捕获方式注册了对应的事件的话,会先触发父元素绑定的事件。

  事件冒泡(dubbed  bubbling):与事件捕获恰恰相反,事件冒泡顺序是由内到外进行事件传播,直到根节点。

无论是事件捕获还是事件冒泡,它们都有一个共同的行为,就是事件传播,它就像一跟引线,只有通过引线才能将绑在引线上的鞭炮(事件监听器)引爆,试想一下,如果引线不导火了,那鞭炮就只有一响了!!! 

  dom标准事件流的触发的先后顺序为:先捕获再冒泡,即当触发dom事件时,会先进行事件捕获,捕获到事件源之后通过事件传播进行事件冒泡。不同的浏览器对此有着不同的实现,IE10及以下不支持捕获型事件,所以就少了一个事件捕获阶段,IE11、Chrome 、Firefox、Safari等浏览器则同时存在。

  说到事件冒泡与捕获就不得不提一下两个用于事件绑定的方法addEventListener、attachEvent。当然还有其它的事件绑定的方式这里不做介绍。 

  addEventListener(event, listener, useCapture)  

  参数定义:event---(事件名称,如click,不带on),listener---事件监听函数,useCapture---是否采用事件捕获进行事件捕捉,默认为false,即采用事件冒泡方式

  addEventListener在 IE11、Chrome 、Firefox、Safari等浏览器都得到支持。

  attachEvent(event,listener)  

  参数定义:event---(事件名称,如onclick,带on),listener---事件监听函数。attachEvent主要用于IE浏览器,并且仅在IE10及以下才支持,IE11已经废了这个方法了(微软还是挺识趣的,慢慢向标准靠拢)。

标签:浏览器,捕获,---,简述,冒泡,event,事件
From: https://www.cnblogs.com/Stars-125/p/18209200

相关文章

  • js 创建和触发事件 和 自定义事件
    1、创建自定义事件Eventconstevent=newEvent("build");//监听该事件。elem.addEventListener("build",(e)=>{/*…*/},false,);//分派该事件。elem.dispatchEvent(event);2、创建自定义事件&添加自定义数据——customevent事件挂在到win......
  • FormCreate中在事件中获取api
    form-create中在事件中获取apiFormCreate是一个可以通过JSON生成具有动态渲染、数据收集、验证和提交功能的表单生成组件。支持5个UI框架,并且支持生成任何Vue组件。内置20种常用表单组件和自定义组件,再复杂的表单都可以轻松搞定FormCreate官网:https://www.form-create.com......
  • 鸿蒙HarmonyOS实战-Stage模型(开发卡片事件)
    ......
  • 信息安全事件应急包好DVWA(finish)
    ​*DVWA**信息安全事件应急处理报告**皮包**公司**20**24**年**5**月**20**日*****目录一、 概述 1.1应急处理服务背景 1.2应急处理服务目的 1.3应急处理服务范围 1.4应急处理服务依据 1.4.1应急处理服务委托协议 1.4.2基础标准与法律文件 1.4.3参考文件 ......
  • 信息安全事件应急处理报告模板
    目录一、概述1.1应急处理服务背景1.2应急处理服务目的1.3应急处理服务范围1.4应急处理服务依据1.4.1应用处理服务委托协议1.4.2基础标准与法律文件1.4.3参考文件二、应急处理服务流程三、应急处理服务内容和方法3.1准备阶段3.1.1准备阶段工作流程3.1.2准备阶段处理过程3......
  • 【HZERO】事件以及消息队列
    事件以及消息队列服务事件:https://open.hand-china.com/document-center/doc/component/157/18147?doc_id=408820&_back=%2Fdocument-center%2Fsearch%3Fs%3D%25E4%25BA%258B%25E4%25BB%25B6%25E6%259C%258D%25E5%258A%25A1&doc_code=197230事件服务:https://open.hand-china.c......
  • Pyqt6&PySide6 事件与事件的处理函数
    什么是事件?事件是程序收到外界的输入,处于某种状态时自动发送的信号。事件有固定的类型,每种类型有自己的处理函数,用户只要重写这些函数,即可达到特定的目的。通过事件可以用一个控件监测另外一个控件,并可过滤被监测控件发出的事件。事件的类型与处理函数事件的概念与实列外界对P......
  • 解释下什么是事件代理?应用场景?
    一、是什么事件代理,俗地来讲,就是把一个元素响应事件(click、keydown......)的函数委托到另一个元素前面讲到,事件流的都会经过三个阶段:捕获阶段->目标阶段->冒泡阶段,而事件委托就是在冒泡阶段完成事件委托,会把一个或者一组元素的事件委托到它的父层或者更外层元素上,真正绑定......
  • 说说JavaScript中的事件模型
    一、事件与事件流javascript中的事件,可以理解就是在HTML文档或者浏览器中发生的一种交互操作,使得网页具备互动性,常见的有加载事件、鼠标事件、自定义事件等由于DOM是一个树结构,如果在父子节点绑定事件时候,当触发子节点的时候,就存在一个顺序问题,这就涉及到了事件流的概念事件......
  • Node中的事件循环
    前段时间较为系统性的学习了node,在学习过程中发现其中的事件循环机制与浏览器中的有很大的不同,今天特意查找相关资料,整理node的事件循环机制。1.异步API       以上三个异步操作分别对应Timer、Poll、Check队列;2.事件循环顺序自上而下依次执行,会......