先上结论： 他们是描述事件触发时序问题的术语。事件捕获指的是从document到触发事件的那个节点，即自上而下的去触发事件。相反的，事件冒泡是自下而上的去触发事件。...绑定事件方法的第三个参数，就是控制事件触发顺序是否为事件捕获。true,事件捕获；false,事件冒泡。默认false,即事件冒泡。...，"+this.id) }) 结果： child事件被触发，child parent事件被触发，parent 结论：先child，然后parent。...事件的触发顺序自内向外，这就是事件冒泡。...事件触发顺序变更为自外向内，这就是事件捕获。 方法： 阻止事件冒泡 和默认行为。 事件冒泡： ? 阻止默认行为： ?
事件冒泡： 事件冒泡由IE团队提出来的，即事件开始由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播。...IE9，chrome，Firefox，Opera，Safari都支持事件冒泡，并将事件冒泡到window对象。 如下，点击obj3，依次弹出obj3、world、hello。...： 方式一：event.stopPropagation(); 方式二：return false; return false 不仅阻止了事件往上冒泡，而且阻止了事件本身。...event.stopPropagation() 则只阻止事件往上冒泡，不阻止事件本身。...事件捕获： 事件捕获是由Netscape Communicator团队提出来的，是先由最上一级的节点先接收事件，然后向下传播到具体的节点。
事件机制 ---- 事件触发三个阶段： window往事件触发处传播，遇到注册的捕获事件会触发 传播到事件触发处时触发注册的事件 从事件触发处往window传播，遇到注册的冒泡事件会触发 事件触发一般会按照...event model |------------------------------------------- 但是有一个特例：如果给body中的子节点同时注册冒泡和捕获事件...'}, true) 当点击innner元素时，如下元素发生了： 点击事件开始于捕获阶段，在此阶段浏览器会在所有祖先元素上查找点击事件处理函数（从document开始） 结果找到了2个，分别在document...和outer上面，而且这两个事件处理函数的useCapture选项为true,说明他们被注册在捕获阶段的。...于是，document和outer的点击处理函数被执行 继续向下寻找，直到到达inner元素本身，捕获阶段就此结束。
说到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-->事件冒泡'); // 阻止事件冒泡，外层不会再捕获到事件
js中事件捕获的实现 1、当鼠标点击或触发dom事件，触发dom事件的元素称为事件源。 2、浏览器会从根节点=>事件源(从外到内)传播事件。...3、不太具体的节点应该更早接收到事件，最具体的节点应该最后接收到事件。...s2">s2 s1.addEventListener("click",function(e){ console.log("s1 冒泡事件...false); 以上就是js中事件捕获的实现，希望对大家有所帮助。...更多js学习指路：js教程 推荐操作环境：windows7系统、jquery3.2.1版本，DELL G3电脑。
讲 事件冒泡 、阻止冒泡 和 事件捕获 之前先说说什么是事件流，这样会更容易明白 一、事件和事件流 1、什么是事件 事件是可以被 JavaScript 侦测到的行为。...鼠标点击、鼠标移动、鼠标滚动、按下键盘，浏览器窗口大小的改变，网页加载完成，关闭网页等等都会发生事件。 2、什么是事件流 事件流，描述的是页面中接受事件的顺序。...一个完整的JS事件流是从window开始，最后回到window的一个过程。 事件流被分为三个阶段(1~ 5)捕获过程、(5~ 6)事件触发过程、(6~ 10)冒泡过程。...三、阻止冒泡 1、JS阻止事件冒泡 我们用 e.stopPropagation() 这个方法添加到某事件函数里的末尾，就可以做到阻止冒泡事件。...布尔值，指定事件是否在捕获或冒泡阶段执行。 可能值： true - 事件句柄在捕获阶段执行 false - 默认。
javascript 的事件捕获和事件冒泡之前一直没能弄明白，知道看到一个例子。...利用丢一颗石头入水的例子，就能够非常形象了，如图所示： 事件捕获和事件冒泡就像是一颗石头(点击事件)投入水中： 首先是最外层水面(html)接触(捕获)石头，然后石头下沉，内层的水(body/dom...点击可查看示例 去示例中试一试便清楚了~ 处理事件 理解了事件的捕获和冒泡机制，对于事件处理就好办了。...监听事件 /** * @param { event } 事件 * @param { functionEvent } 事件处理函数 * @param { capture } 是否在捕获阶段触发事件...capture 表示是否在捕获阶段处理函数 ps：默认为 false，表示在冒泡阶段处理函数，ie 低版本浏览器不支持在捕获阶段处理函数。
，调用 webview自身的返回事件。...事件监听 当浏览器活动历时记录条目更改时，将触发 popstate 事件，如用户点击浏览器的回退按钮，或者在 javascript 代码中调用 history.back() 或者 history.forward...; 事件的消费和添加 仅仅监听事件，还是不够的，虽然写了监听逻辑，但是浏览器本身的返回事件还是触发的，这时候点击返回，还是会继续回到之前页面，所以需要添加一个新的状态，让浏览器不跳转到前一个页面...history.pushState() 方法，是向当前浏览器会话的历史堆栈中添加一个状态 (state) ，添加以后，点击浏览器的返回，会消耗掉会话历史堆栈中栈顶的状态，也就是我们注册的最新的状态。...事件的全局控制 使用 cocos creator 开发游戏，注册 popstate 监听事件后，在浏览器点击返回时，会在每个注册的位置触发，实际游戏场景中，只需要执行一次就够。
var EventUtil = { //返回对event对象的引用 getEvent: function (event) { return event ?...event : window.event; }, //返回事件的目标 getTarget: function (event) { return event.target...element.attachEvent) {//IE element.attachEvent("on" + type, func); } else {//DOM0,js...element.detachEvent) {//IE element.detachEvent("on" + type, func); } else {//DOM0,js
1.事件冒泡：从触发事件元素，一级一级往上找父元素触发同名事件，如果有就触发 2.事件捕获：从最顶级的父元素一级一级往下找子元素触发同名事件，直到触发事件的元素为止 事件捕获与事件冒泡触发事件的顺序完全相反...3.事件捕获，只能通过addEventListener并且参数写true才是事件捕获 其他都是冒泡（不是通过addEventListener添加、addEventListener参数为false） 4....事件对象.stopPropagation() 除了可以阻止冒泡还可以阻止捕获 5.IE8及以前没有捕获！...这里就省略代码了 事件三个阶段 1.事件一共有三个阶段：事件的执行顺序 1--捕获阶段 ： 2--目标阶段 ： 3--冒泡阶段 ： 2.事件对象.eventPhase 可以获得触发这个事件时，到底是哪个阶段...3.先从最顶级往下一级一级捕获，然后到目标的捕获，目标的冒泡，再一级一级往上冒泡 <input type="button" value="
silverlight小技巧 捕获silverlight滚轮事件 在页面初始化时添加代码 HtmlPage.Window.AttachEvent("DOMMouseScroll", OnMouseWheel...onmousewheel", OnMouseWheel); HtmlPage.Document.AttachEvent("onmousewheel", OnMouseWheel); Mozilla/Safari浏览器监听...detail属性，IE/Opera浏览器监听wheelDelta属性 private void OnMouseWheel(object sender, HtmlEventArgs args) {
好了，从这个时候开始，浏览器就会运行自己的事件循环，查看是否有各种事件发生 于是，这个时候，用户点击了一下页面上的某一块位置，但是浏览器并不知道用户点 击了哪一个dom，并且也不知道该dom是否有事件响应程序...，浏览器知道的只是用户点 击的位置的x,y坐标，浏览器这个时候就开始从dom树的根开始寻找，（这里是捕获的 开始），x,y是否在根的位置上，根有没有注册点击事件？...点击事件是否是捕获注册的 ？...如果事件是捕获注册的，那么执行这个事件处理函数，在该函数中，判断是否有 event.stopPropagation()来阻止事件的捕获，若阻止了，那么该点击事件的整个过程就完 成了，不论子节点是否注册了点击事件都不会执行到的...然后接着往后找，进行同样的 判断，知道找到叶子节点位置（这里是捕获的结束）。同样要判断该叶子节点是否注册 了点击事件？是否阻止了事件？然后怎么来的，就怎么回去（这里是冒泡的开始）。
事件流、事件捕获和事件冒泡的介绍 最近有用到对应的场景，下班了特地来整理下响应的概念，巩固下知识。 我们在点击页面时，事件发生时会在各元素节点按照一定的顺序进行传播，这种传播过程就称作事件流。...事件流分为三个阶段： 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等一系列事件。
结论 element.addEventListener(event, function[, useCapture]) event:事件名称,如click function:指定要事件触发时执行的函数,可以传入事件参数...布尔值，指定事件是否在捕获或冒泡阶段执行。...默认false:在冒泡阶段执行指定事件 true:在捕获阶段执行事件 event.stopPropagation():阻止事件传播,用于function(event){}中 图解捕获与冒泡 实例:aa...,再按aa>bb>cc依次冒泡;因为第三个参数(useCapture)默认为false,所以在冒泡阶段执行各自click函数,结果如下: cc bb aa 当js修改为 function print...当js修改为 function print(e){ e.stopPropagation();//执行完此函数后,该事件不再继续传播 console.log(this.id);
事件具有冒泡流和捕获流，两者刚好是反着来。 JavaScript原声监听事件addEventListener，接收两个参数，一个是方法，一个是布尔值，指定事件是否在捕获或冒泡阶段执行。...所以我们可以很直观的打印输出事件的冒泡和捕获两个过程。 ? 输出顺序是body 捕获、test 捕获、test 冒泡、body 冒泡。...输出顺序是body 捕获、test onclick 、test 冒泡、test 捕获、body 冒泡，但是事件还是需要遵循外层事件捕获了，目标函数才能执行。...如果我在body捕获阶段就阻止了事件流，那么目标函数是不会执行的。 ? 只输出body 捕获。...对于事件，在事件捕获或者事件冒泡阶段处理并没有明显的优劣之分，但是由于事件冒泡被所有主流的浏览器兼容，从兼容性角度来说还是建议大家使用事件冒泡模型。这就是事件的捕获、冒泡、委托。
之前在项目中遇到一个问题，就是在微信网页上面本来是有返回按钮的，但是大多数人都为了方便，会使用安卓手机自带的物理返回键，这个返回键按下后，就会按照你浏览器的栈存储的路径来一层一层返回，就不执行你页面上的那个返回按钮的操作了...； 当onpopstate被触发时，检查event.state是否等于STATE，如果相等，表示页面发生了后退（按下返回键或者浏览器的后退按钮），则把这次行为当作是返回键被按下了（把点击浏览器的后退按钮也误算进来了...，这时候你就需要再上次那个操作完之后再使用histroy.pushState再写入一次之前写入的那个状态，这样下次会继续监听那个物理返回键，否则下次你再点击那个返回键的话，就会直接返回浏览器的栈的上一级...不过这个方法有些缺陷： 如果项目本身使用了pushState，则历史记录会有瑕疵（多了一个历史）； 浏览器的后退按钮点击以及调用history.back()也会被当成按下了返回键。...举个例子： 我在vue的项目中引入xback.js 关于上面在
setTimeout); setTimeout(function(){ throw new Error("hhh") },1000); 参考 方法二 封装为 promise，通过 promise.catch 捕获...，或 promise 全局错误捕获 const p3 = () => new Promise((reslove, reject) => { setTimeout(() => { reject...main3() { p3().catch(e => console.log(e)); } main3(); 方法三 封装为 promise，通过 async await 调用，通过 try catch 捕获
1.鼠标滚动事件。 说明：返回值 大于0向上滚动，小于0向下滚动。 兼容型：所有浏览器。...代码： /*********************** * 函数：鼠标滚动方向 * 参数：event * 返回：滚轮方向[向上（大于0）、向下（小于0）] ********************...alert(direct); } /*注册事件*/ if (document.addEventListener) { document.addEventListener('DOMMouseScroll...兼容性：所有浏览器。...document.body) { scrollTop = document.body.scrollTop; } return scrollTop; } 3.去掉所有html文本标记的js
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频
