前言 在JavaScript中，事件冒泡是一种常见的事件传播机制。它可以让嵌套的元素接收到父元素触发的事件。本文将介绍事件冒泡的概念，并提供处理事件冒泡的方式和示例代码。...事件冒泡的处理方式 在处理事件冒泡时，有两种常用的方式：停止事件冒泡和使用事件委托。 停止事件冒泡 通过停止事件冒泡，可以阻止事件继续向父元素传播。...在事件处理函数中，可以使用event.stopPropagation()方法来停止事件冒泡。调用该方法后，事件将不再传播到父元素。...使用事件委托 事件委托是一种将事件处理程序绑定到父元素而不是每个子元素的技术。通过事件委托，可以利用事件冒泡的特性，将事件处理委托给父元素来管理。...通过事件冒泡，可以让嵌套的元素接收到父元素触发的事件。在处理事件冒泡时，可以采用停止事件冒泡和使用事件委托两种方式。
上面这段html代码中，单击了页面中的 元素， 在冒泡型事件流中click事件传播顺序为 —》—》—》document 在捕获型事件流中click事件传播顺序为...DOM标准规定事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。 事件捕获阶段：实际目标（ ）在捕获阶段不会接收事件。也就是在捕获阶段，事件从document到再到就停止了。...处于目标阶段：事件在 上发生并处理。但是事件处理会被看成是冒泡阶段的一部分。 冒泡阶段：事件又传播回文档。...js事件代理则是一种简单有效的技巧，通过它可以把事件处理器添加到一个父级元素上，从而避免把事件处理器添加到多个子级元素上。...事件代理的原理用到的就是事件冒泡和目标元素，把事件处理器添加到父元素，等待子元素事件冒泡，并且父元素能够通过target（IE为srcElement）判断是哪个子元素，从而做相应处理。
简单伪类选择器 伪类选择器 说明 :not(selector) 选择除了某个选择器之外的所有元素 :first或first() 选择某元素的第一个元素 :last或last() 选择某元素的最后一个元素...:odd 选择某元素的索引值为奇数的元素 :even 选择某元素的索引值为偶数的元素 :eq(index) 选择给定索引值的元素 :lt(index) 选择小于索引值的元素 :gt(index) 选择所有大于索引值的元素...stop（）方法用于在动画或效果完成前对他们进行停止，stop方法适用于所有的jQuery特效。...触发方式 返回值 keydown 在键盘上按下某键时触发，一直按一直触发 返回键盘代码 keypress 在键盘上按下一个能产生字符的按键时触发 返回ASCII码 keyup 松开某一键时触发 返回键盘代码...绑定与接触事件 绑定事件 绑定事件就是将页面中的元素事件类型与其在收到该事件之后期望进行的操作联系到一起。
那么是先执行父元素的单击事件，还是先执行div的单击事件 ？？？ 事件流描述的是从页面中接收事件的顺序。 事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流。...；之后会产生泡泡，会在最低点（ 最具体元素）之后漂浮到水面上，这个过程相当于事件冒泡。...事件冒泡:开始时由最具体的元素接收，然后逐级向上传播到到DOM最顶层节点。...说白了就是，不给子元素注册事件，给父元素注册事件，把处理代码在父元素的事件中执行。 生活中的代理： ? js事件中的代理： ?...事件委托的原理 不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点。
途中经过各个层次的DOM节点，并在各节点上触发捕获事件，直到到达事件的目标节点。捕获阶段的主要任务是建立传播路径，在冒泡阶段，事件会通过这个路径回溯到文档跟节点。 ...事件在目标节点上被触发，然后会逆向回流，直到传播至最外层的文档节点。 （3）冒泡阶段（Bubble Phase） 事件在目标元素上触发后，并不在这个元素上终止。...结果是该节点的某后代节点触发某事件，由于事件冒泡，该DOM节点事件也会触发，执行了回调函数，这样就违背了最初的本意了。...（2）如何阻止事件冒泡 stopPropagation：告诉DOM事件停止冒泡 stopImmediatePropagation，它不仅停止冒泡，也会阻止这个元素上其它监听当前事件的处理程序触发。...然而,停止传播事件时要小心,因为你不知道是否有其它上层的DOM元素可能需要知道当前事件。 preventDefault，这个方法会阻止浏览器处理事件的默认行为。
今天想实现一个事件自动订阅到指定class的元素之上的功能。这句话很拗口，稍后解释！ 在翻阅了MDN上api说明，多明白了许多细节。...在查找事件的来源元素时，chrome有 srcElement 属性， 火狐却没有 srcElement 属性，必须用target。 ...区别就是：preventDefault:当事件有cancelable=true时， 事件就取消了 stopPropagation :事件停止向DOM的上级传播。...stopImmediatePropagation: 在当前事件执行的函数中，立即停止传播。...假设让el来接收一个blockClicked事件，写法如下： //首先 el.addEventListener("blockClicked", handler, false); //在之后的时间，你进行其它操作时
那么是先执行父元素的单击事件，还是先执行div的单击事件 ？？？ 事件流描述的是从页面中接收事件的顺序。 事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流。...●事件冒泡: IE最早提出，事件开始时由最具体的元素接收,然后逐级向上传播到到DOM最顶层节点的过程。...；之后会产生泡泡，会在最低点（ 最具体元素）之后漂浮到水面上，这个过程相当于事件冒泡。...事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流。 注意 1. Js代码中只能执行捕获或者泡其中的一个阶段。 2. onclick和attachEvent 只能得到冒泡阶段。...常情况下terget 和 this是一致的， 但有一种情况不同，那就是在事件冒泡时（父子元素有相同事件，单击子元素，父元素的事件处理函数也会被触发执行）， 这时候this指向的是父元素，因为它是绑定事件的元素对象
jQuery对这个事件对象进行了必要的扩展，从而在不论什么浏览器中都能够使用这个属性。通过.target，能够确定DOM中首先接收到事件的元素（即实际被单击的元素）。...停止事件传播 事件对象还提供了一个.stopPropagation()方法，该方法能够全然阻止事件冒泡。...那么在事件对象上调用.stopPropagation()方法也无济于事，由于默认操作不是在正常的事件传播流中发生的。...在这样的情况下，.preventDefault()方法则能够在触发默认操作之前终止事件 。 提示 当在事件的环境中完毕了某些验证之后，一般会用到.preventDefault()。比如。...事件传播和默认操作是相互独立的两套机制，在二者不论什么一方发生时，都能够终止还有一方。假设想要同一时候停止事件传播和默认操作，能够在事件处理程序中返回false。
A: appendChild 放置到某元素最后 attribute 属性 addEventListener 添加侦听器 assign 赋值 alert 弹出框 append 添加 appendTo 添加到...innerHeight 内部高度 innerWidth 内部宽度 in 从0开始加速的缓动 inOut 前半段从0开始加速，后半段减速到0的缓动 infinity 无线循环 insertBefore 插入到某元素前...获取元素自身高度 onload 在装载时 onclick 在点击时 ondblclick 在双击时 onmouseover 在鼠标进入时 onmouseout 在鼠标离开时 onmousemove 在鼠标移动时...在改变时 onfocus 在获得焦点时 onblur 在失去焦点时 onscroll 窗口滚动事件 onresize 窗口大小监听事件 out 减速到0的缓动 onStart 开始事件 onComplete...完成事件 onStop 停止事件 onUpdate 更新事件 object 对象 optional 可选的 oblique 一种斜体 orange 橙色 one 一个 outer 外面的
事件冒泡 ❝当一个子元素的事件被触发的时候（例如onclick事件）， 该事件会从事件（被电击的元素） 开始逐个向上传播，触发父级元素的点击事件 ❞ 上图吧 ?...（1）li （2）ul （3）body （4）html （5）document 也就是说click事件首先在 li 元素上触发， 而这个元素就是我们点击的元素，然后点击事件沿着DOM树向上传播 在每一个节点上触发...这里写图片描述 事件委托 ❝什么是事件委托： ❞ ❝事件委托——给父元素绑定事件，用来监听子元素的冒泡事件，并找到是哪个子元素的事件。...事件监听器会分析从子元素冒泡上来的事件，找到是哪个子元素的事件。...//target表示在事件冒泡中触发事件的源元素，在IE中是srcElement 6.
writeln() 等同于 write() 方法，不同的是在每个表达式之后写一个换行符。...element.appendChild() 向元素添加新的子节点，作为最后一个子节点。 element.attributes 返回元素属性的 NamedNodeMap。...element.lastChild 返回元素的最后一个子元素。 element.namespaceURI 返回元素的 namespace URI。...onmouseout 鼠标从某元素移开。 onmouseover 鼠标移到某元素之上。 onmouseup 鼠标按键被松开。 onreset 重置按钮被点击。...cancelable 返回布尔值，指示事件是否可拥可取消的默认动作。 currentTarget 返回其事件监听器触发该事件的元素。 eventPhase 返回事件传播的当前阶段。
DOM事件流 事件流描述的是从页面中接收事件的顺序。 事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即 DOM 事件流。...冒泡阶段 我们向水里面扔一块石头，首先它会有一个下降的过程，这个过程就可以理解为从最顶层向事件发生的最具体元素（目标点）的捕获过程；之后会产生泡泡，会在最低点（ 最具体元素）之后漂浮到水面上，这个过程相当于事件冒泡...事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即 DOM 事件流。 注意 1. JS 代码中只能执行捕获或者冒泡其中的一个阶段。 ...常情况下terget 和 this是一致的， 但有一种情况不同，那就是在事件冒泡时（父子元素有相同事件，单击子元素，父元素的事件处理函数也会被触发执行）， 这时候this指向的是父元素，因为它是绑定事件的元素对象...什么是事件委托 把事情委托给别人，代为处理。 事件委托也称为事件代理，在 jQuery 里面称为事件委派。 说白了就是，不给子元素注册事件，给父元素注册事件，把处理代码在父元素的事件中执行。
1.窗体事件 例如 onload事件：当页面完全加载完成之后（包括图像，js文件，css文件等）该事件就会被触发。 <!...onkeyup 某个键盘的键被松开 onload 某个页面或者图像被完成加载 onmousedown 某个鼠标按键被按下 onmousemove 鼠标被移动 onmouseout 鼠标从某元素移开 onmouseover...鼠标被移到某元素之上 onmouseup 某个鼠标按键被松开 onreset 重置按钮被单击 onresize 窗口或者框架被调整尺寸 onselect 文本被选定 onsubmit 提交按钮被单击...onunload 用户退出页面 ---- 6.事件冒泡和事件捕捉 事件发生就会产生事件流，当一个HTML元素产生一个事件时，该事件会在元素节点和根节点之间按特定的顺序转播，类似于递和归。...捕捉型事件传播： ? ---- 冒泡型事件传播 ? ----
这个方法可以确保事件先冒泡后获取，因为我们将监听器添加到父元素上，而不是每个子元素上。 使用 setTimeout() 另一种方法是将事件处理程序延迟一小段时间再执行。...在此期间，事件将继续向上传播并且可以被其他元素捕获。然后，事件处理程序将以一种稍微延迟的方式执行，以便事件有时间传播到父元素。...这个方法可以确保事件先冒泡后获取，因为事件处理程序在一小段时间后执行，以便事件有时间传播到父元素。...这确保了事件先冒泡后获取，因为我们将监听器添加到父元素上，而不是每个子元素上。 总结 在事件处理中，事件冒泡和事件捕获是两种常见的事件传播机制。默认情况下，事件先捕获后冒泡。...由于事件冒泡会在整个文档中传播，因此在父元素上添加事件监听器可以确保事件先冒泡后获取。 使用 setTimeout()：将事件处理程序延迟一小段时间再执行，以确保事件有时间传播到父元素。
作用域的层级结构模拟应用中dom的层级结构；作用域能够监视表达式和事件传播。...在控制台中获取当前元素所在的作用域，需要执行：angular.element(0).scope() or just type scope 作用域内的事件传播： 作用域可以类似dom事件一样的传播事件，事件可以广播到作用域的子作用域或者是发到上层的作用域...这将停止传播digest调用到子作用域、并且允许内存通过使用子作用域模块去被垃圾回收器给回收。...这通常使用setTimeout(0)实现，但是setTimeout(0)方式慢，并且因为浏览器渲染页面时在事件执行之后，所以可能视图还会闪烁。...这之后是浏览器重新渲染dom去呈现出变化。
"); 给某元素设置内容 $("元素名称").removeAttr("属性名称") 给某元素删除指定的属性以及该属性的值 $("元素名称").removeClass("class") 给某元素删除指定的样式...在每个对象上，这个事件处理函数只会被执行一次。其他规则与bind()函数相同。 type(String) : 事件类型。...trigger( type, [data] ) 在每一个匹配的元素上触发某类事件。...这是一个Ajax事件 当所有AJAX请求都停止时，隐藏loading信息。...queue( ) 取得第一个匹配元素的动画序列的引用(返回一个内容为函数的数组) queue( callback ) 在每一个匹配元素的事件序列的末尾添加一个可执行函数，作为此元素的事件函数 queue
这就涉及到了事件流的概念。首先解释两个概念： 事件冒泡 IE的事件流叫事件冒泡，即事件开始时由最具体的元素(文档中嵌套层次最深的节点)接收，然后逐级向上传播到较为不具体的节点。...[image.jpg] 事件捕获阶段为事件的触发奠定了基础，当DOM事件发生的时候，首先由最不具体的window结点向下捕获那个具象元素（触发事件的元素），事件捕获之后就开始执行绑定在上面的函数；当函数执行完毕...事件在冒泡过程中会上传到父节点，因此可以把子节点的监听函数定义在父节点上，由父节点的监听函数统一处理多个子元素的事件，这种方式称为事件代理(Event delegation)。...在 HTML5 中鼠标有了新的事件，如下表格： 属性 描述 ondrag 元素被拖动时运行的脚本。...Form 事件 下面是Form事件的常见类型： 属性 描述 onblur 元素失去焦点时运行的脚本。 onchange 在元素值被改变时运行的脚本。 onfocus 当元素获得焦点时运行的脚本。
事件委托也称事件代理，在jQuery里面就称为事件委派。 事件委托就是把事件监听放在祖先元素（如父元素、爷爷元素）上。...由于事件会在冒泡阶段向上传播到父节点，因此可以把子节点的监听函数定义在父节点上，由父节点的监听函数统一处理多个子元素的事件。这种方法叫做事件的代理。...事件委托的原理 不是给每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利事件用冒泡的原理影响设置每个子节点 事件委托作用 绑定事件越多，浏览器内存占用越大，严重影响性能 只操作一次DOM...dianwo100 借助事件代理的方法：不需要再每个li项里面添加点击事件，只需要给父容器ul绑定方法即可，不管点击哪个li项，都会根据冒泡传播的传递机制，触发点击事件，执行对应的处理方法...image.png 事件委托的优点： 1.减少事件注册，节省内存。 在table上代理所有td的click事件。 在ul上代理所有li的click事件。 2.可以监听动态生成的元素。
.stop 阻止事件继续传播 .prevent 阻止标签的默认事件发生 .capture .self .once 事件只会发生一次 .passive...-- 阻止单击事件继续传播 --> <!...上图中的.once 事件中，页面结果就是点一次涨一岁后再点击就没有用了； .stop 事件中，当鼠标移动到“停止移动”处时左边位置就不再变化了； .prevent 事件中，当我们点击a标签后，只能执行alert...方法输出hello world，不能跳转到百度了； 按键的事件修饰符： 在监听键盘事件时，我们经常需要检查详细的按键。...Vue 允许为 v-on 在监听键盘事件时添加按键修饰符： 意思就是只有在按下enter键之后才能触发后面的方法 <!
b>”); 给某元素设置内容 $(”元素名称”).removeAttr(”属性名称”) 给某元素删除指定的属性以及该属性的值 $(”元素名称”).removeClass(”class”) 给某元素删除指定的样式...在每个对 象上，这个事件处理函数只会被执行一次。其他规则与bind()函数相同。 trigger(type, [data]) 在每一个匹配的元素上触发某类事件。...(fn) 某个鼠标按键被按下 几乎所有元素 mousemove(fn) 鼠标被移动 几乎所有元素 mouseout(fn) 鼠标从某元素移开 几乎所有元素 mouseover(fn) 鼠标被移到某元素之上...这是一个Ajax事件 当所有AJAX请求都停止时，隐藏loading信息。...”) $(”div span: first - child”) 匹配父元素的第1个子元素 $(”div span: last - child”) 匹配父元素的最后1个子元素 $(”div button
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
