先上结论: 他们是描述事件触发时序问题的术语。事件捕获指的是从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传播,遇到注册的冒泡事件会触发 事件触发一般会按照...,事件触发会按照注册的顺序执行。...和outer上面,而且这两个事件处理函数的useCapture选项为true,说明他们被注册在捕获阶段的。...于是,document和outer的点击处理函数被执行 继续向下寻找,直到到达inner元素本身,捕获阶段就此结束。...此时进入冒泡阶段,inner上的时间处理器得到执行 事件命中元素后开始向上冒泡,一路查找是否注册了冒泡阶段的祖先元素上的时间处理器。由于没有找到因此什么也没发生。
说到js事件大家肯定都知道,那么今天讲一点大家不知道的(假设大家不知道?)。 所有的js事件都会分为两个阶段捕获和冒泡。...那么问题来了,我们通常看到的事件都是直接触发之后就执行了,那么我们怎么才能看到事件的捕获和冒泡都是怎么进行的呢,这里给大家准备了一个例子 addEventListener() 例子之前首先给大家简单介绍一下...例如:单击事件直接可以写成click。 function:回调函数,表示事件触发后要执行的函数。 useCapture:布尔值 true 或 false 不传的话默认为false 。...其次是inner捕获阶段 然后是inner冒泡阶段 最后是outer冒泡阶段 由此我们可以看到,事件触发的时候实际上都是有捕获和冒泡阶段的,并且捕获阶段会从最外层的父级元素开始捕获,一直捕获到最后触发事件的那个元素点才会停止...e.stopPropagation(); 当我们吧这个方法放到inner冒泡阶段的下面的时候,神奇的事情发生了,当代码执行到这里,默认直接把冒泡的事件给阻止了,这时候会呈现出这个样子。
事件与事件流 事件,是文档或浏览器窗口发生的一些特定的交互事件。事件流,描述的是页面中接收事件的顺序。 默认情况下,事件使用冒泡事件流,不使用捕获事件流。...捕获与冒泡 事件捕获:执行顺序(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-->事件冒泡'); // 阻止事件冒泡,外层不会再捕获到事件
问题来自群里的一位骚年@い♂壹惢; 他的问题是:a下有一个checkbox a上绑定着两个事件:看代码; 想要点击a的同时阻止tan()和href:javascript的执行; <!
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电脑。
一个完整的JS事件流是从window开始,最后回到window的一个过程。 事件流被分为三个阶段(1~ 5)捕获过程、(5~ 6)事件触发过程、(6~ 10)冒泡过程。...如果它的父级元素也有某个事件函数,当执行完它的事件函数后,也就会执行它父级的事件函数。...三、阻止冒泡 1、JS阻止事件冒泡 我们用 e.stopPropagation() 这个方法添加到某事件函数里的末尾,就可以做到阻止冒泡事件。...布尔值,指定事件是否在捕获或冒泡阶段执行。 可能值: true - 事件句柄在捕获阶段执行 false - 默认。...事件句柄在冒泡阶段执行 从上面的表格中,可以看到参数值useCapture,为true的时候,事件在捕获过程中就会执行。
javascript 的事件捕获和事件冒泡之前一直没能弄明白,知道看到一个例子。...利用丢一颗石头入水的例子,就能够非常形象了,如图所示: 事件捕获和事件冒泡就像是一颗石头(点击事件)投入水中: 首先是最外层水面(html)接触(捕获)石头,然后石头下沉,内层的水(body/dom...点击可查看示例 去示例中试一试便清楚了~ 处理事件 理解了事件的捕获和冒泡机制,对于事件处理就好办了。...监听事件 /** * @param { event } 事件 * @param { functionEvent } 事件处理函数 * @param { capture } 是否在捕获阶段触发事件...,比如是在‘石头’下沉或者‘气泡’冒泡的过程中使之突然消失 事件代理: 从上面事件机制可以看出,如果没有外部干扰,在子节点上触发的事件,在捕获和冒泡最终都会经过父节点 因此,我们可以将事件处理函数绑定在父节点上面
(代表冒泡)跟冒泡和捕获有关 //如果有同名事件不会覆盖,而是会依次执行 //IE8及以前的版本不支持 btn.addEventListener ( "click", function...1.事件冒泡:从触发事件元素,一级一级往上找父元素触发同名事件,如果有就触发 2.事件捕获:从最顶级的父元素一级一级往下找子元素触发同名事件,直到触发事件的元素为止 事件捕获与事件冒泡触发事件的顺序完全相反...3.事件捕获,只能通过addEventListener并且参数写true才是事件捕获 其他都是冒泡(不是通过addEventListener添加、addEventListener参数为false) 4....事件对象.stopPropagation() 除了可以阻止冒泡还可以阻止捕获 5.IE8及以前没有捕获!...这里就省略代码了 事件三个阶段 1.事件一共有三个阶段:事件的执行顺序 1--捕获阶段 : 2--目标阶段 : 3--冒泡阶段 : 2.事件对象.eventPhase 可以获得触发这个事件时,到底是哪个阶段
有一个需求,滚轮滚动到相应位置的时候执行当前的动画,这个动画在footer里面,而网页的主体通过ajax进行渲染,我在js里面调用ajax渲染数据,然后再获取主体的高度,滚动到该高度的时候执行动画。...我大致想了两种解决办法,均以失败告终,本地是ajax先执行,服务器是js先执行。...让获取高度的事件时间延时500ms,发现最后获取不到事件了; 将该事件写在ajax的success回调里面,结果是只有打开网页第一次能够成功,然后不管刷新多少次均无效,事件被屏蔽,所以方法二也被废除;...最后我想到了,ajax不就是一种异步方法,我将其改为同步不就行,先让ajax执行完在执行js事件。...当然这样做有弊端的,如果接口出问题,ajax渲染失败,那么整个网页的js都将执行不了。不过我想真到了数据都渲染不出的地方,访问网页就没有意义了,所以最后我采用了这种方法。
silverlight小技巧 捕获silverlight滚轮事件 在页面初始化时添加代码 HtmlPage.Window.AttachEvent("DOMMouseScroll", OnMouseWheel
事件流、事件捕获和事件冒泡的介绍 最近有用到对应的场景,下班了特地来整理下响应的概念,巩固下知识。 我们在点击页面时,事件发生时会在各元素节点按照一定的顺序进行传播,这种传播过程就称作事件流。...事件流分为三个阶段: 1、事件捕获阶段 事件从window发出,不断向子元素寻找对应的目标节点 2、事件目标阶段 事件找到了对应的目标节点,即此时再往下已经没有对应的节点 3、事件冒泡阶段 事件从节点位置网上回溯到文档的根节点...我们在使用给dom添加事件时一般使用addEventListener方法,该方法传入三个参数 1、对应的事件名称如:click 2、函数:触发对应的交互响应后执行的函数 3、userCapture:指定事件是在捕获还是冒泡阶段执行..."); }, true); // 对应的打印结果 body 事件捕获 test.html:37 container 事件捕获 test.html...事件冒泡 可以看到,都是先触发捕获再触发冒泡事件,先从body(上)到btn(下),再从btn(下)到body(上)。
本文方法适用于Volantis 5.0.0.alpha.1,不保证其他版本可用 Volantis中使用APlayer作为音乐播放器,如果希望在播放音乐时网页能够做出响应,例如弹窗,就需要对播放事件进行捕获...现在从中挑选出我认为比较重要的事件,写成js代码来分享,你需要自行定义函数并在函数里实现你要的功能。...事件捕捉 在volantis/layout/layout.ejs中定义以下函数,你可以直接写进去或者新建一个js文件来引用 function player_onPlay(){ //音乐播放 } function... 注意事项 注释中已经说明了每个函数触发条件...,你必须要注意有些函数会同时执行(短时间内执行) 例如,用户点击了一下进度条,而恰好进度条还没加载完,那么就会先触发onSeeked,再触发onProgress。
,他就被压入栈中,这很好理解,main函数执行完成必须依赖他的执行。...事件循环 所以,事件循环其实就是js代码借助与浏览器API向消息队列中丢入一些回调函数,等待执行栈放空自己的时候,把消息队列中的回调函数压入到执行栈中执行的这么一个机制。...紧接着runWhileLoopForNSeconds(3);被压入了执行栈中,是一个函数,由于js是单线程的,因此mian也好,runWhileLoopForNSeconds也好,都会在这个执行栈所在在执行上线文中孤独的执行着...('C');被压入了执行栈,然后秒执行了,此时main总算走空了,因此事件循环现在就看消息队列中有没有消息了,已看发现有,嘿,一个一个的丢出来,放到执行栈中来执行。...总结 所以,只有当执行栈中是空的时候,事件循环机制才有机会把消息队列中的任务丢出来执行,换句话说,只有执行栈中有内容在执行,事件循环就不可能给你从消息队列中取任务出来执行。
结论 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 onclick 、test 冒泡、test 捕获、body 冒泡,但是事件还是需要遵循外层事件捕获了,目标函数才能执行。...如果我在body捕获阶段就阻止了事件流,那么目标函数是不会执行的。 ? 只输出body 捕获。...我们一般会用on方法或者绑定在body上面来达到append的元素的点击方法可以执行。一般我们给li添加点击事件是这样的 ? 但其实我们可以用事件委托 ?...对于事件,在事件捕获或者事件冒泡阶段处理并没有明显的优劣之分,但是由于事件冒泡被所有主流的浏览器兼容,从兼容性角度来说还是建议大家使用事件冒泡模型。这就是事件的捕获、冒泡、委托。
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 捕获
事件一般是用于浏览器和用户操作之间的交互,当用户执行某些特殊的操作时,浏览器给予反应,触发绑定的事件,事件流,事件发生时会在元素节点和根节点之间按照约定的顺序传播,事件经过的所有节点都会受到事件的影响,...这个传播过程被称为DOM事件流 函数事件 事件一般是用于浏览器和用户操作之间的交互,当用户执行某些特殊的操作时,浏览器给予反应,触发绑定的事件 事件流,事件发生时会在元素节点和根节点之间按照约定的顺序传播...,事件经过的所有节点都会受到事件的影响,这个传播过程被称为DOM事件流 true是捕获,false是冒泡,默认为冒泡事件 1.addEventListener()--添加事件监听函数 给元素添加一个事件...,但是要知道它代表的意思 用布尔值来表示,true或者false,默认是false true表示在捕获阶段调用事件处理程序 false表示在冒泡阶段调用事件处理程序 根据图片可以看出,捕获阶段要先于冒泡阶段...function() { alert("DOM2级事件处理程序,我在捕获阶段执行"); }, true); btn.addEventListener("click",
Js捕获异常的方法 JavaScript的异常主要使用try catch finally语句以及窗口对象window的onerror事件来捕获。...try catch finally try catch finally只能捕获运行时的错误,无法捕获语法错误,可以拿到出错的信息,堆栈,出错的文件、行号、列号。...catch_statements }] */ 通过Error的构造器可以创建一个错误对象,当运行时错误产生时,Error的实例对象会被抛出,Error对象也可用于用户自定义的异常的基础对象,Js...window.onerror window.onerror可以捕捉语法错误,也可以捕捉运行时错误,可以拿到出错的信息,堆栈,出错的文件、行号、列号,只要在当前window执行的Js脚本出错都会捕捉到,通过...发生错误的脚本URL(字符串) lineno:发生错误的行号(数字) colno:发生错误的列号(数字) error:Error对象(对象) 若该函数返回true,则阻止执行默认事件处理函数
领取专属 10元无门槛券
手把手带您无忧上云