如何让事件先冒泡后捕获

最新推荐文章于 2023-03-25 15:29:27 发布
最新推荐文章于 2023-03-25 15:29:27 发布
阅读量2.3k 收藏 3
点赞数
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/psxiao/p/11540263.html

在DOM标准事件模型中，是先捕获后冒泡。但是如果要实现先冒泡后捕获的效果，对于同一事件，监听捕获和冒泡，分别对应响应的处理函数，监听到捕获事件，先暂缓执行，直到冒泡事件被捕获后再执行捕获事件。

转载于:https://www.cnblogs.com/psxiao/p/11540263.html

Sugarman0620
关注
DOM事件阶段以及事件捕获与事件冒泡先后执行顺序(图文详解)
01-19
俗话说的好，好记性不如个烂笔头，这么多技术文章如果不去吃透，技术点很快就容易忘掉，下面是小编平时浏览的技术文章，整理的笔记，分享给大家。 开发过程中我们都希望使用别人成熟的框架，因为站在巨人的肩膀上会使得我们开发的效率大幅度提升。不过，我们也应该、必须了解其基本原理。比如DOM事件，jquery框架帮我们为我们封装和抽象了各浏览器的差异行为，为事件处理带来了极大的便利。不过浏览器逐步走向统一和标准化，我们可以更加安全地使用官方规范的接口。因为只有获得众多开发者的芳心，浏览器才会走得更远。正如我们现在使用低版本浏览器打开某些页面时，会告知我们要用chrome等高级浏览器访问。不过这是一个革命的过
事件：事件流、事件对象、事件委托、如何先冒泡后捕获
mkbird的博客
05-03 594
文章目录事件事件流事件对象事件委托（代理、委派） 事件 事件流 事件流描述的是页面接收事件的顺序（比如点击） 可以理解为向水底扔了石头，石头向下为捕获阶段，向上冒泡为冒泡阶段，同理鼠标点击后DOM先向下捕获这次点击事前，捕获后再向上冒泡，中间经过的对应事件处理函数都会被触发 实际开发过程都用冒泡，即没有参数 有些事件没有冒泡，如onblur，onfocus，onmouseenter，onmouseleave 事件冒泡有时会带来麻烦，比如给son和father添加点击事件，点击son，会先弹出son，再弹
实现先冒泡后捕获
EEstefan的博客
11-14 1818
事件委托 简介：事件委托指的是，不在事件的发生地（直接dom）上设置监听函数，而是在其父元素上设置监听函数，通过事件冒泡，父元素可以监听到子元素上事件的触发，通过判断事件发生元素DOM的类型，来做出不同的响应。 利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。 举例：最经典的就是ul和li标签的事件监听，比如我们在添加事件时候，采用事件委托机制，不会在li标签上直接添加，而是在ul父元素上添加。 好处：比较合适动态元素的绑定，新添加的子元素也会有监听函数，也可以有事件触发机制。 事件先冒
彻底弄懂JS事件委托的概念和作用
weixin_30338481的博客
08-18 333
一、写在前头 接到某厂电话问什么是事件代理的时候,一开始说addEventListener,然后他说直接绑定新的元素不会报dom不存在的错误吗？然后我就混乱了,我印象中这个方法是可以绑定新节点的。后面才知道,原来他要考察的是事件委托(代理)的原理,他指的是未来还不清楚会创建多少个节点,所以没办法实现给他们注册事件。 二、事件委托(事件代理)的作用? 为了方便理解,我先把事件委托的作用写一下。...
前端系列第2集-如何让事件先冒泡后获取?
程序员哆啦A梦，蓝胖子
03-25 313
事件冒泡是指当一个元素上的事件被触发后，该事件会从该元素开始向上冒泡，直到传播到文档对象，并且可以被其他元素捕获。默认情况下，事件是先捕获后冒泡。如果希望事件先冒泡后获取，可以使用以下两种方法之一：使用事件委托（Event Delegation）事件委托是一种通过在其父元素上监听事件并利用事件冒泡来处理其子元素上的事件的技术。例如，如果有一个包含多个按钮的列表，并且希望在单击每个按钮时执行相同的操...
如何让事件先冒泡后捕获是什么意思
06-07
而如果想先执行冒泡传递再执行捕获传递，可以在添加事件监听器时，将传递方式设置为true。 例如： ```javascript element.addEventListener('click', myFunction, true); ``` 其中，第三个参数为true，表示在捕获...
javascript 中事件冒泡和事件捕获机制的详解
01-19
javascript 中事件冒泡和事件捕获机制的详解 二者作用：描述事件触发时序问题 事件捕获：从document到触发事件的那个节点，即自上而下的去触发事件—由外到内 事件冒泡：自下而上的去触发事件—由内到外 绑定事件...
事件捕获与冒泡顺序
01-31 492
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title> <script src="https://cdn.staticfile.org/vue/2.2.2/vu...
js事件冒泡和事件捕获详解
aiguke3395的博客
03-25 324
Javascript与HTML之间的交互是通过事件实现。 一、事件流 事件，是文档或浏览器窗口中发生的一些特定的交互瞬间。事件流，描述的是页面中接受事件的顺序。IE9，chrome，Firefox，Opera，Safari均实现了DOM2级规范中定义的标准DOM事件，而IE8和IE8以下版本仍然保留专有的事件处理方式。 事件冒泡 事件冒泡是由IE开发团队提出来的，即事件开始时由最...
js事件冒泡和捕获
zxyong的博客
11-01 568
彻底弄懂js中事件冒泡和捕获是怎么回事 一、DOM事件触发经历的三个阶段 1、首先我们要弄清楚当一个dom事件被触发时，它不仅仅只是单纯地在自身对象上触发一次，而是经历了三个不同的阶段：???? 捕获阶段：先由文档的根节点document往事件触发对象，从外向内捕获事件对象； 目标阶段：到达目标事件位置，触发事件； 冒泡阶段：再从目标事件位置往文档的根节点方向回溯，从内向外冒泡事件对象。 2、下面贴上一...
事件冒泡和事件捕获的顺序
roongyan92的博客
08-01 882
给同一个元素注册点击事件，测试事件冒泡和事件捕获的顺序，代码如下： <div class='container'> <div class='wapper'> <div class='context'> 点击你试试 </div> </div> </div> <script> ...
事件冒泡和事件捕获的执行顺序
搬砖小鱼，请多指教呦
05-19 3730
之前看到过很多文章，文章都统一的说事件捕获执行在前，冒泡执行在后，实际上这是不严谨的，今天刚好有时间我们来捋一捋，直接举例子 <div id="div1"> 我是div1 <div id="div2">我是div2 <div id="div3"> 我是div3 <div id="div4">我是div4</div>
事件冒泡和捕获的执行顺序
weixin_43312083的博客
10-10 844
addEventListener() 方法 addEventListener() 方法用于向指定元素添加事件句柄。element.addEventListener(event, function, useCapture)， 其中的event，必须。字符串，指定事件名。 不要使用 "on" 前缀。 例如，使用 "click" ,而不是使用 "onclick"。 function 必须。指定要事件触发时执行的函数 useCapture 可选。布尔值，指定事件是否在捕获或冒泡阶段执行。（默认false..
JS HTML DOM中的事件冒泡和事件捕获
chesterblue的博客
11-13 382
冒泡：先触发内部元素事件，再触发外部元素事件 捕获：先触发外部元素事件，再触发内部元素事件 例：将&lt;跨度&gt;元素插入到&lt;DIV&gt;元素中，如果用单击事件触发，那么冒泡就先触发&lt;跨度&gt;，再触发的&lt;DIV&gt;，捕获则相反。 下面为简单的代码讲解，可以自己运行感受。 &lt;div id="chufa1"&gt; &lt;span..
事件冒泡与事件捕获
宁静致远
07-03 833
事件传递有两种方式：冒泡与捕获。事件传递定义了元素事件触发的顺序。 如果你将 &lt;p&gt; 元素插入到 &lt;div&gt; 元素中，用户点击 &lt;p&gt; 元素, 哪个元素的 "click" 事件先被触发呢？在 冒泡 中，内部元素的事件会先被触发，然后再触发外部元素，即： &lt;p&gt; 元素的点击事件先触发，然后会触发 &lt;div&gt; 元素的点击事件。在 捕获 中，外...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值