事件的阶段分为捕获，（目标），冒泡
用一张 图来 表示
用一句话来描述：浏览器通常搜寻顺序是从最外层往里层捕获，然后到达目标，再从最里层往最外层冒泡。
因此，一个事件什么时候执行，就看这个事件是绑定在哪个阶段了，用这么一个api来搞定addEventListenser()
时间： 2024-10-17 10:09:47
事件的阶段---捕获，冒泡
事件的阶段---捕获，冒泡的相关文章
JS之捕获冒泡和事件委托
一.事件流(捕获,冒泡) 事件流:指从页面中接收事件的顺序,有冒泡流和捕获流. 当页面中发生某种事件(比如鼠标点击,鼠标滑过等)时,毫无疑问子元素和父元素都会接收到该事件,可具体顺序是怎样的呢?冒泡和捕获则描述了两种不同的顺序. DOM2级事件规定事件流包括三个阶段,如图: 假如我们点击一个div, 实际上是先点击document,然后点击事件传递到div,而且并不会在这个div就停下,div有子元素就还会向下传递,最后又会冒泡传递回document,如上图 为了兼容更多的浏览器,非特殊情况一般
事件对象、事件流、关于冒泡、默认行为
事件对象: 在触发事件的时候,会产生一个事件对象event,这个对象中包含了与事件相关的信息. 例如:在触发鼠标双击时,是触发了这几件事 onkeydown+onkeyup+onclick+onkeydown+onkeyup+onclick 事件流: 当HTML元素产生一个事件时,这个事件会在元素节点与根节点之后的路径传播,路径所经过的节点都会接收到这个事件,这个传播过程称为DOM事件流. DOM事件流分为冒泡事件流和捕获事件流. 事件冒泡: 当一个元素的事件被触发时,同样的事件将会在该元素的
捕获冒泡
在W3C事件模型中,任何事件会首先被捕获直至到达目标元素然后再冒泡回去.事件流包括3个阶段:事件捕获阶段.处于目标阶段和事件冒泡阶段.Web开发者可以选择将事件处理程序注册在捕获或者冒泡阶段.这可以通过addEventListener()方法来实现.如果该方法传入的最后一个参数值为true,表示事件处理程序被注册在捕获阶段,如果为false表示件处理程序被注册在冒泡阶段. 假设有如下程序(childEle是parentEle的子元素): 1.parentEle.addEventListener(
事件委托与阻止冒泡
简单说下事件委托与阻止冒泡 html: <ul class="clearfix" data-type="cityPick"> <li class="active_sort_opts" data-id="0">全部</li> <li data-id="88">纽约</li> <li data-id="119">洛杉矶&
JavaScript的事件及异常捕获
事件处理 [onClick]单击事件.[onMouseOver]鼠标经过事件.[onMouseOut]鼠标移出事件.[onChange]文本内容改变事件.[onSelect]文本被框选事件.[onFoucus]得到光标事件.[onBlur]光标失去事件.[onLoad]网页加载事件(在body标签中添加).[onUnload]网页关闭事件(在body标签中添加或者使用window.onload=function(){}) 事件注册及监听 1. DOM0级事件处理 在标签中添加onClick或其他
整理之DOM事件阶段、冒泡与捕获、事件委托、ie事件和dom模型事件、鼠标事件
整理之DOM事件阶段 本文主要解决的问题: 事件流 DOM事件流的三个阶段 先理解流的概念 在现今的JavaScript中随处可见.比如说React中的单向数据流,Node中的流,又或是今天本文所讲的DOM事件流.都是流的一种生动体现.用术语说流是对输入输出设备的抽象.以程序的角度说,流是具有方向的数据. 事件流分事件冒泡与事件捕获 在浏览器发展的过程中,开发团队遇到了一个问题.那就是页面中的哪一部分拥有特定的事件? 可以想象画在一张纸上的一组同心圆,如果你把手指放在圆心上,那么你的手指指向的其
如何识别事件是在捕获，目标对象，还有冒泡阶段进行的？
eventPhase 可以来识别 eventPhase等于1,捕获阶段 eventPhase等于2,事件处理程序处于目标对象上 eventPhase等于3,冒泡阶段调用的事件处理程序 注意:尽管"处于目标"发生在冒泡阶段,但是依然等于2
javascript——事件捕获冒泡
事件冒泡:obj.addEventListener(eventType ,fn ,false); false => 冒泡(出来) 事件捕获:obj.addEventListener(eventType ,fn ,true); true => 捕获(进去) HTML部分: <div id="div1"> div1 <div id="div2"> div2 <div id="div3">div3<
JavaScript事件：事件处理模型(冒泡、捕获)
(一)事件处理模型---事件冒泡.捕获 (1)事件冒泡 24 <body> 25 <div class="warpper"> 26 <div class="content"> 27 <div class="box"> 28 29 </div> 30 </div> 31 </div> 32 <script type="text/javascript&