首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

DOM事件传播机制

引言--DOM事件传播机制是指当一个事件在DOM树中触发时,它是如何在各个元素之间传播的。DOM事件传播机制分为三个阶段:捕获阶段、目标阶段和冒泡阶段。...此外,还有一种常用的技术称为事件委托,它能够简化事件处理程序的绑定和管理。本文将详细介绍这些概念,并提供相应的代码示例。事件事件流在介绍事件传播机制之前,我们先来了解一下什么是事件事件流。...在DOM中,事件是指用户与页面交互时发生的动作,比如点击、鼠标移动等。而事件流则是指这些事件在DOM树中传播的路径。...标准 DOM 事件流DOM事件流是指在DOM树中,事件从最外层的节点开始传播,逐级向下,直到达到目标节点,然后再从目标节点向上传播到最外层的节点。...这样一来,无论我们添加或删除列表项,只需要在父级元素上绑定一个事件处理程序即可。总结--通过以上介绍,我们了解了DOM事件传播机制的三个阶段:捕获阶段、目标阶段和冒泡阶段。

13230
您找到你想要的搜索结果了吗?
是的
没有找到

今天聊聊DOM事件传播机制

事件冒泡流 IE 的事件流叫做事件冒泡(event bubbling),即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到较为不具体的节点(文档)。... DOM 树向上传播,在每一级节点上都会发生,按照如下顺序进行传播: div body html document 所有现代浏览器都支持事件冒泡,但在具体实现在还是有一些差别。...,document 对象首先接收到 click 事件,然后事件沿 DOM 树依次向下,一直传播事件的实际目标,即 div 元素: document html body div IE9、Firefox、...处于目标阶段:事件在 div 上发生并处理,但是本次事件处理会被看成是冒泡阶段的一部分。 冒泡阶段:事件传播回文档。 事件委托 上面介绍了事件冒泡流,事件冒泡一个最大的好处就是可以实现事件委托。...事件冒泡(event bubbling),是指事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到较为不具体的节点(文档)。

95020

js事件机制

什么是事件流 在JavaScript中事件流是指一个事件沿特定数据结构传播的一个过程。整个事件流总共包含三个阶段(从dome2来说):1.事件捕获阶段、2.处于事件目标阶段、3.事件冒泡阶段。...从这个图里面我们可以清晰的看到整个事件流的执行过程,首先是从window开始,一步步的从上向下执行,此过程就是事件捕获阶段,当到达了事件的位置以后则处于事件目标阶段,之后会在向上冒泡,进入事件的冒泡阶段...触碰完成以后再把手拿出来,正好是一个相反的过程,这就与我们的事件机制是一个道理。 事件绑定 下面来看一下下面这个示例代码: <!...(在添加注册事件时,第三个参数为true则代表接受捕获事件。)...2 currentTarget 返回其事件监听器触发该事件的元素。 2 eventPhase 返回事件传播的当前阶段。

1.5K20

深入理解JavaScript中的事件传播机制事件冒泡和事件捕获

前言在JavaScript中,事件冒泡和事件捕获是两种不同的事件传播方式。当一个事件被触发时,它会从最内层的元素开始,然后逐级向外传播,直到最外层的元素。...这是因为事件从文档的最外层开始向内传播,然后经过外部div、内部div和按钮,直到它到达按钮。事件冒泡和事件捕获的区别事件冒泡和事件捕获的主要区别在于它们的传播方向。...该方法接受三个参数:事件类型、事件处理程序和一个可选的布尔值,用于指定事件传播方式。如果该值为true,则事件使用事件捕获传播方式;如果该值为false或未指定,则事件使用事件冒泡传播方式。...这是因为事件从文档的最外层开始向内传播,然后经过外部div、内部div和按钮,直到它到达按钮。结论在JavaScript中,事件冒泡和事件捕获是两种不同的事件传播方式。...事件冒泡从最内层的元素开始向外传播,而事件捕获从最外层的元素开始向内传播。你可以使用addEventListener()方法来注册事件处理程序,并指定事件传播方式。

47721

JS事件循环机制(Event Loops)

