事件捕获指的是从document到触发事件的那个节点，即自上而下的去触发事件。相反的，事件冒泡是自下而上的去触发事件。绑定事件方法的第三个参数，就是控制事件触发顺序是否为事件捕获。...true,事件捕获；false,事件冒泡。默认false,即事件冒泡。Jquery的e.stopPropagation会阻止冒泡，意思就是到我为止，我的爹和祖宗的事件就不要触发了。...事件的触发顺序自内向外，这就是事件冒泡。...事件触发顺序变更为自外向内，这就是事件捕获。 方法： 阻止事件冒泡 和默认行为。 事件冒泡： ? 阻止默认行为： ?
事件机制 ---- 事件触发三个阶段： window往事件触发处传播，遇到注册的捕获事件会触发 传播到事件触发处时触发注册的事件 从事件触发处往window传播，遇到注册的冒泡事件会触发 事件触发一般会按照...|------------------------------------------- 但是有一个特例：如果给body中的子节点同时注册冒泡和捕获事件，事件触发会按照注册的顺序执行。...// 以下会先打印冒泡然后是捕获node.addEventListener( 'click', event => { console.log('冒泡') }, false)node.addEventListener...和outer上面，而且这两个事件处理函数的useCapture选项为true,说明他们被注册在捕获阶段的。...此时进入冒泡阶段，inner上的时间处理器得到执行 事件命中元素后开始向上冒泡，一路查找是否注册了冒泡阶段的祖先元素上的时间处理器。由于没有找到因此什么也没发生。
事件冒泡： 事件冒泡由IE团队提出来的，即事件开始由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播。...IE9，chrome，Firefox，Opera，Safari都支持事件冒泡，并将事件冒泡到window对象。 如下，点击obj3，依次弹出obj3、world、hello。...： 方式一：event.stopPropagation(); 方式二：return false; return false 不仅阻止了事件往上冒泡，而且阻止了事件本身。...event.stopPropagation() 则只阻止事件往上冒泡，不阻止事件本身。...事件捕获： 事件捕获是由Netscape Communicator团队提出来的，是先由最上一级的节点先接收事件，然后向下传播到具体的节点。
说到js事件大家肯定都知道，那么今天讲一点大家不知道的(假设大家不知道?)。 所有的js事件都会分为两个阶段捕获和冒泡。...那么问题来了，我们通常看到的事件都是直接触发之后就执行了，那么我们怎么才能看到事件的捕获和冒泡都是怎么进行的呢，这里给大家准备了一个例子 addEventListener() 例子之前首先给大家简单介绍一下...true表示监听事件的捕获阶段，false表示监听事件的冒泡阶段。 返回值 没有返回值 示例： <!...然后是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-->事件冒泡'); // 阻止事件冒泡，外层不会再捕获到事件
讲 事件冒泡 、阻止冒泡 和 事件捕获 之前先说说什么是事件流，这样会更容易明白 一、事件和事件流 1、什么是事件 事件是可以被 JavaScript 侦测到的行为。...一个完整的JS事件流是从window开始，最后回到window的一个过程。 事件流被分为三个阶段(1~ 5)捕获过程、(5~ 6)事件触发过程、(6~ 10)冒泡过程。...三、阻止冒泡 1、JS阻止事件冒泡 我们用 e.stopPropagation() 这个方法添加到某事件函数里的末尾，就可以做到阻止冒泡事件。...布尔值，指定事件是否在捕获或冒泡阶段执行。 可能值： true - 事件句柄在捕获阶段执行 false - 默认。...事件句柄在冒泡阶段执行 从上面的表格中，可以看到参数值useCapture，为true的时候，事件在捕获过程中就会执行。
javascript 的事件捕获和事件冒泡之前一直没能弄明白，知道看到一个例子。...利用丢一颗石头入水的例子，就能够非常形象了，如图所示： 事件捕获和事件冒泡就像是一颗石头(点击事件)投入水中： 首先是最外层水面(html)接触(捕获)石头，然后石头下沉，内层的水(body/dom...当石头到达池塘底部(事件被捕获)之后，产生了一个气泡，然后就开始了冒泡阶段 由底部（目标元素）产生的气泡，由内而外，不断向上冒泡，直到最外面（html标签）结束。...点击可查看示例 去示例中试一试便清楚了~ 处理事件 理解了事件的捕获和冒泡机制，对于事件处理就好办了。...capture 表示是否在捕获阶段处理函数 ps：默认为 false，表示在冒泡阶段处理函数，ie 低版本浏览器不支持在捕获阶段处理函数。
事件的执行顺序 JavaScript冒泡和捕获考察题目看图回答问题，晚上公布答案。 问：点击Li，JS的执行顺序是什么？ ?...总结就是：先捕获，后冒泡，捕获从上到下，冒泡从下到上（形象点说法：捕获像石头沉入海底，冒泡则像气泡冒出水面） 问：假如去掉注释 event.stopPropagation(); 结果又会输出什么？...答：去掉event.stopPropagation() 之后，由于事件有捕获和冒泡时先执行捕获，捕获到div之后，事件被阻止，后面就不在继续传播了。所以只输出divcallback....在上面的代码如果增加一个div.addEventListener('click',callbackdiv2,false); 则div先执行捕获，接着执行上面这句冒泡，所以微博里的一个朋友评论说事件执行过捕获就不会执行冒泡其实是不对的...如果一个事件对象类型被标志为不能冒泡。那么对应的事件对象在到达此阶段时就会终止传播。 冒泡 阶段： 事件对象以一个与捕获阶段相反的方向从事件目标传播经过其祖先节点传播到window。
冒泡事件和捕获事件 冒泡事件是，进行 捕获事件是从外向内，从大到小 冒泡事件bindtap one <view...测试 点击 区域，事件会从内到外从小到大Console`控制台显示 捕获事件capture-bind:tap <view id="one" class="one" capture-bind:tap="_...测试 点击 three区域，事件会从外到到，从大到小进行传递,Console`控制台显示 非<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区域，互斥事件绑定 一个 mut-bind 触发后，如果事件冒泡到其他节点上，其他节点上的 mut-bind 绑定函数不会被触发，但 bind 绑定函数和 catch 绑定函数依旧会被触发
事件具有冒泡流和捕获流，两者刚好是反着来。 JavaScript原声监听事件addEventListener，接收两个参数，一个是方法，一个是布尔值，指定事件是否在捕获或冒泡阶段执行。...所以我们可以很直观的打印输出事件的冒泡和捕获两个过程。 ? 输出顺序是body 捕获、test 捕获、test 冒泡、body 冒泡。...输出顺序是body 捕获、test onclick 、test 冒泡、test 捕获、body 冒泡，但是事件还是需要遵循外层事件捕获了，目标函数才能执行。...stopPropagation既可以阻止事件的捕获还能阻止事件的冒泡，如果我在test冒泡阻止了事件的冒泡，那么就不会输出body冒泡。...对于事件，在事件捕获或者事件冒泡阶段处理并没有明显的优劣之分，但是由于事件冒泡被所有主流的浏览器兼容，从兼容性角度来说还是建议大家使用事件冒泡模型。这就是事件的捕获、冒泡、委托。
算法简介 冒泡排序是一种简单的排序算法。它重复地走访过要排序的数列，一次比较两个元素，如果它们的顺序不符合要求就把它们交换过来。...时间复杂度和空间复杂度 再谈谈冒泡排序的时间复杂度和空间复杂度吧！
）跟冒泡和捕获有关 //如果有同名事件不会覆盖，而是会依次执行 //IE8及以前的版本不支持 btn.addEventListener ( "click", function (...1.事件冒泡：从触发事件元素，一级一级往上找父元素触发同名事件，如果有就触发 2.事件捕获：从最顶级的父元素一级一级往下找子元素触发同名事件，直到触发事件的元素为止 事件捕获与事件冒泡触发事件的顺序完全相反...3.事件捕获，只能通过addEventListener并且参数写true才是事件捕获 其他都是冒泡（不是通过addEventListener添加、addEventListener参数为false） 4....事件对象.stopPropagation() 除了可以阻止冒泡还可以阻止捕获 5.IE8及以前没有捕获！...3.先从最顶级往下一级一级捕获，然后到目标的捕获，目标的冒泡，再一级一级往上冒泡 <input type="button" value="
我们学习javascript的时候，都会接触到事件，我们今天就来说说事件的捕获和冒泡。 事件冒泡阶段：事件开始的时候由事件发生的元素接受，然后逐级向上传播，触摸相对的事件。 代码： <!...事件捕获阶段：这个跟冒泡事件的顺序则是相反的，是从顶部往下一直传播到具体的事件发生元素，我们把上面的代码小小修改一下。...注意：事件捕获在事件冒泡之前发生 ?
什么是冒泡？ DOM事件流（event flow ）存在三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段。...事件冒泡**（***dubbed bubbling***）**：与事件捕获恰恰相反，事件冒泡顺序是由内到外进行事件传播，直到根节点。...dom标准事件流的触发的先后顺序为：先捕获再冒泡，即当触发dom事件时，会先进行事件捕获，捕获到事件源之后通过事件传播进行事件冒泡。...参数 useCapture 是选填的，填true或者false，用于描述事件是冒泡还是捕获，true表示捕获，默认的false表示冒泡。...div1.attachEvent('onclick', function () { console.log("不支持") }); } 冒泡和捕获的具体区别
事件流、事件捕获和事件冒泡的介绍 最近有用到对应的场景，下班了特地来整理下响应的概念，巩固下知识。 我们在点击页面时，事件发生时会在各元素节点按照一定的顺序进行传播，这种传播过程就称作事件流。...事件流分为三个阶段： 1、事件捕获阶段 事件从window发出，不断向子元素寻找对应的目标节点 2、事件目标阶段 事件找到了对应的目标节点，即此时再往下已经没有对应的节点 3、事件冒泡阶段 事件从节点位置网上回溯到文档的根节点...:26 btn 事件捕获 test.html:23 btn 事件冒泡1 test.html:29 btn 事件冒泡2 test.html:34 container 事件冒泡 test.html:15 body...事件冒泡 可以看到，都是先触发捕获再触发冒泡事件，先从body（上）到btn（下），再从btn（下）到body（上）。...有个例子就讲的挺有形象，就好比一个塑料扔到水里，先往下沉（捕获阶段），沉到最底部（目标阶段）再慢慢浮起来（冒泡阶段）。
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 捕获
冒泡排序： 冒泡排序是一种简单的排序算法。 它重复地走访过要排序的数列，一次比较两个元素，如果他们的顺序错误就把他们交换过来。
布尔值，指定事件是否在捕获或冒泡阶段执行。...默认false:在冒泡阶段执行指定事件 true:在捕获阶段执行事件 event.stopPropagation():阻止事件传播,用于function(event){}中 图解捕获与冒泡 实例:aa...,再按aa>bb>cc依次冒泡;因为第三个参数(useCapture)默认为false,所以在冒泡阶段执行各自click函数,结果如下: cc bb aa 当js修改为 function print...,再按aa>bb>cc依次冒泡;因为第三个参数(useCapture)为true,所以在捕获阶段执行各自click函数,结果如下: aa bb cc 3....当js修改为 function print(e){ e.stopPropagation();//执行完此函数后,该事件不再继续传播 console.log(this.id);
停止事件传播 事件对象还提供了一个.stopPropagation()方法，该方法能够全然阻止事件冒泡。
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脚本出错都会捕捉到，通过
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM
