事件函数列表 blur() 元素失去焦点 focus() 元素获得焦点 click() 鼠标单击 mouseover() 鼠标进入（进入子元素也触发） mouseout() 鼠标离开（离开子元素也触发）...写一个简单的两个嵌套div来演示一下看看，如下： ? ? 进入子元素也会触发mouseover()事件，那么如果#small的div没有嵌套在里面是否会触发呢？ 这样应该就不会。 ?...这样就像是类似事件冒泡，不过是子元素将mouseover()传递冒泡给父元素，就算子元素没在#big里面，也会触发这个事件。...果然，这个子元素也是会触发mouseout()事件的。 mouseenter() 鼠标进入（进入子元素不触发） 上面两个事件都是具备事件冒泡的特性，看看这个有没有，如下： ? ?...当两个元素嵌套在一起的时候，只有父元素触发了事件。 下面来看看不在一起的时候。 ? ? 可以看到，#small div会将事件冒泡给#big div，导致触发mouseleave()事件。
捕获和冒泡 了解了什么是事件流之后，我们来看事件流是如何影响事件执行的： 事件流 事件流是事件在执行时的底层机制，主要体现在父子盒子之间事件的执行上。...，其祖先元素的单击事件也【相继触发】，这是为什么呢？... 事件流 事件流是事件在执行时的底层机制，主要体现在父子盒子之间事件的执行上。...） 阻止冒泡 阻止冒泡是指阻断事件的流动，保证事件只在当前元素被执行，而不再去影响到其对应的祖先元素。... 阻止冒泡 阻止冒泡是指阻断事件的流动，保证事件只在当前元素被执行，而不再去影响到其对应的祖先元素。
事件将被触发，而当我们再将鼠标移动到b元素时，由于冒泡会再次触发绑定在a元素上的MouseOver事件，再从b元素移出到a元素时会再次触发MouseOver事件。...MouseEnter事件，当我们鼠标移动到a上时，会执行a元素绑定的事件，当依次将鼠标移动到a、b、c的时候，同样会以此执行a、b、c的事件绑定函数，并且不会因为冒泡事件导致父元素事件的触发，当我们鼠标直接移动到...那么我们就可以认为其无论其子节点是否是Portal，像合成事件、Context这样的功能特性都是不变的，下面是一些使用React Portals需要关注的点: 事件冒泡会正常工作: 合成事件将通过冒泡传播到...React树的祖先，事件冒泡将按预期工作，而与DOM中的Portal节点位置无关。...事件触发情况，首先鼠标移动到a元素上，控制台打印a，符合预期，接下来鼠标移动到b元素上，控制台打印b，同样符合预期，那么接下来将鼠标移动到c，神奇的事情来了，我们会发现会先打印b再打印c，而不是仅仅打印了
如果单击了某个按钮，他们都认为单击事件不仅仅发生在按钮上，甚至也单击了整个页面。 但有意思的是，IE 和 Netscape 开发团队居然提出了差不多是完全相反的事件流的概念。...事件冒泡流 IE 的事件流叫做事件冒泡（event bubbling），即事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到较为不具体的节点（文档）。...处于目标阶段：事件在 div 上发生并处理，但是本次事件处理会被看成是冒泡阶段的一部分。 冒泡阶段：事件又传播回文档。 事件委托 上面介绍了事件冒泡流，事件冒泡一个最大的好处就是可以实现事件委托。...虽然上面的例子中好像问题也不大，但是想象一下如果这个列表有 100 个元素，那我们就需要添加 100 个事件监听器，这个工作量还是很恐怖的。 这个时候我们就可以利用事件代理来帮助我们解决这个问题。...事件冒泡（event bubbling），是指事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到较为不具体的节点（文档）。
什么是事件冒泡 在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播...事件冒泡的作用 事件冒泡允许多个操作被集中处理（把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子级元素上），它还可以让你在对象层的不同级别捕获事件。...事件冒泡的示例 编写三个嵌套的div，同时绑定click事件，来演示事件冒泡。 ?...只单单点击了一次黄色的div，但是却弹出了三个alert()，这种就如同冒泡一样，逐个从底部元素传递到上级的元素。...说明这个click()事件的传递并不是根据点击位置，而是根据html元素的嵌套。
label的嵌套 3.1、labe标签内不能再嵌套label 3.2、label只能包含一个input子孙（包含checkbox、text等元素）、button、select、textarea...元素 3.3、label嵌套时，事件的触发遵循冒泡原则 <input id="inputOne_inner" type="button" value...事件中阻止的冒泡，所以单击时只输出 ‘input……………….’。 ...4、for关联 4.1、for关联，在labe标签上的事件，会触发关联元素的相应事件（并且关联元素的冒泡阻止动作无效）： <label id="labeTow" for="inputTow"...labeTow会做如下输出(label会先触发自身的事件，然后触发关联元素相应的事件)： labelTow……………. inputTow…………… 单击inpuTow会做如输出： inputTow………
事件流描述的是从页面中接收事件的顺序。IE的事件流失事件冒泡，而Netspace的事件流失事件捕获。...事件冒泡 IE的事件流叫事件冒泡，即事件开始时，由具体的元素（文档中嵌套层次最深的节点）接收，然后向上传播到不具体的节点。...也就是说事件首先发生了div上，而div也就是我们单击的元素。然后事件按照dom向上传播，直至传播到document对象。所有浏览器都支持事件冒泡。...在dom事件流中，具体元素div在捕获阶段不会获取到事件，这意味着事件从document到html，到body就停止了。...下一个阶段处于目标阶段，于是事件在div上面发生，并在事件处理中被看成事件冒泡阶段的一部分。最后事件冒泡发生，并将事件回传到document。ie8以及更早的浏览器不支持Dom事件流。
上一篇讲到jQuery中的事件，深入学习了加载DOM和事件绑定的相关知识，这篇主要深入讨论jQuery事件中的合成事件、事件冒泡和事件移除等内容。 ...每次单击元素，依次触发指定的相应的函数，直到最后一个。随后的每次单击都重复对这几个函数的轮番调用。 ...再比如，假设网页上有两个元素，一个元素A嵌套在另一个元素B中，并且都被绑定了click事件，同时body元素上也绑定了click事件。...那么在单击子元素A的时候，会依次触发三个click事件；单击元素B的时候，会依次触发两个click事件。 ...显然移除元素上的所有事件是使用没有第二个参数的unbind()方法。 如果没有第一个参数，则移除所有绑定的事件；否则只删除该类型的事件。
DOM事件流 html中的标签都是相互嵌套的，我们可以将元素想象成一个盒子装一个盒子，document是最外面的大盒子。 当你单击一个div时，同时你也单击了div的父元素，甚至整个页面。 ...常情况下terget 和 this是一致的， 但有一种情况不同，那就是在事件冒泡时（父子元素有相同事件，单击子元素，父元素的事件处理函数也会被触发执行）， 这时候this指向的是父元素，因为它是绑定事件的元素对象...事件委托的原理 不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点。...（给父元素注册事件，利用事件冒泡，当子元素的事件触发，会冒泡到父元素，然后去控制相应的子元素。）...以上案例：给ul注册点击事件,然后利用事件对象的target来找到当前点击的li ,因为点击li,事件会冒泡到ul上, ul有注册事件,就会触发事件监听器。
A: p div B: div p C: p D: div 答案: A 如果我们单击p，我们会看到两个日志：p和div。在事件传播期间，有三个阶段：捕获，目标和冒泡。...默认情况下，事件处理程序在冒泡阶段执行（除非您将useCapture设置为true）。它从最深的嵌套元素向外延伸。
DOM事件流 html中的标签都是相互嵌套的，我们可以将元素想象成一个盒子装一个盒子，document是最外面的大盒子。 当你单击一个div时，同时你也单击了div的父元素，甚至整个页面。 ...那么是先执行父元素的单击事件，还是先执行div的单击事件 ？？？ 事件流描述的是从页面中接收事件的顺序。 事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流。...●事件冒泡: IE最早提出，事件开始时由最具体的元素接收,然后逐级向上传播到到DOM最顶层节点的过程。...常情况下terget 和 this是一致的， 但有一种情况不同，那就是在事件冒泡时（父子元素有相同事件，单击子元素，父元素的事件处理函数也会被触发执行）， 这时候this指向的是父元素，因为它是绑定事件的元素对象...js事件中的代理： ? 事件委托的原理 给父元素注册事件，利用事件冒泡，当子元素的事件触发，会冒泡到父元素，然后去控制相应的子元素。
10.冒泡和捕获（bubble和capture）以及目标target 当几个元素重合（必须元素嵌套，像12.2例子那样，元素不嵌套，则同样事件肯定先进入上层元素，因为理论上两个元素没重合，根本就是 两个独立的元素...，这时肯定事件先进入上层元素），事件先捕获(从底层向上层)，后冒泡（从上层向底层）。...最顶层的是target。...) nei.addEventListener('click',function(){alert("目标");},true); // 事件冒泡 ...',function(){alert("中冒泡");},false); // 事件捕获 wai.addEventListener('click',function()
事件流 ---- 最早的两大浏览器厂商(IE 及 Netscape)在如何在看待浏览器事件方面还是一致的。比如说，如果你单击了某个按钮，他们都认为单击事件不仅仅发生在按钮上。...换句话说，在单击按钮的同时，你也单击了按钮的容器元素，甚至也单击了整个页面。 事件流描述的是从页面中接收事件的顺序。...IE 的事件流是 事件冒泡流 Netscape 的事件流是 事件捕获流 事件冒泡 IE 的事件流叫做事件冒泡(event bubbling)，即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收...事件对象 ---- 在触发 DOM 上的某个事件时，会产生一个事件对象 event，这个对象中包含着所有与事件有关的信息。...也就是说，我们可以为整个页面指定一个 onclick 事件处理程序，而不必给每个可单击的元素分别添加事件处理程序。
(‘on’ + type, fn); 注:若绑定匿名函数，则无法解除 复制代码 事件处理模型 — 事件冒泡、捕获 事件冒泡： 结构上（非视觉上）嵌套关系的元素，会存在事件冒泡的功能，即同一事件， 自子元素冒泡向父元素...（自底向上） 复制代码 事件捕获： 结构上（非视觉上）嵌套关系的元素，会存在事件捕获的功能，即同一事件， 自父元素捕获至子元素（事件源元素）。...（自顶向下） IE没有捕获事件 触发顺序，先捕获，后冒泡 focus，blur，change，submit，reset，select 等事件不冒泡 复制代码 取消冒泡和阻止默认事件 取消冒泡： W3C标准...灵活 当有新的子元素时不需要重新绑定事件 复制代码 事件分类 鼠标事件 click、mousedown、mousemove、mouseup、contextmenu、 mouseover、mouseout...上的事件) scroll load
=false //这段代码，我们使用了捕获事件，由于inner是嵌套在outer中的 //所以我们知道当使用捕获的时候outer是应该首先捕获到这个事件的 //其次inner才能捕获到这个事件。...DOM事件流 事件流 1.先自顶向里一层一层地触发捕获，一直到当前元素，然后自里向顶一层一层触发冒泡。 2.最顶层是window。...例如，若用户单击了一个超链接，则该单击事件将从document节点转送到html元素，body元素以及包含该链接的p元素。...目标节点就是触发事件的DOM节点。例如，如果用户单击一个超链接，那么该链接就是目标节点（此时的目标节点实际上是超链接内的文本节点）。...冒泡（Bubbling）阶段 事件将沿着DOM树向上转送，再次逐个访问目标元素的祖先节点到document节点。该过程中的每一步。浏览器都将检测那些不是捕捉事件监听器的事件监听器，并执行它们。
前言 在JavaScript中，事件冒泡是一种常见的事件传播机制。它可以让嵌套的元素接收到父元素触发的事件。本文将介绍事件冒泡的概念，并提供处理事件冒泡的方式和示例代码。...事件冒泡的概念 事件冒泡是指当一个元素触发了某个事件（例如点击事件），该事件将从最内层的元素开始，逐级向外传播到父元素，直到传播到文档根节点。这种事件传播的过程就是事件冒泡。...事件冒泡的处理方式 在处理事件冒泡时，有两种常用的方式：停止事件冒泡和使用事件委托。 停止事件冒泡 通过停止事件冒泡，可以阻止事件继续向父元素传播。...通过事件冒泡，可以让嵌套的元素接收到父元素触发的事件。在处理事件冒泡时，可以采用停止事件冒泡和使用事件委托两种方式。...停止事件冒泡可以阻止事件继续向父元素传播，而事件委托利用事件冒泡的特性，将事件处理委托给父元素来管理，提高性能和代码的可维护性。
eventTarget（目标对象）上，当该对象触发指定的事件时，就会执行事件处理函数。...DOM事件流 html中的标签都是相互嵌套的，我们可以将元素想象成一个盒子装一个盒子，document是最外面的大盒子。 当你单击一个div时，同时你也单击了div的父元素，甚至整个页面。...那么是先执行父元素的单击事件，还是先执行div的单击事件 ？？？...常情况下terget 和 this是一致的，但有一种情况不同，那就是在事件冒泡时（父子元素有相同事件，单击子元素，父元素的事件处理函数也会被触发执行），这时候this指向的是父元素，因为它是绑定事件的元素对象...生活中的代理 js事件中的代理 事件委托的原理 给父元素注册事件，利用事件冒泡，当子元素的事件触发，会冒泡到父元素，然后去控制相应的子元素。
这就涉及到了事件流的概念。首先解释两个概念： 事件冒泡 IE的事件流叫事件冒泡，即事件开始时由最具体的元素(文档中嵌套层次最深的节点)接收，然后逐级向上传播到较为不具体的节点。...一个DOM事件分为三个阶段：捕获阶段、触发阶段、冒泡阶段。...，触发事件冒泡进入冒泡阶段，一直从触发的元素逐级想上传递，直至window元素。...事件在冒泡过程中会上传到父节点，因此可以把子节点的监听函数定义在父节点上，由父节点的监听函数统一处理多个子元素的事件，这种方式称为事件代理(Event delegation)。...mousedown事件与mouseup事件可以说click事件在时间上的细分，顺序是mousedown => mouseup => click。因此一个点击事件，通常会激发几个鼠标事件。
这在处理父子组件之间的事件通信时特别有用，可以防止事件从子组件冒泡到父组件，或者在一个元素上绑定多个事件处理函数时，阻止后续事件处理函数的执行。...以下是一些常见的使用场景： 防止事件冒泡: 这是 .stop 最常见的用途。当一个元素嵌套在另一个元素内部，并且两者都有相同的事件处理函数时，.stop 可以防止事件从子元素冒泡到父元素。...阻止父组件的事件监听器执行: 在 Vue.js 中，你可能有一个父子组件嵌套的场景，父组件可能会监听某些事件，而子组件可能也有自己的事件处理逻辑。...防止重复触发事件处理函数: 当一个元素上绑定了多个事件处理函数时，使用 .stop 可以防止事件继续传播到后续的事件处理函数，从而避免事件处理函数被多次触发。...总的来说，.stop 事件修饰符在需要控制事件传播行为，避免事件冒泡或者防止触发父级元素事件处理函数时非常有用。 最后，附上源码，感兴趣的小伙伴可以自己去试一试： <!
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
云直播
实时音视频
