先上结论: 他们是描述事件触发时序问题的术语。事件捕获指的是从document到触发事件的那个节点,即自上而下的去触发事件。相反的,事件冒泡是自下而上的去触发事件。...绑定事件方法的第三个参数,就是控制事件触发顺序是否为事件捕获。true,事件捕获;false,事件冒泡。默认false,即事件冒泡。...,"+this.id) }) 结果: child事件被触发,child parent事件被触发,parent 结论:先child,然后parent。...事件的触发顺序自内向外,这就是事件冒泡。...事件触发顺序变更为自外向内,这就是事件捕获。 方法: 阻止事件冒泡 和默认行为。 事件冒泡: ? 阻止默认行为: ?
javascript 的事件捕获和事件冒泡之前一直没能弄明白,知道看到一个例子。...利用丢一颗石头入水的例子,就能够非常形象了,如图所示: 事件捕获和事件冒泡就像是一颗石头(点击事件)投入水中: 首先是最外层水面(html)接触(捕获)石头,然后石头下沉,内层的水(body/dom...点击可查看示例 去示例中试一试便清楚了~ 处理事件 理解了事件的捕获和冒泡机制,对于事件处理就好办了。...监听事件 /** * @param { event } 事件 * @param { functionEvent } 事件处理函数 * @param { capture } 是否在捕获阶段触发事件...,比如是在‘石头’下沉或者‘气泡’冒泡的过程中使之突然消失 事件代理: 从上面事件机制可以看出,如果没有外部干扰,在子节点上触发的事件,在捕获和冒泡最终都会经过父节点 因此,我们可以将事件处理函数绑定在父节点上面
事件冒泡: 事件冒泡由IE团队提出来的,即事件开始由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播。...IE9,chrome,Firefox,Opera,Safari都支持事件冒泡,并将事件冒泡到window对象。 如下,点击obj3,依次弹出obj3、world、hello。...: 方式一:event.stopPropagation(); 方式二:return false; return false 不仅阻止了事件往上冒泡,而且阻止了事件本身。...event.stopPropagation() 则只阻止事件往上冒泡,不阻止事件本身。...事件捕获: 事件捕获是由Netscape Communicator团队提出来的,是先由最上一级的节点先接收事件,然后向下传播到具体的节点。
silverlight小技巧 捕获silverlight滚轮事件 在页面初始化时添加代码 HtmlPage.Window.AttachEvent("DOMMouseScroll", OnMouseWheel
事件流、事件捕获和事件冒泡的介绍 最近有用到对应的场景,下班了特地来整理下响应的概念,巩固下知识。 我们在点击页面时,事件发生时会在各元素节点按照一定的顺序进行传播,这种传播过程就称作事件流。...事件流分为三个阶段: 1、事件捕获阶段 事件从window发出,不断向子元素寻找对应的目标节点 2、事件目标阶段 事件找到了对应的目标节点,即此时再往下已经没有对应的节点 3、事件冒泡阶段 事件从节点位置网上回溯到文档的根节点..."); }, true); // 对应的打印结果 body 事件捕获 test.html:37 container 事件捕获 test.html...:26 btn 事件捕获 test.html:23 btn 事件冒泡1 test.html:29 btn 事件冒泡2 test.html:34 container 事件冒泡 test.html:15 body...事件冒泡 可以看到,都是先触发捕获再触发冒泡事件,先从body(上)到btn(下),再从btn(下)到body(上)。
本文方法适用于Volantis 5.0.0.alpha.1,不保证其他版本可用 Volantis中使用APlayer作为音乐播放器,如果希望在播放音乐时网页能够做出响应,例如弹窗,就需要对播放事件进行捕获...现在从中挑选出我认为比较重要的事件,写成js代码来分享,你需要自行定义函数并在函数里实现你要的功能。...事件捕捉 在volantis/layout/layout.ejs中定义以下函数,你可以直接写进去或者新建一个js文件来引用 function player_onPlay(){ //音乐播放 } function...当一首歌放完了,那么会快速触发onPause,onSeeked,onEnded,onPlay,onWaiting,onProgress等一系列事件。
事件具有冒泡流和捕获流,两者刚好是反着来。 JavaScript原声监听事件addEventListener,接收两个参数,一个是方法,一个是布尔值,指定事件是否在捕获或冒泡阶段执行。...所以我们可以很直观的打印输出事件的冒泡和捕获两个过程。 ? 输出顺序是body 捕获、test 捕获、test 冒泡、body 冒泡。...输出顺序是body 捕获、test onclick 、test 冒泡、test 捕获、body 冒泡,但是事件还是需要遵循外层事件捕获了,目标函数才能执行。...如果我在body捕获阶段就阻止了事件流,那么目标函数是不会执行的。 ? 只输出body 捕获。...对于事件,在事件捕获或者事件冒泡阶段处理并没有明显的优劣之分,但是由于事件冒泡被所有主流的浏览器兼容,从兼容性角度来说还是建议大家使用事件冒泡模型。这就是事件的捕获、冒泡、委托。
事件机制 ---- 事件触发三个阶段: window往事件触发处传播,遇到注册的捕获事件会触发 传播到事件触发处时触发注册的事件 从事件触发处往window传播,遇到注册的冒泡事件会触发 事件触发一般会按照...event model |------------------------------------------- 但是有一个特例:如果给body中的子节点同时注册冒泡和捕获事件...'}, true) 当点击innner元素时,如下元素发生了: 点击事件开始于捕获阶段,在此阶段浏览器会在所有祖先元素上查找点击事件处理函数(从document开始) 结果找到了2个,分别在document...和outer上面,而且这两个事件处理函数的useCapture选项为true,说明他们被注册在捕获阶段的。...于是,document和outer的点击处理函数被执行 继续向下寻找,直到到达inner元素本身,捕获阶段就此结束。
,事件经过的所有节点都会受到事件的影响,这个传播过程被称为DOM事件流 true是捕获,false是冒泡,默认为冒泡事件 1.addEventListener()--添加事件监听函数 给元素添加一个事件...3.利用事件的捕获和冒泡做点事情 addEventListener()和removeEventListener()其实拥有三个参数,刚才说过了,第一个表示触发条件,第二个表示触发事件,第三个参数正常情况下可以省略...,但是要知道它代表的意思 用布尔值来表示,true或者false,默认是false true表示在捕获阶段调用事件处理程序 false表示在冒泡阶段调用事件处理程序 根据图片可以看出,捕获阶段要先于冒泡阶段...2.缺点:一个元素只能绑定一个事件处理函数,只会在事件冒泡中运行 DOM2级事件处理程序 该级别的事件处理程序,运用的就是事件捕获和冒泡机制 测试...function() { alert("DOM2级事件处理程序,我在捕获阶段执行"); }, true); btn.addEventListener("click",
说到js事件大家肯定都知道,那么今天讲一点大家不知道的(假设大家不知道?)。 所有的js事件都会分为两个阶段捕获和冒泡。...那么问题来了,我们通常看到的事件都是直接触发之后就执行了,那么我们怎么才能看到事件的捕获和冒泡都是怎么进行的呢,这里给大家准备了一个例子 addEventListener() 例子之前首先给大家简单介绍一下...true表示监听事件的捕获阶段,false表示监听事件的冒泡阶段。 返回值 没有返回值 示例: <!...其次是inner捕获阶段 然后是inner冒泡阶段 最后是outer冒泡阶段 由此我们可以看到,事件触发的时候实际上都是有捕获和冒泡阶段的,并且捕获阶段会从最外层的父级元素开始捕获,一直捕获到最后触发事件的那个元素点才会停止...并且事件的触发是先捕获,在冒泡。 阻止事件冒泡 事件的冒泡会让我们实现某些功能的时候产生阻碍,那么我们怎么怎么阻止事件的冒泡呢,这个时候就会用到一个方法。
事件与事件流 事件,是文档或浏览器窗口发生的一些特定的交互事件。事件流,描述的是页面中接收事件的顺序。 默认情况下,事件使用冒泡事件流,不使用捕获事件流。...捕获与冒泡 事件捕获:执行顺序(document->html->body->div) 事件冒泡:执行顺序(div->body->html->document) IE < 9:只支持事件冒泡...IE 9+|chrome|firefox|safari:事件冒泡+事件捕获 阻止捕获与冒泡 event.stopPropagation() 示例代码 <!...'); // 阻止事件捕获,内层不会再捕获到事件 // event.stopPropagation(); }, true); middle.addEventListener...('click', function (event) { console.log('middle-->事件冒泡'); // 阻止事件冒泡,外层不会再捕获到事件
View的Tween动画过程中点击事件的位置并不会因为动画位置的改变而改变,是因为在动画过程中layout的位置实际上没有变,因此曾经一度认为View的点击事件(其实不仅仅是点击事件,包括所有的触摸事件...既然位置并没有改变,那么这时候点击第二个线性布局和按钮点击事件也被响应了,就说明捕获点击事件的位置并不完全是在layout的位置。...因为并没有将手伸到屏幕外面去点击… 回头来看ViewGroup#dispatchTouchEvent方法在分发触摸事件的时候: for (int i = count - 1; i = 0; i--)
讲 事件冒泡 、阻止冒泡 和 事件捕获 之前先说说什么是事件流,这样会更容易明白 一、事件和事件流 1、什么是事件 事件是可以被 JavaScript 侦测到的行为。...一个完整的JS事件流是从window开始,最后回到window的一个过程。 事件流被分为三个阶段(1~ 5)捕获过程、(5~ 6)事件触发过程、(6~ 10)冒泡过程。...讲事件捕获之前先了解下addEventListener()方法: addEventListener()定义与用法 document.addEventListener() 方法用于向文档添加事件句柄。...布尔值,指定事件是否在捕获或冒泡阶段执行。 可能值: true - 事件句柄在捕获阶段执行 false - 默认。...事件句柄在冒泡阶段执行 从上面的表格中,可以看到参数值useCapture,为true的时候,事件在捕获过程中就会执行。
前言在JavaScript中,事件冒泡和事件捕获是两种不同的事件传播方式。当一个事件被触发时,它会从最内层的元素开始,然后逐级向外传播,直到最外层的元素。...这是因为事件从按钮开始向外传播,然后经过内部div和外部div,直到它到达文档的最外层。事件捕获事件捕获是指当一个事件被触发时,它会从最外层的元素开始,然后逐级向内传播,直到最内层的元素。...这是因为事件从文档的最外层开始向内传播,然后经过外部div、内部div和按钮,直到它到达按钮。事件冒泡和事件捕获的区别事件冒泡和事件捕获的主要区别在于它们的传播方向。...相反,事件捕获会先触发文档的事件,然后是它的父元素的事件,以此类推,直到它到达按钮。另一个区别是事件处理程序的执行顺序。...下面是一个例子,演示如何使用事件冒泡和事件捕获:<!
冒泡事件和捕获事件 冒泡事件是,进行 捕获事件是从外向内,从大到小 冒泡事件bindtap one <view...测试 点击 区域,事件会从内到外从小到大Console`控制台显示 捕获事件capture-bind:tap <view id="one" class="one" capture-bind:tap="_...测试 点击 three区域,<em>事件</em>会从外到到,从大到小进行传递,Console`控制台显示 非冒泡<em>事件</em>和<em>捕获</em>阻止<em>事件</em> 非冒泡<em>事件</em>catchtap <view id="one" class="one" bindtap...测试 点击 three区域,事件从内到外传递被阻止,Console控制台显示 捕获阻止事件capture-catch:tap <view id="one" class="one" capture-catch...测试 点击 three区域,事件从外到内传递被阻止,Console控制台显示 互斥事件(mut-bind:tap) one
我们学习javascript的时候,都会接触到事件,我们今天就来说说事件的捕获和冒泡。 事件冒泡阶段:事件开始的时候由事件发生的元素接受,然后逐级向上传播,触摸相对的事件。 代码: <!...事件捕获阶段:这个跟冒泡事件的顺序则是相反的,是从顶部往下一直传播到具体的事件发生元素,我们把上面的代码小小修改一下。...注意:事件捕获在事件冒泡之前发生 ?
js中事件捕获的实现 1、当鼠标点击或触发dom事件,触发dom事件的元素称为事件源。 2、浏览器会从根节点=>事件源(从外到内)传播事件。...3、不太具体的节点应该更早接收到事件,最具体的节点应该最后接收到事件。...s2">s2 s1.addEventListener("click",function(e){ console.log("s1 冒泡事件..."); },false); s2.addEventListener("click",function(e){ console.log("s2 冒泡事件"); },...false); 以上就是js中事件捕获的实现,希望对大家有所帮助。
但是我们可以捕获并控制这些链接的点击事件么,当然是可以的。 本文将一个超级简单的例子介绍一下如何实现在Android TextView 捕获链接的点击事件。...关键实现 实现原理就是将所有的URL设置成ClickSpan,然后在它的onClick事件中加入你想要的控制逻辑就可以了。
事件源有一些向其注册事件监听器的方法。当某个事件源产生事件的时候,事件源会向为事件注册的所有事件监听器对象发送一个通告。 像Java这样的面向对象语言,都将事件的相关信息封装在一个事件对象中。...• 当事件发生时,事件源将事件对象传递给所有注册的监听器。 • 监听器对象将利用事件对象中的信息决定如何对事件做出响应。...图8-1显示了事件源、事件监听器和事件对象之间的协作关系。 实例:处理按钮点击事件 为了加深对事件委托模型的理解,下面以一个响应按钮点击事件的简单例子来说明所需要知道的所有细节。...EventObject类是所有事件类的超类,其中的getSource方法可以给出每个事件的事件源。事件源是产生事件和通告监听器的对象。...实例:捕获窗口事件 并不是所有的事件处理都像按钮点击那样简单。下面这个例子就有点复杂,在第7章中我们曾经简要的介绍过。
javascript事件捕获是什么意思 说明 1、事件捕获是不太具体的DOM节点应该更早接收到事件,而最具体的节点应该最后接收到事。 2、事件捕获的用意在于事件到达预定目标之前捕获它。...在捕获中,外部元素的事件会先被触发,然后才会触发内部元素的事件,即: 元素的点击事件先触发 ,然后再触发元素的点击事件。..."); },false); //新增事件捕获事件代码 parent.addEventListener("click",function(e){ console.log("...click-parent--事件捕获"); },true); child.addEventListener("click",function(e){ console.log("click-child..."); },false); 以上就是javascript事件捕获的意思,希望对大家有所帮助。
领取专属 10元无门槛券
手把手带您无忧上云