** 事件循环,即 Event Loops。用于协调事件、用户交互、JavaScript 脚本、DOM 渲染、网络请求等等的执行顺序问题。...一个遵循 ECMAScript 标准的代理(浏览器或 JS 引擎)也必须遵循事件循环机制事件循环是由一个或以上的 **任务队列** 组成的。 3. **什么是任务队列?...由于 JavaScript 是 **单线程** 语言,所以在 JS 中所有的任务都需要排队执行,这些任务共同组成了 **任务队列** ,依次排队执行的过程,形成一个 **执行栈(Execution Context...to=https%3A%2F%2Fdeveloper.mozilla.org%2Fzh-CN%2Fdocs%2FWeb%2FAPI%2FWindow%2FsetImmediate)(Node.js 环境...测试题 看到这里,JavaScript 的事件循环机制差不多就解释完了,涉及到了同步任务、异步任务、宏任务和微任务以及它们之间的关系。

1.4K10

事件冒泡和传播

举栗子 事件输出hello world 事件有两种,一种为事件传播,一种是事件冒泡 事件传播事件冒泡 这还要从遥远的荒诞说起,两家网景和ie,为了能争夺市场,互相使用相反的技术,当网景使用事件传播的时候...(两个正好相反)这个时候w3c来了,为了能规范规定,直接取折中,当事件发生时,先发生向下传播,当到底了以后再次使用事件冒泡,逐渐的冒泡到顶层window DOM为一个完整的树 使用事件传播输出hello...否则为事件传播 冒泡为上,事件传播为下,事件传播优于事件冒泡 [15.gif] 可以明确的知道,此时为false为冒泡,即全部向上传播,这个比较简单不在阐述 阻止进一步冒泡 // 获取元素 var div1...你点击的是文字"); }, false); js如上,在div2内部使用event.stopPropagation()阻止进一步冒泡 结果如下 [16.gif] 可以看到明显的被阻挡 传播 传播方向更冒泡相反...你点击的是文字"); }, true); [17.gif] 传播优先于冒泡 js如下 // 获取元素 var div1 = document.getElementById("div1"); var div2

84960

Spring事务传播机制

事务传播是Spring进行事务管理的重要概念,其重要性怎么强调都不为过。但是事务传播行为也是被误解最多的地方,在本文里,我们将详细分析不同事务传播行为的表现形式,掌握它们之间的区别。...事务传播行为种类 Spring在TransactionDefinition接口中规定了7种类型的事务传播行为,它们规定了事务方法和事务方法发生嵌套调用时事务如何进行传播: 表1事务传播行为类型 事务传播行为类型...当使用PROPAGATION_NESTED时,底层的数据源必须基于JDBC 3.0,并且实现者需要支持保存点事务机制。...几种容易引起误解的组合事务传播行为 当服务接口方法分别使用表1中不同的事务传播行为,且这些接口方法又发生相互调用的情况下,大部分组合都是一目了然,容易理解的。...这种误解在很多Spring开发者中 广泛存在,本文深入讲解了Spring事务传播行为对业务方法嵌套调用的真实影响,希望能帮助读者化解对事务传播行为的困惑。

35120

js事件循环机制和优先级

浏览器的渲染进程是多线程,包括 GUI渲染线程 js引擎线程 事件触发线程 定时器触发线程 异步http请求线程 主执行栈和任务队列 所有的任务可以分为同步任务和异步任务,同步任务,顾名思义,就是立即执行的任务...,同步任务一般会直接进入到主线程中执行;而异步任务,就是异步执行的任务,比如ajax网络请求,setTimeout 定时函数等都属于异步任务,异步任务会通过任务队列( Event Queue )的机制来进行协调...宏任务 (macro)task(又称之为宏任务),可以理解是每次执行栈执行的代码就是一个宏任务(包括每次从事件队列中获取一个事件回调并放到执行栈中执行)。...microtask主要包含:Promise.then、MutaionObserver、process.nextTick(Node.js 环境) 它们的执行顺序如下: 在事件循环中,每进行一次循环操作称为...,立即执行当前微任务队列中的所有微任务(依次执行) 当前宏任务执行完毕,开始检查渲染,然后GUI线程接管渲染 渲染完毕后,JS线程继续接管,开始下一个宏任务(从事件队列中获取) 宏任务与微任务的优先级(

1.3K20

Spring事务传播机制

Spring事务传播机制 Spring事务传播类型 本文主要是讲述Spring事务传播机制,也就是大家开发过程中多多少少会遇到的父方法调用子方法,或者A方法调用B方法时事务的传播机制问题,但是在开始讲Spring...事务传播机制之前需要先讲一下Spring事务的几种传播类型,如图 REQUIRED REQUIRED表示如果当前没有事务,就创建一个事务,如果已经存在一个事务,就加入该事务,是Spring默认的事务传播类型...父方法开启事务,子方法开启事务 父方法开启Spring默认事务传播类型,子方法开启Spring默认事务传播类型 设置insertRoleMenu 内部发生异常,同时insertRole 开启Spring...父方法开启REQUIRED事务,子方法开启REQUIRES_NEW事务 父方法开启Spring默认事务传播类型,子方法开启Spring REQUIRES_NEW事务传播类型 设置insertRoleMenu...父方法开启REQUIRED事务,子方法开启REQUIRES_NEW事务 父方法开启Spring默认事务传播类型,子方法开启Spring REQUIRES_NEW事务传播类型,异常产生发生在父方法最后一行

6110

js addEventListener事件捕获与冒泡,第三个参数详解,阻止事件传播

结论 element.addEventListener(event, function[, useCapture]) event:事件名称,如click function:指定要事件触发时执行的函数,可以传入事件参数...默认false:在冒泡阶段执行指定事件 true:在捕获阶段执行事件 event.stopPropagation():阻止事件传播,用于function(event){}中 图解捕获与冒泡 实例:aa...当点击cc时,按cc>bb>aa依次捕获,再按aa>bb>cc依次冒泡;因为第三个参数(useCapture)默认为false,所以在冒泡阶段执行各自click函数,结果如下: cc bb aa 当js...当js修改为 function print(e){ e.stopPropagation();//执行完此函数后,该事件不再继续传播 console.log(this.id);...cc.addEventListener('click',print,true); 再点击cc时,捕获cc,执行cc的click函数, 因为print函数中有e.stopPropagation(),所以执行完该函数后,click事件不再传播

2.6K10

《现代Javascript高级教程》深入理解事件处理和传播机制

现代JavaScript高级小册 深入浅出Dart 现代TypeScript高级小册 JavaScript事件流:深入理解事件处理和传播机制 引言 JavaScript中的事件流是一种机制,用于描述和处理事件在...DOM树中的传播过程。...事件流的属性 事件流涉及到三个主要的概念:事件捕获阶段、目标阶段和事件冒泡阶段。了解这些阶段和相关的属性对于理解事件流的机制至关重要。...2.1 事件捕获阶段 事件捕获阶段是事件流的第一个阶段,从根节点开始向下传播到目标元素。在事件捕获阶段中,事件依次经过每个父元素,直到达到目标元素。...事件流的应用场景 事件流在前端开发中具有广泛的应用场景,下面介绍几个常见的应用场景: 3.1 事件处理 事件流提供了一种机制,用于处理和响应用户的交互操作。

18240

事件机制

浏览器事件机制 DOM事件模型分为捕获和冒泡。一个事件发生后,会在子元素和父元素之间传播(propagation)。...事件传播分为三个阶段: 捕获(Capture):事件对象从window对象传递到目标对象的过程。 目标(target):目标节点在处理事件的过程。...冒泡(Bubble):事件对象从目标对象传递到window对象的过程。 在任一阶段调用stopPropagation都将终止本次事件传播。 ?...调用stopPropagation严格来说不是阻止冒泡,是阻止事件传播,所以在捕获阶段也可以阻止。...事件代理的处理方式有以下优点: 节省内存 不需要给子节点注销事件 React中的事件机制 React中的事件机制与原生的完全不同,时间没有绑定在原生DOM上,发出的事件也是对原生事件的包装。

76611

前端学习(51)~事件传播事件冒泡

DOM事件事件传播的三个阶段是:事件捕获、事件冒泡和目标。 事件捕获阶段:事件从祖先元素往子元素查找(DOM树结构),直到捕获到事件目标 target。...事件冒泡阶段:事件事件目标 target 开始,从子元素往冒泡祖先元素冒泡,直到页面的最上一级标签。...(2)JS中涉及到DOM对象时,有两个对象最常用:window、doucument。它们俩是最先获取到事件的。...补充一个知识点: 在 js中: 如果想获取 html节点,方法是document.documentElement。 如果想获取 body 节点,方法是:document.body。...这一过程被称为事件冒泡;这个事件从原始元素开始一直冒泡到DOM树的最上层。 通俗来讲,冒泡指的是:子元素的事件被触发时,父元素的同样的事件也会被触发。取消冒泡就是取消这种机制

90820
领券