精华内容
下载资源
问答
  • 如何让事件先冒泡后捕获

    千次阅读 2019-09-29 18:00:15
    但是如果要实现先冒泡后捕获的效果,对于同一事件,监听捕获冒泡,分别对应响应的处理函数,监听到捕获事件,暂缓执行,直到冒泡事件被捕获后再执行捕获事件。 转载于:...

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

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

    展开全文
  • 如何让事件先冒泡后捕获 事件委托: 又叫事件代理,利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。 原理: 事件冒泡机制,从最深的节点开始,然后逐步向上传播事件。 作用: ①支持为...

    事件模型:事件委托、代理?如何让事件先冒泡后捕获

    事件委托:

    又叫事件代理,利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。

    原理:

    事件冒泡机制,从最深的节点开始,然后逐步向上传播事件。

    作用:

    ①支持为同一个DOM元素注册多个同类型事件;

    ②可将事件分为事件捕获和事件冒泡。

    addEventListener(event,function,useCapture布尔值)
    默认为false冒泡,true为捕获
    
    attachEvent() 
    //IE8及IE更早版本
    
     detachEvent() 
    //移除事件监听
    
    //不使用事件捕获
    window.onload = function(){
        	let oBox = document.getElementById("box");
        	oBox.onclick = function(){
        		alert(1);   //不触发
        }
        	oBox.onclick = function(){
        		alert(2);   //触发
        	}
    }
    
    //使用事件捕获
    window.onload = function(){
        oBox.addEventListener("click",function(){
        	alert(1);   //触发
        })
    	oBox.addEventListener("click",function(){
    	alert(2);   //触发
    	})
    }

     

    事件捕获:

    当一个事件触发后,从Window对象触发,不断经过下级节点,直到目标节点。在事件到达目标节点之前的过程就是捕获阶段。所有经过的节点,都会触发对应的事件。

    当为事件捕获(useCapture:true)时,先执行body的事件,再执行div的事件

    事件冒泡:

    当事件到达目标节点后,会沿着捕获阶段的路线原路返回。同样,所有经过的节点,都会触发对应的事件。

    当为事件冒泡(useCapture:false)时,先执行div的事件,再执行body的事件

    先冒泡后捕获:

    根据w3c标准,应先捕获再冒泡。若要实现先冒泡后捕获,给一个元素绑定两个addEventListener,其中一个第三个参数设置为false(即冒泡),另一个第三个参数设置为true(即捕获),调整它们的代码顺序,将设置为false的监听事件放在设置为true的监听事件前面即可。

     

     

    展开全文
  • 实现先冒泡后捕获

    2021-11-14 16:17:58
    事件委托 简介:事件委托指的是,不在事件的发生地(直接dom)上设置监听函数,而是在其父元素上设置监听函数,通过事件冒泡,父元素可以监听到子元素上事件的触发,通过判断事件发生元素DOM的类型,来做出...事件

    事件委托

    简介:事件委托指的是,不在事件的发生地(直接dom)上设置监听函数,而是在其父元素上设置监听函数,通过事件冒泡,父元素可以监听到子元素上事件的触发,通过判断事件发生元素DOM的类型,来做出不同的响应。
    利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。

    举例:最经典的就是ul和li标签的事件监听,比如我们在添加事件时候,采用事件委托机制,不会在li标签上直接添加,而是在ul父元素上添加。

    好处:比较合适动态元素的绑定,新添加的子元素也会有监听函数,也可以有事件触发机制。

    事件先冒泡后捕获

    事件捕获

    当一个事件触发后,从Window对象触发,不断经过下级节点,直到目标节点。在事件到达目标节点之前的过程就是捕获阶段。所有经过的节点,都会触发对应的事件。

    当为事件捕获(useCapture:true)时,先执行body的事件,再执行div的事件

    事件冒泡

    当事件到达目标节点后,会沿着捕获阶段的路线原路返回。同样,所有经过的节点,都会触发对应的事件。
    当为事件冒泡(useCapture:false)时,先执行div的事件,再执行body的事件
    默认为false

    先冒泡后捕获

    根据w3c标准,应先捕获再冒泡。若要实现先冒泡后捕获,给一个元素绑定两个addEventListener,其中一个第三个参数设置为false(即冒泡),另一个第三个参数设置为true(即捕获),调整它们的代码顺序,将设置为false的监听事件放在设置为true的监听事件前面即可。

    还有一种,在执行捕获时,设置setTimeOut(方法名,0),把它放到下一个宏任务

    展开全文
  • js事件冒泡捕获

    2019-11-01 14:19:14
    捕获阶段:由文档的根节点document往事件触发对象,从外向内捕获事件对象; 目标阶段:到达目标事件位置,触发事件; 冒泡阶段:再从目标事件位置往文档的根节点方向回溯,从内向外冒泡事件对象。 2、下面贴上一.....

    👉 彻底弄懂js中事件冒泡和捕获是怎么回事

    一、DOM事件触发经历的三个阶段

    1、首先我们要弄清楚当一个dom事件被触发时,它不仅仅只是单纯地在自身对象上触发一次,而是经历了三个不同的阶段:👇
    捕获阶段:先由文档的根节点document往事件触发对象,从外向内捕获事件对象;
    目标阶段:到达目标事件位置,触发事件;
    冒泡阶段:再从目标事件位置往文档的根节点方向回溯,从内向外冒泡事件对象。

    2、下面贴上一张 w3c解释事件流 的图:
    eventflow

    二、冒泡和捕获

    1、当我们注册一个事件时,事件默认使用冒泡事件流,不使用捕获事件流。

    element.addEventListener(event, function, useCapture)
    

    event: 必须。字符串,指定事件类型。
    function: 必须。指定要事件触发时执行的函数。
    useCapture: 可选。布尔值,指定事件是否在捕获或冒泡阶段执行。false为冒泡(默认),true为捕获。

    2、下面在代码中验证,直接附上全部代码。(可以粘到自己编辑器中运行、尝试一下)

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>event</title>
    	<style>
    		#one{
    			width: 600px;
    			height: 600px;
    			background-color: green;
    		}
    		#two{
    			width: 400px;
    			height: 400px;
    			background-color: yellow;
    		}
    		#three{
    			width: 200px;
    			height: 200px;
    			background-color: deepskyblue;
    		}
    	</style>
    </head>
    <body>
    	<div id="one">one
    		<div id="two">two
    			<div id="three">three</div>
    		</div>
    	</div>
    
    	<script>
    		var one = document.getElementById('one'),
    			two = document.getElementById('two'),
    			three = document.getElementById('three');
    
    		one.addEventListener('click', function(){
    			console.log('one捕获')
    		}, true)
    		two.addEventListener('click', function(){
    			console.log('two捕获')
    		}, true)
    		three.addEventListener('click', function(){
    			console.log('three捕获')
    		}, true)
    
    		one.addEventListener('click', function(){
    			console.log('one冒泡')
    		}, false)
    		two.addEventListener('click', function(){
    			console.log('two冒泡')
    		}, false)
    		three.addEventListener('click', function(){
    			console.log('three冒泡')
    		}, false)
    
    	</script>
    </body>
    </html>
    

    3、当我们点击three时,可以看到确实是先由外向内事件捕获,一直到事发元素,再由内向外冒泡到根节点上。
    capture
    4、如果一个元素既注册了冒泡事件,也注册了捕获事件,则按照注册顺序执行。
    我们修改代码把冒泡事件放在捕获事件之前:

    		one.addEventListener('click', function(){
    			console.log('one冒泡')
    		}, false)
    		two.addEventListener('click', function(){
    			console.log('two冒泡')
    		}, false)
    		three.addEventListener('click', function(){
    			console.log('three冒泡')
    		}, false)
    		
    		one.addEventListener('click', function(){
    			console.log('one捕获')
    		}, true)
    		two.addEventListener('click', function(){
    			console.log('two捕获')
    		}, true)
    		three.addEventListener('click', function(){
    			console.log('three捕获')
    		}, true)
    

    再点击three,可以看到这次three先是执行冒泡后捕获的,由此可见一个元素同时注册了冒泡和捕获事件,则会按照注册顺序执行。
    capture

    三、阻止事件冒泡

    1、在很多时候我们并不需要元素绑定的事件向外冒泡,这时我们就要阻止事件的冒泡。
    阻止冒泡:w3c的方法是e.stopPropagation(),IE则是使用e.cancelBubble = true;
    我们再次修改代码,阻止three的事件冒泡:

    		three.addEventListener('click', function(){
    			console.log('three冒泡')
    			var e = e || window.event; // firefox下window.event为null, IE下event为null
    			// 阻止冒泡
    			if(e.stopPropagation){
    				e.stopPropagation()	//其他浏览器
    			}else{
    				e.cancelBubble = true //IE浏览器
    			}			
    		}, false)
    

    修改完代码后我们再次点击three,可以看到three的点击事件触发后就停止继续向外冒泡了;
    capture

    展开全文
  • 事件冒泡捕获的执行顺序

    万次阅读 多人点赞 2016-12-07 11:05:07
    给一个dom同时绑定两个点击事件,一个用捕获,一个用冒泡,会执行几次事件,会执行冒泡还是捕获
  • javascript, jquery的事件中都存在事件冒泡和事件捕获的问题,下面将两种问题及其解决方案做详细总结。 事件冒泡是一个从子节点向祖先节点冒泡的过程; 事件捕获刚好相反,是从祖先节点到子节点的过程。 给一个...
  • 事件冒泡捕获

    2021-03-21 17:01:43
    目标: 事件传递到目标,触发目标的点击事件,目标如果同时定义了 捕获事件,冒泡事件,其执行顺序是按照事件的绑定顺序,而不是先捕获冒泡冒泡: 目标事件触发,再向根节点传播,触发沿途祖先组
  • 提出事件流概念的正是IE和Netscape,但是前者提出的是我们常用的事件冒泡流,而者提出的是事件捕获流。 第一部分:事件冒泡  即事件开始由最具体的元素接收,然后逐级向上传播到较为不具体的节点(文档)。  ...
  • 一个DOM元素绑定两个事件,一个冒泡,一个捕获,则事件会执行多少次,执行顺序如何。 这导致了我对冒泡捕获又进一步深入的了解。(永远都在发现自己知识匮乏的日子中度过人生真是好抓急啊。) 首先冒泡捕获...
  • 抽空学习了下javascript和jquery的事件设计,收获颇大,总结此贴,和大家分享。 (一)事件绑定的几种方式 javascript给DOM绑定事件处理函数总的来说有2种方式:在... 方式1: ...<div id=”outestA” onclick=”var id
  • 提出事件流概念的正是IE和Netscape,但是前者提出的是我们常用的事件冒泡流,而者提出的是事件捕获流。 第一部分:事件冒泡 即事件开始由最具体的元素接收,然后逐级向上传播到较为不具体的节点(文档)。 下面举...
  • 谈起JavaScript的 事件,事件冒泡、事件捕获、阻止默认事件这三个话题,无论是面试还是在平时的工作中,都很难避免。 事件捕获阶段:事件从最上一级标签开始往下查找,直到捕获到事件目标(target)。 事件冒泡阶段:...
  • 防止冒泡捕获: W3C 的方法是 e.stopPropagation() IE的方法是 e.cancelBubble = true。 兼容模式 function stopBubble(e) { //如果提供了事件对象,则这是一个非IE浏览器 if ( e && e....
  • DOM事件标准定义了两种事件流,这两种事件流...这两种事件流分别是捕获冒泡。和许多Web技术一样,在它们成为标准之前,Netscape和微软各自不同地实现了它们,下面介绍DOM事件阶段以及事件捕获与事件冒泡先后执行顺序
  • addEventListener() 方法用于向指定元素添加事件句柄。element.addEventListener...按照W3C的标准,发生捕获事件,发生冒泡事件。所以事件的整体顺序是:非目标元素捕获 -> 目标元素代码顺序 -> 非目标元素冒泡
  • 一.事件冒泡就是多个元素同时响应了同一个事件,前提是这些元素都绑定了这一个事件。...事件捕获与事件冒泡触发顺序相反,事件捕获从外层元素传到内层元素的。body—〉div—〉span。 jquery不支持事件捕获,...
  • 主要介绍了一JS的事件冒泡和事件捕获,通过代码举例详细描述了两者之间的差别,需要的朋友可以参考下
  • 绑定在被点击元素的事件是按照代码顺序发生,其他元素通过冒泡或者捕获“感知”的事件,按照W3C的标准,发生捕获事件,发生冒泡事件。所有事件的顺序是:其他元素捕获阶段事件 -> 本元素代码顺序事件 -> 其他...
  • DOM事件机制,事件捕获与事件冒泡先后执行顺序 DOM事件流的三个阶段 流的概念,在现今的JavaScript中随处可见。比如说React中的单向数据流,Node中的流,又或是今天本文所讲的DOM事件流,都是流的一种生动体现。用...
  • 事件冒泡捕获 触发

    2018-09-09 19:26:22
    就是这样一个流程,先捕获,然后处理,然后再冒泡出去。        关于DOM 2级事件处理程序:    DOM 2级事件定义了两方法:用于处理添加事件和删除事件的操作:  添加事件 addEventListener...
  • 冒泡捕获是指在元素上的事件被触发的时候,js 传递事件的两种方向,或者说过程。 <div id="lv1" class="level"> <div id="lv2" class="level"> <div id="lv3" class="level"> </div...
  • Js事件执行顺序,冒泡捕获 绑定执行,先捕获后冒泡
  • Vue中的事件冒泡捕获

    千次阅读 2020-09-18 10:39:45
    Vue中的事件冒泡捕获 stop 阻止冒泡事件 .capture 设置捕获事件 .self 只有点击当前元素的时候,才会触发处理函数 .once处理函数只被触发一次 1.当一个父元素div1 包裹着一个子元素div2 同时有点击事件, 我们...
  • 目录(一)DOM事件流① 定义② 图解③ 历史(二)冒泡(三)捕获(四)在不同的阶段执行事件(五)提高内存和性能 — 事件委托① 实例② 优点 (一)DOM事件流 ① 定义 DOM事件流包括三个阶段: 捕获阶段 目标阶段 ...
  • 文章目录事件处理模型冒泡捕获触发顺序,捕获,冒泡取消冒泡事件阻止默认事件事件对象事件委托事件绑定处理函数的三种方式事件处理程序的内部this指向事件分类 事件处理模型 以下就是事件处理模型例子的代码 ....
  • 本文主要介绍了JS中绑定事件顺序(事件冒泡与事件捕获区别)。具有很好的参考价值,下面跟着小编一起来看下吧

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 40,781
精华内容 16,312
关键字:

先冒泡后捕获