什么是冒泡? DOM事件流(event flow )存在三个阶段:事件捕获阶段、处于目标阶段、事件冒泡阶段。...事件冒泡**(***dubbed bubbling***)**:与事件捕获恰恰相反,事件冒泡顺序是由内到外进行事件传播,直到根节点。...dom标准事件流的触发的先后顺序为:先捕获再冒泡,即当触发dom事件时,会先进行事件捕获,捕获到事件源之后通过事件传播进行事件冒泡。...参数 useCapture 是选填的,填true或者false,用于描述事件是冒泡还是捕获,true表示捕获,默认的false表示冒泡。...") }); div2.addEventListener('click',function(){ console.log("div2--冒泡阶段"
算法简介 冒泡排序是一种简单的排序算法。它重复地走访过要排序的数列,一次比较两个元素,如果它们的顺序不符合要求就把它们交换过来。...时间复杂度和空间复杂度 再谈谈冒泡排序的时间复杂度和空间复杂度吧!
冒泡排序: 冒泡排序是一种简单的排序算法。 它重复地走访过要排序的数列,一次比较两个元素,如果他们的顺序错误就把他们交换过来。
停止事件传播 事件对象还提供了一个.stopPropagation()方法,该方法能够全然阻止事件冒泡。
javascript给人的直观感受是,从上往下执行,但实际上却不是这样的,先看个例子 1. console.log(test); 2. var test = ...
// 冒泡排序 var arr = [2, 4, 1, 6, 7, 8, 33, 11,77,88,99,3,100]; function sort(array
实例 当点击id为i3的时,浏览器会依次弹出3 2 1,这就是事件冒泡,此正方形处于叶节点上,对其操作的事件会向上进行冒泡,直到根节点。 JS事件冒泡及阻止 div{...DOCTYPE html> JS事件冒泡及阻止 li{...有时候我们并不希望事件冒泡而去执行上级节点绑定的事件,这时候就需要阻止事件的冒泡,w3c的方法是e.stopPropagation(),IE则是使用 window.event.cancelBubble...注意 不是所有的事件都能冒泡。以下事件不冒泡:blur、focus、load、unload。 事件解决方案方式在不同浏览器,可能是有所区别的,有些不支持捕获型方案,多数浏览器默认冒泡型方案。
相反的,事件冒泡是自下而上的去触发事件。绑定事件方法的第三个参数,就是控制事件触发顺序是否为事件捕获。true,事件捕获;false,事件冒泡。默认false,即事件冒泡。...Jquery的e.stopPropagation会阻止冒泡,意思就是到我为止,我的爹和祖宗的事件就不要触发了。...事件的触发顺序自内向外,这就是事件冒泡。...事件触发顺序变更为自外向内,这就是事件捕获。 方法: 阻止事件冒泡 和默认行为。 事件冒泡: ? 阻止默认行为: ?
背景 众所周知,JS是单线程语言,但它支持异步操作,其核心机制就是JS引擎的事件循环。...resolve() }).then(() => { console.log(4) }) console.log(5) // 1 3 5 4 2 因为1,3,5都是同步执行的,所以它们按顺序排列...通过这样的事件循环,使得单线程的JS也可以拥有异步的能力,使得如AJAX请求这样费时间的操作可以被安排到后面来执行,不影响页面的加载和渲染。
代码执行getSum(5)--->进入函数, 此时的x是5, 执行的是5+getSum(4), 此时代码等待
事件机制 ---- 事件触发三个阶段: window往事件触发处传播,遇到注册的捕获事件会触发 传播到事件触发处时触发注册的事件 从事件触发处往window传播,遇到注册的冒泡事件会触发 事件触发一般会按照...的顺序进行(W3C模型) 1....|------------------------------------------- 但是有一个特例:如果给body中的子节点同时注册冒泡和捕获事件,事件触发会按照注册的顺序执行。...// 以下会先打印冒泡然后是捕获node.addEventListener( 'click', event => { console.log('冒泡') }, false)node.addEventListener...此时进入冒泡阶段,inner上的时间处理器得到执行 事件命中元素后开始向上冒泡,一路查找是否注册了冒泡阶段的祖先元素上的时间处理器。由于没有找到因此什么也没发生。
事件冒泡: 事件冒泡由IE团队提出来的,即事件开始由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播。...IE9,chrome,Firefox,Opera,Safari都支持事件冒泡,并将事件冒泡到window对象。 如下,点击obj3,依次弹出obj3、world、hello。...addEventListener('click', function () { alert('obj3'); })//依次弹出obj3、world、hello 阻止事件冒泡的方法...: 方式一:event.stopPropagation(); 方式二:return false; return false 不仅阻止了事件往上冒泡,而且阻止了事件本身。...event.stopPropagation() 则只阻止事件往上冒泡,不阻止事件本身。
说到js事件大家肯定都知道,那么今天讲一点大家不知道的(假设大家不知道?)。 所有的js事件都会分为两个阶段捕获和冒泡。...最后是outer冒泡阶段 由此我们可以看到,事件触发的时候实际上都是有捕获和冒泡阶段的,并且捕获阶段会从最外层的父级元素开始捕获,一直捕获到最后触发事件的那个元素点才会停止,那么冒泡阶段反之,会从最内层触发的那个元素开始往外层的父级元素一直冒泡...并且事件的触发是先捕获,在冒泡。 阻止事件冒泡 事件的冒泡会让我们实现某些功能的时候产生阻碍,那么我们怎么怎么阻止事件的冒泡呢,这个时候就会用到一个方法。...e.stopPropagation(); 当我们吧这个方法放到inner冒泡阶段的下面的时候,神奇的事情发生了,当代码执行到这里,默认直接把冒泡的事件给阻止了,这时候会呈现出这个样子。...这样就成功的阻止了事件的冒泡,是不是很神奇,那么我们阻止事件冒泡还有别的方法吗,答案是肯定的,这时候就得了解一下我们的event对象了,我们打印一下event对象,如下: 打印发现当我们触发事件时,
当有多个macro-task(micro-task)队列时,事件循环的顺序是按上文macro-task(micro-task)的分类中书写的顺序执行的。
// 冒泡排序 // 原理就是每一轮循环,将一个最大的值放冒泡到最后 // 1.每一趟都是比较相邻两个元素,如果后一个元素大于前一个,则交换两个元素 // 2.第一趟从第一个元素开始进行交换,最后一个元素不参与交换...if (arr.length < 2) { return arr; } // 定义 count 代表执行了趟循环 let count = 0; // 冒泡排序排的趟数...; } } } console.log(`执行了${count}趟循环`); return arr; } console.log("普通冒泡排序...if (arr.length < 2) { return arr; } // 定义 count 代表执行了趟循环 let count = 0; // 冒泡排序排的趟数...break; } } console.log(`执行了${count}趟循环`); return arr; } console.log("一重优化冒泡排序
事件流,描述的是页面中接收事件的顺序。 默认情况下,事件使用冒泡事件流,不使用捕获事件流。...捕获与冒泡 事件捕获:执行顺序(document->html->body->div) 事件冒泡:执行顺序(div->body->html->document) IE < 9:只支持事件冒泡...IE 9+|chrome|firefox|safari:事件冒泡+事件捕获 阻止捕获与冒泡 event.stopPropagation() 示例代码 <!...}, true); inner.addEventListener('click', function (event) { console.log('inner-->事件冒泡...('click', function (event) { console.log('outer-->事件冒泡'); }, false) </html
2、什么是事件流 事件流,描述的是页面中接受事件的顺序。 一个完整的JS事件流是从window开始,最后回到window的一个过程。...事件流被分为三个阶段(1~ 5)捕获过程、(5~ 6)事件触发过程、(6~ 10)冒泡过程。 二、事件冒泡 看了上面的那张图应该对事件冒泡有了大概的了解了吧。...三、阻止冒泡 1、JS阻止事件冒泡 我们用 e.stopPropagation() 这个方法添加到某事件函数里的末尾,就可以做到阻止冒泡事件。...2、JQ阻止事件冒泡 jq阻止事件冒泡就简单了,直接在事件函数里面添加 return false; 就行了。...,和之前的顺序就不一样了。
block'; var oEvent = ev || event; oEvent.cancelBubble = true; // 取消事件冒泡
1.冒泡排序原理 假设长度为n的数组arr,要按照从小到大排序。
当父子元素中都有点击事件的时候,为了让触发子元素中的事件时,不去触发父元素中的事件,可以在子元素事件中添加stop来阻止事件冒泡。....stop 是阻止冒泡行为,不让当前元素的事件继续往外触发,如阻止点击div内部事件,触发div事件 .prevent 是阻止事件本身行为,如阻止超链接的点击跳转,form表单的点击提交 .self 是只有是自己触发的自己才会执行...,如果接受到内部的冒泡事件传递信号触发,会忽略掉这个信号 .capture 是改变js默认的事件机制,默认是冒泡,capture功能是将冒泡改为倾听模式 .once 是将事件设置为只执行一次,如 .click.prevent.once...阻止click事件冒泡(防止触发另一个事件)的方法 使用vue阻止子级元素的click事件冒泡。...方法二 可以自己写个阻止冒泡事件 然后在发生冒泡的元素中调用这个事件 @click="_stopPropagation($event)" methods:{ _stopPropagation
领取专属 10元无门槛券
手把手带您无忧上云