什么是冒泡？ DOM事件流（event flow ）存在三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段。...事件冒泡**（***dubbed bubbling***）**：与事件捕获恰恰相反，事件冒泡顺序是由内到外进行事件传播，直到根节点。...dom标准事件流的触发的先后顺序为：先捕获再冒泡，即当触发dom事件时，会先进行事件捕获，捕获到事件源之后通过事件传播进行事件冒泡。...参数 useCapture 是选填的，填true或者false，用于描述事件是冒泡还是捕获，true表示捕获，默认的false表示冒泡。...") }); div2.addEventListener('click',function(){ console.log("div2--冒泡阶段"
算法简介 冒泡排序是一种简单的排序算法。它重复地走访过要排序的数列，一次比较两个元素，如果它们的顺序不符合要求就把它们交换过来。...时间复杂度和空间复杂度 再谈谈冒泡排序的时间复杂度和空间复杂度吧！
冒泡排序： 冒泡排序是一种简单的排序算法。 它重复地走访过要排序的数列，一次比较两个元素，如果他们的顺序错误就把他们交换过来。
停止事件传播 事件对象还提供了一个.stopPropagation()方法，该方法能够全然阻止事件冒泡。...事件传播和默认操作是相互独立的两套机制，在二者不论什么一方发生时，都能够终止还有一方。假设想要同一时候停止事件传播和默认操作，能够在事件处理程序中返回false。
2.冒泡机制 什么是冒泡呢？ 下面这个图片大家应该心领神会吧，气泡从水底开始往上升，由深到浅，升到最上面。在上升的过程中，气泡会经过不同深度层次的水。 ?...DOCTYPE html> js/jquery-1.11.0....js"> Insert title here .box1 { border: green 40px solid...原因就在于事件的冒泡，点击span的时候，span 会把产生的事件往上冒泡，作为父节点的div2 和 祖父节点的div1也会收到此事件，于是会做出事件响应，执行响应函数。...; } }); } 比较： 从事件传递上看：方法一在于取消事件冒泡，即当某些节点取消冒泡后，事件不会再传递；方法二在于不阻止冒泡，过滤需要处理的事件
// 冒泡排序 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会阻止冒泡，意思就是到我为止，我的爹和祖宗的事件就不要触发了。...事件的触发顺序自内向外，这就是事件冒泡。...方法： 阻止事件冒泡 和默认行为。 事件冒泡： ? 阻止默认行为： ?
事件机制 ---- 事件触发三个阶段： window往事件触发处传播，遇到注册的捕获事件会触发 传播到事件触发处时触发注册的事件 从事件触发处往window传播，遇到注册的冒泡事件会触发 事件触发一般会按照...|------------------------------------------- 但是有一个特例：如果给body中的子节点同时注册冒泡和捕获事件，事件触发会按照注册的顺序执行。...// 以下会先打印冒泡然后是捕获node.addEventListener( 'click', event => { console.log('冒泡') }, false)node.addEventListener...此时进入冒泡阶段，inner上的时间处理器得到执行 事件命中元素后开始向上冒泡，一路查找是否注册了冒泡阶段的祖先元素上的时间处理器。由于没有找到因此什么也没发生。...我们把时间注册在冒泡阶段（addEventListener的useCapture选项为false） var selector = document.querySelector.bind(document
JavaScript系列之事件冒泡机制 DOM事件流（event flow ）存在三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段，事件冒泡顺序是由内到外进行事件传播，事件冒泡是由IE开发团队提出来的...听了简介介绍之后，您可能不理解，所以举个例子： js事件冒泡测试 冒泡机制导致的，解决方法是禁用事件冒泡机制 w3c的方法是e.stopPropagation...e.cancelBubble = true $(element).click(function(e){ e.stopPropagation();//ie e.cancelBubble = true }); 当然除了冒泡机制会导致...解决方法是解除事件，然后再绑定 $(element).unbind('click').click(function() { // todo }) 参考资料： JavaScript 详说事件机制之冒泡
事件冒泡： 事件冒泡由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() 则只阻止事件往上冒泡，不阻止事件本身。
默认情况下，事件使用冒泡事件流，不使用捕获事件流。...捕获与冒泡 事件捕获：执行顺序(document->html->body->div) 事件冒泡：执行顺序(div->body->html->document) IE 冒泡...IE 9+|chrome|firefox|safari：事件冒泡+事件捕获 阻止捕获与冒泡 event.stopPropagation() 示例代码 <!...}, true); inner.addEventListener('click', function (event) { console.log('inner-->事件冒泡...('click', function (event) { console.log('outer-->事件冒泡'); }, false) </html
// 冒泡排序 // 原理就是每一轮循环，将一个最大的值放冒泡到最后 // 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("一重优化冒泡排序
说到js事件大家肯定都知道，那么今天讲一点大家不知道的(假设大家不知道?)。 所有的js事件都会分为两个阶段捕获和冒泡。...最后是outer冒泡阶段 由此我们可以看到，事件触发的时候实际上都是有捕获和冒泡阶段的，并且捕获阶段会从最外层的父级元素开始捕获，一直捕获到最后触发事件的那个元素点才会停止，那么冒泡阶段反之，会从最内层触发的那个元素开始往外层的父级元素一直冒泡...并且事件的触发是先捕获，在冒泡。 阻止事件冒泡 事件的冒泡会让我们实现某些功能的时候产生阻碍，那么我们怎么怎么阻止事件的冒泡呢，这个时候就会用到一个方法。...e.stopPropagation(); 当我们吧这个方法放到inner冒泡阶段的下面的时候，神奇的事情发生了，当代码执行到这里，默认直接把冒泡的事件给阻止了，这时候会呈现出这个样子。...这样就成功的阻止了事件的冒泡，是不是很神奇，那么我们阻止事件冒泡还有别的方法吗，答案是肯定的，这时候就得了解一下我们的event对象了,我们打印一下event对象，如下： 打印发现当我们触发事件时，
一个浏览器通常有几个常驻线程： 渲染引擎线程：顾名思义，该线程负责页面的渲染 JS引擎线程：负责JS的解析和执行 定时触发器线程：处理定时事件，比如setTimeout、setInterval 事件触发线程...渲染线程在执行任务的时候，JS引擎线程会被挂起。因为JS可以操作DOM，若在渲染中JS处理了DOM，浏览器可能就不知所措了。 2....JS引擎 通常讲到浏览器的时候，我们会说到两个引擎：渲染引擎和JS引擎。...JS引擎可以说是JS虚拟机，负责JS代码的解析和执行。...之所以说JavaScript是单线程，就是因为浏览器在运行时只开启了一个JS引擎线程来解析和执行JS。那为什么只有一个引擎呢？如果同时有两个线程去操作DOM，浏览器是不是又要不知所措了。
JS为什么是单线程的？ JS最初被设计用在浏览器中，那么想象一下，如果浏览器中的JS是多线程的。...那么现在有2个进程，process1 process2，由于是多进程的JS，所以他们对同一个dom，同时进行操作。...2 JS为什么需要异步? 如果JS中不存在异步，只能自上而下执行，如果上一行解析时间很长，那么下面的代码就会被阻塞。...对于用户而言，阻塞就意味着"卡死"，这样就导致了很差的用户体验 3 JS单线程又是如何实现异步的呢？ ...是通过的事件循环(event loop)，理解了event loop机制，就理解了JS的执行机制。
JS 是单线程 JavaScript语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。...这样所导致的问题是： 如果 JS 执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉。 2....于是，JS 中出现了同步任务和异步任务。 同步 前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的。...JS中所有任务可以分成两种，一种是同步任务（synchronous），另一种是异步任务（asynchronous）。 ...JS执行机制（事件循环） ? ? 4.
JS内存机制 js具有自动垃圾回收机制，周期性的找出那些不再继续使用的变量，然后释放其占用的内存。 所以在闭包中，如果引用了外部的变量，则无法进行释放和回收，造成内存泄漏。 2....堆和栈 js的内存，分为堆内存和栈内存。 2.1 栈内存 存储基本数据类型：Number、String、Null、Undefined、Boolean、Symbol、引用类型的指针。
JS执行机制 以下代码执行的结果是什么？...这样所导致的问题是： 如果 JS 执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉。...于是，JS 中出现了同步任务和异步任务。 同步 前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的。...1.3 JS执行机制（事件循环） 1. 先执行执行栈中的同步任务。 2. 异步任务（回调函数）放入任务队列中。 3....由于主线程不断的重复获得任务、执行任务、再获取任务、再执行，所以这种机制被称为事件循环（ event loop）。
JS 是单线程 JavaScript语言的一大特点就是单线程，也就是说，同-个时间只能做一件事。...这样所导致的问题是： 如果 JS 执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉。 2....于是，JS 中出现了同步任务和异步任务。 同步 前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的。...JS中所有任务可以分成两种，一种是同步任务（synchronous），另一种是异步任务（asynchronous）。 ...JS执行机制（事件循环） ? ? 由于主线程不断的重复获得任务、执行任务、再获取任务、再执行，所以这种机制被称为事件循环( event loop) .
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
