精华内容
下载资源
问答
  • 一块: 事件流描述的是从页面接收事件的顺序。  IE的事件是冒泡事件流,  而firefox的事件流是捕获事件流。  1.事件冒泡  IE的事件流叫做事...

    一块:

    事件流描述的是从页面接收事件的顺序。 
    IE的事件是冒泡事件流, 
    而firefox的事件流是捕获事件流。 
    1.事件冒泡 
    IE的事件流叫做事件冒泡,即事件从最具体的元素到不具体的元素。 
    好比气泡从水底下一直向上冒泡,像dom树一样,一直到根元素。 
    2.事件捕获 
    即从不具体的元素到具体的元素

    事件传递有两种方式:冒泡与捕获。

    事件传递定义了元素事件触发的顺序。 如果你将 <p> 元素插入到 <div> 元素中,用户点击 <p> 元素, 哪个元素的 "click" 事件先被触发呢?

    在 冒泡 中,内部元素的事件会先被触发,然后再触发外部元素,即: <p> 元素的点击事件先触发,然后会触发 <div> 元素的点击事件。

    在 捕获 中,外部元素的事件会先被触发,然后才会触发内部元素的事件,即: <div> 元素的点击事件先触发 ,然后再触发 <p> 元素的点击事件。

    第一种:事件冒泡

           IE提出的事件流叫做事件冒泡,即事件开始时由最具体的元素接收,然后逐级向上传播到较为不具体的节点,看一下以下示例:

    接下来我们点击一下页面上的p元素,看看会发生什么:

       正如上面我们所说的,它会从一个最具体的的元素接收,然后逐级向上传播, p=>button=>div=>body..........事件冒泡可以形象地比喻为把一颗石头投入水中,泡泡会一直从水底冒出水面。

     

     第二种:事件捕获

             网景公司提出的事件流叫事件捕获流。

              事件捕获流的思想是不太具体的DOM节点应该更早接收到事件,而最具体的节点应该最后接收到事件,针对上面同样的例子,点击按钮,那么此时click事件会按照这样传播:(下面我们就借用addEventListener的第三个参数来模拟事件捕获流)

     

    同样我们看一下后台的打印结果:

    react有专属的阻止事件冒泡方法,e.nativeEvent.stopImmediatePropagation()

    handleBarDisplay(e){

           e.nativeEvent.stopImmediatePropagation();

           this.setState({barDisplay:false})

    }

    二块:

    事件捕获和事件冒泡属于两个相反的过程,这里可以有一个我感觉十分恰当的比喻,当你把一个可以漂浮在水面上的物品,使劲向水里砸下去,它会首先有一个下降的过程,这个过程就可以理解为从最顶层向事件发生的最具体元素(目标点)的捕获过程;之后由于浮力大于物体自身的重力,物体会在到达最低点( 最具体元素)之后漂浮到水面上,这个过程相对于事件捕获是一个回溯的过程,即事件冒泡。 
    好了,对于事件捕获和事件冒泡有了一个概念上的理解,那我们就可以开始考虑实际的编码过程中的实际应用了。先贴上本文所需要的代码

    
     
    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <title>event </title>
    5. </head>
    6. <body>
    7. <div id="obj1">
    8. welcome
    9. <h5 id="obj2">hello </h5>
    10. <h5 id="obj3">world </h5>
    11. </div>
    12. <script type="text/javascript">
    13. var obj1= document.getElementById( 'obj1');
    14. var obj2= document.getElementById( 'obj2');
    15. obj1.addEventListener( 'click', function(){
    16. alert( 'hello');
    17. }, false);
    18. obj2.addEventListener( 'click', function(){
    19. alert( 'world');
    20. })
    21. </script>
    22. </body>
    23. </html>

    如上所示,这是一个十分简单地文档结构:document > html > body > div > h5 
    并且分别在obj1,obj2上绑定了一个点击事件,由于addEventListener的第三个参数为false,所以页面是在冒泡阶段处理绑定事件。此时整个页面可以有三种行为出现

    1. 点击文字welcome时,弹出hello。 
      此时就只触发了绑定在obj1上的点击事件。具体冒泡实现过程如下:welcome 属于文本节点,点击后,开始从文本节点查找,当前文本节点没有绑定点击事件,继续向上找,找到父级(id为obj1的div),有绑定的点击事件,执行,再向上找,body,没有绑定点击事件,再到html,document,都没再有绑定的点击事件,好,整个冒泡过程结束。
    2. 点击文字hello时,先弹出world,再弹出hello。 
      具体冒泡的过程如下图所示

    冒泡过程
    3. 点击world时,弹出hello。 
    具体冒泡过程和第二种情况类似,如下图 
    这里写图片描述

    理解了以上的内容,我们可以接着来讨论事件代理机制。 
    比如上面的代码,我们想要在点击每个h5标签时,弹出对应的innerHTML 。常规做法是遍历每个h5,然后在每个h5上绑定一个点击事件,这种做法在h5较少的时候可以使用,但如果有一万个h5,那就会导致性能降低。这时就需要事件代理出场了。 
    先贴代码

    
     
    1. obj1.addEventListener( 'click', function(e){
    2. var e=e|| window.event;
    3. if(e.target.nodeName.toLowerCase()== 'h5'){
    4. alert(e.target.innerHTML);
    5. }
    6. }, false);

    由于事件冒泡机制,点击了h5后会冒泡到div,此时就会触发绑定在div上的点击事件,再利用target找到事件实际发生的元素,就可以达到预期的效果。

    三块:

     

    采用事件代理,为页面中的所有a标签绑定click事件。

    1. document.addEventListener("click", function(e) {

    2. if (e.target.nodeName == "A")

    3. console.log("a");

    4. }, false);

    问题:若a标签里面仍有span、img等其他元素,上述代码中,单击span、img等其他元素不能触发click事件。

    原因:单击span、img等其他元素时,e.target指向的是触发click事件的元素(span、img等其他元素),而不是a标签。

    解决方法:从触发click事件的元素开始,逐级向上查找,直到找到a标签为止。

    1. document.addEventListener("click", function(e) {

    2. var node = e.target;

    3. while (node.parentNode.nodeName != "BODY") {

    4. if (node.nodeName == "A") {

    5. console.log("a");

    6. break;

    7. }

    8. node = node.parentNode;

    9. }

    10. }, false);

            <div class="person-messagebox">
                <div class="left-message"><a href="https://blog.csdn.net/weixin_41646716">
                    <img src="https://profile.csdnimg.cn/5/7/E/3_weixin_41646716" class="avatar_pic" username="weixin_41646716">
                </a></div>
                <div class="middle-message">
                                        <div class="title"><span class="tit "><a href="https://blog.csdn.net/weixin_41646716" data-report-click="{&quot;mod&quot;:&quot;popu_379&quot;,&quot;ab&quot;:&quot;new&quot;}" target="_blank">歪歪100</a></span>
                        <!-- 等级,level -->
                                                <img class="identity-icon" src="https://csdnimg.cn/identity/blog6.png">                                            </div>
                    <div class="text"><span>原创文章 49</span><span>获赞 158</span><span>访问量 70万+</span></div>
                </div>
                                <div class="right-message">
                                            <a class="btn btn-sm  bt-button personal-watch" data-report-click="{&quot;mod&quot;:&quot;popu_379&quot;,&quot;ab&quot;:&quot;new&quot;}">关注</a>
                                                                <a href="https://im.csdn.net/im/main.html?userName=weixin_41646716" target="_blank" class="btn btn-sm bt-button personal-letter">私信
                        </a>
                                    </div>
                            </div>
                        
        </div>
    
    展开全文
  • js冒泡事件和捕获事件冒泡事件:冒泡事件是从里向外,即是从被绑定元素开始一直向外到达页面的所有祖先元素都会被触发,这 一过程被称为事件冒泡。这个事件从原始元素开始一直冒泡到DOM树的最上层 捕获事件:...

    js中冒泡事件和捕获事件:

    冒泡事件:冒泡事件是从里向外,即是从被绑定元素开始一直向外到达页面的所有祖先元素都会被触发,这 一过程被称为事件冒泡。这个事件从原始元素开始一直冒泡到DOM树的最上层

    捕获事件:捕获事件是从页面的最上层到被绑定元素都会触发。

    IE只支持事件冒泡,不支持事件捕获

    冒泡事件和捕获事件的方向是相反的。

    形式如下图所示:

     

    一般为浏览器中的元素绑定事件有2种方式:

    一、直接在页面元素中进行绑定,此方式采用的是冒泡排序,如:

    <div id="eventExample" οnclick="alert('直接在元素上绑定事件')"></div>
    

    二、通过js的方式为元素绑定事件,如:

    var eventObj = document.getElementById("eventExample");
    //IE浏览器中使用的是elem.attachEvent("onclick",function(){});
    eventObj.attachEvent("onclick",function(){});
    //在其他浏览器中使用elem.addEventListener("click",function(){},boolean是否使用捕获方式)
    eventObj.addEventListener("click",function(){},false);

     

    addEventListener(事件类型,触发的函数,是否捕获):如果最后一个参数为true,则表示采用捕获事件;如果最后一个参数是false,则表示采用冒泡事件。

    <div id="event_1" οnclick="alert('最上层')">
        <span id="event_2" οnclick="alert('中间层')">
            <a id="event_3" href="http://www.baidu.com" οnclick="alert('最后一层')" >最后一层</a>
        </span>        
    </div>
    <script>
    var event_3 = document.getElementById("event_3");
    event_3.addEventListener("click",function(){
        alert("通过绑定点击了最后一层");
    },false);
    </script>

     

    在执行上述代码的过程中,如果点击“最后一层”,首先会弹出“最后一层”,然后弹出“通过绑定点击了最后一层”,然后弹出“中间层”,最后是“最上层”,

    由这个执行顺序可以看出,冒泡事件是由内之外执行的,且在执行过程中,直接绑定在元素上的事件比通过js绑定的时间执行的优先级高。

     

    说到冒泡事件,就会涉及到组织冒泡:

    1.event.stopPropagation();

    <div id="event_1" οnclick="alert('最上层')">
        <span id="event_2" οnclick="alert('中间层')">
            <a id="event_3" href="http://www.baidu.com" οnclick="alert('最后一层')" >最后一层</a>
        </span>        
    </div>
    <script>
    var event_3 = document.getElementById("event_3");
    event_3.addEventListener("click",function(event){
        event.stopPropagation();
    },false);
    </script>

    在代码绑定中加入event.stopPropagation();后,执行的结果为:弹出”最后一层“,然后跳转到”百度“。

    2.event.preventDefault(); 阻止元素的默认事件的执行

    如果将上述代码中的event.stopPropagation();换成event.preventDefault();,执行结果就变成:”最后一层“---->”中间层“----->"最上层",然后就不会跳转到”百度“

    3.return false;

     

    /**************************附加知识*********************************/

    1、event事件:

    function showMsg(event){
      event = event || window.event;  //IE和Chrome下是window.event FF下是e 
    }
    

    2、取消事件默认行为的方法:

    function preventDefaultHandler(event){
      event = event || window.event;
      if(event.preventDefault){
         event.preventDefault();         
      }else{
         event.returnValue=false;//IE下使用        
      }
    }
    

    3、阻止冒泡事件

    function stopPropagationHandler(event){
      event = event || window.event;
      if(event.stopPropagation){
        event.stopPropagation();    
      }else{
         event.cancelBubble = true;//IE    
      }      
    }

    4.获取事件源 

    function eventSrc(event){
      event = event || window.event;
      var target = event.target || event.srcElement;//IE和Chrome下是srcElement FF下是target     
    }

    5、如果你有一个很多行的大表格,在每个<tr>上绑定点击事件是个非常危险的想法,因为性能是个大问题。流行的做法是使用事件委托。 

    事件委托描述的是将事件绑定在容器元素上,然后通过判断点击的target子元素的类型来触发相应的事件。 
    事件委托依赖于事件冒泡,如果事件冒泡到table之前被禁用的话,那以下代码就无法工作了。 

    myTable.onclick = function () { 
     e = e || window.event; 
     var targetNode = e.target || e.srcElement; 
     // 测试如果点击的是TR就触发 
     if (targetNode.nodeName.toLowerCase() === 'tr') { 
      alert('You clicked a table row!'); 
     } 
    } 

     

     

     

      

      

     

     

     

     

    展开全文
  • 主要介绍了JS html事件冒泡和事件捕获操作,结合完整实例形式分析了javascript事件冒泡事件捕获相关原理与实现方法,需要的朋友可以参考下
  • 目录 概述 冒泡事件、捕获事件、事件委托的概念与认识 ...冒泡事件与捕获事件是现代浏览器执行事件的两个不同阶段,事件的代理又是借助冒泡事件的原理实现的。 由于子元素的时间会传到 父元素的同类...

    目录

     

    概述

    冒泡事件、捕获事件、事件委托的概念与认识

     Element事件认认识:

    冒泡事件案例

    捕获事件案例

    事件委托案例

    默认行为的理解与处理方式:


    • 概述

    冒泡事件、捕获事件、事件委托的概念与认识

    在原先的时候有的浏览器支持冒泡事件有的浏览器支持冒泡事件,后来W3C要统一标准就形成了现在的对两种事件都支持,这也是现在浏览器的一个现状。冒泡事件与捕获事件是现代浏览器执行事件的两个不同阶段,事件的代理又是借助冒泡事件的原理实现的。

     由于子元素的时间会传到 父元素的同类时间,所以我们利用这个特性,子元素不做事件处理,然事件传递到父元素再做统一的处理,由于子元素的事件是由父元素代为处理的,所以我们称之为事件代理或是说事件委托。事件委托在我们的项目中应有有着它诸多的优势:

     Element事件认认识:

    用来获取事件的详细信息:鼠标位置、键盘按键。下面是我们event对象的一个基本使用情况:

    <script>
    	//在实验的时候发现在新版本的浏览器中,好像不存在这个兼容性问题
    	document.onclick=function(e){
    	// 支持IE但是不支持火狐
    	alert("X: "+event.clientX+" Y:"+event.clientY);
    	// 支持火狐但是不支持IE
    	alert("X: "+e.clientX+" Y:"+e.clientY);
    	// 对于多数浏览器的一个兼容性写法
    	eEvent = e||event;
    	alert("X: "+eEvent.clientX+" Y:"+eEvent.clientY)
    				
    	}
    </script>
    • 冒泡事件案例

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style>
    			#bigBox{
    				width: 300px;height: 300px;border: 3px solid red;margin: 50px auto;
    			}
    			#smallBox{
    				width: 150px;height: 150px;border: 3px solid blue;margin: 50px auto;
    			}
    		</style>
    	</head>
    	
    	<body id="bodyBox">
    		<div id="bigBox">
    			<div id="smallBox"></div>
    		</div>
    		
    		<script>
    			var bigBox = document.getElementById('bigBox');
    			var smallBox = document.getElementById("smallBox");
    			var bodyBox = document.getElementById('bodyBox');
    			bigBox.onclick = function(e){
    				//兼容性设置
    				eEvent = e||event;
    				//非IE浏览器下
    				eEvent.stopPropagation();
    				//IE浏览器下
    				eEvent.cancelBubble=true;
    				alert("大盒子");
    			}
    			smallBox.onclick= function(){
    				alert("小盒子");
    			}
    			bodyBox.onclick = function(){
    				alert("body盒子")
    			}
    			document.onclick = function(){
    				alert("document盒子")
    			}
    		</script>
    	</body>
    </html>
    

     在样例中我们组织事件从大盒子往外冒,其中浏览器兼容的问题,可能是只在老版本中存在,在我的本机中可能是浏览器新的缘故,在各个浏览器上管是那种组织冒泡的方式都是可用的

    • 捕获事件案例

    捕获事件的绑定主要是借助于addEventListener,捕获事件的阻止实现与冒泡事件阻止的实现相似

    <script>
    	var bigBox = document.getElementById('bigBox');
    	var smallBox = document.getElementById("smallBox");
    	var bodyBox = document.getElementById('bodyBox');
    			
    	bigBox.addEventListener("click",function(){alert("大盒子");event.stopPropagation()},true);
    	smallBox.addEventListener("click",function(){alert("小盒子")},true)
    	bodyBox.addEventListener("click",function(){alert("body盒子")},true)
    		
    </script>

     addEventListener函数的三个参数分别代表的是事件名称、事件绑定的行为,布尔值(true:捕获事件;false:冒泡事件)

    • 事件委托案例

      采用事件委托实现的一个简单案例,:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style>
    			li{
    				background-color: #0000FF;
    				width: 50%;
    				line-height: 28px;
    				margin: 5px 10px;
    				border-radius: 5px;
    			}
    		</style>
    	</head>
    	<body>
    		<ul id="ulbox" style="background-color: aquamarine;">
    			<li>111</li>
    			<li>222</li>
    			<li>333</li>
    			<li>444</li>
    		</ul>
    		<script>
    			//传统的处理方式
    			// window.onload = function(){
    			// 	var ulbox = document.getElementById('ulbox');
    			// 	var ulibox = ulbox.getElementsByTagName('li');
    			// 	for(var i=0;i<ulibox.length;i++){
    			// 		ulibox[i].onclick = function(){
    			// 			alert("我是li,点击事件");
    			// 		}
    			// 	}
    			// }
    
    			window.onload = function() {
    				var ulbox = document.getElementById("ulbox");
    				ulbox.onclick = function(e) {
    					var eEvent = e || event;
    					var target = eEvent.target || eEvent.srcElement;
    					if (target.nodeName.toLowerCase() == 'li') {
    						alert("我是li,点击事件" + target.innerHTML);
    					}
    				}
    			}
    		</script>
    	</body>
    </html>
    

    在上面我们每个li的操作都是一样的,我们也可以通过给每个子元素设置不同的特征标记(例如设置id)在通过target来获取子元素的标记信息,在函数的处理中根据这些不同的特征采取不同的操作。

    更多有关事件委托的概念可以参考:https://www.cnblogs.com/liugang-vip/p/5616484.html#!comments

    默认行为的理解与处理方式:

    默认行为就是浏览器自身就带有的不需要我们通过代码来实现的,例如我们创建一个什么都没有的额html文件,但是打开这个文件在我们的浏览器中右击还是可以看到一个弹出框的

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    	</head>
    	<body>
    	</body>
    </html>
    

     我们可以通过给相应的时间添加return flase来阻止这个默认的事件:

    <script>
    	document.oncontextmenu = function(){
    		return false;
            }
    </script>

    我们实现上述的右击弹出,选项框,选项框根据鼠标移动,点击页面上的其他位置是,我们的选项框就会消失:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style>
    			*{
    				padding:0px;margin: 0;list-style: none;
    			}
    			
    			#menu{
    				width: 100px;height: 200px;background-color: aqua;
    				line-height: 40px;border:1px #0000FF solid ;display: none;
    				position: absolute;
    			}
    		</style>
    	</head>
    	<body>
    		<ul id="menu">
    			<li>aaaa</li>
    			<li>bbbb</li>
    			<li>cccc</li>
    			<li>dddd</li>
    			<li>eeee</li>
    		</ul>
    		
    		<script>
    			document.oncontextmenu = function(e){
    				eEvent = e||event;
    				var menu = document.getElementById("menu");
    				menu.style.display="block";
    				menu.style.left = (eEvent.clientX+10)+"px";
    				menu.style.top = (eEvent.clientY+10)+"px";
    				return false;
    			}
    			
    			document.onclick= function(){
    				var menu = document.getElementById("menu");
    				menu.style.display="none";
    			}
    		</script>
    	</body>
    </html>
    

     

    展开全文
  • 主要为大家详细介绍了JS事件冒泡和事件捕获的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 事件冒泡和事件捕获分别由微软网景公司提出,这两个概念都是为了解决页面中事件流(事件发生顺序)的问题。 <p id=inner>Click me! 上面的代码当中一个div元素当中有一个p子元素,如果两个元素都有一个click...
  • 冒泡事件 1. 定义: &amp;amp;nbsp;&amp;amp;nbsp;&amp;amp;nbsp;&amp;amp;nbsp;&amp;amp;nbsp;&amp;amp;nbsp;当一个元素上的事件被触发的时候,比如说鼠标点击了一个按钮,同样的事件...

    事件的三阶段

    1. 捕获阶段

          当一个元素上的某个事件被触发的时候,就会有一个事件发射过去。这个事件从 Window 发出,不断经过下级节点直到触发的目标节点。在到达目标节点之前的过程,就是捕获阶段。

    2. 目标阶段

          当事件不断的传递直到目标节点的时候,最终在目标节点上触发这个事件,就是目标阶段。

    3. 冒泡阶段

          当一个元素上的某个事件被触发的时候,比如说鼠标点击了一个按钮,同样的事件将会在那个元素的所有祖先元素中被触发。这一阶段被称为冒泡阶段。

    这里写图片描述

    冒泡事件

    1. 定义:

          当一个元素上的事件被触发的时候,比如说鼠标点击了一个按钮,同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡。

        这个事件从原始元素开始一直冒泡到DOM树的最上层。子元素事件被触动,父盒子的同样的事件也会被触动。

    下面以案例说明:

        <div class="box1">
            <div class="box2">
                <div class="box3"></div>
            </div>
        </div>
    //为box1,box2,box3以及document都绑定了点击事件
     box1.onclick = function () {
         console.log("我是box1")
     }
     box2.onclick = function () {
         console.log("我是box2")
     }
     box3.onclick = function (event) {
         console.log("我是box3")
     }
    
     document.onclick = function () {
         console.log("我是document")
     }

    展示图如下:

    这里写图片描述

    结果如下:

    ① 当点击document部分,结果:

    这里写图片描述

    ② 当点击box1盒子,结果:

    这里写图片描述

    ③ 当点击box2盒子,结果:

    这里写图片描述

    ④ 当点击box3盒子,结果:

    这里写图片描述

    发现:

         元素事件被触发后,如果他的祖先元素也有该事件,那么祖先元素也会触发该事件,并且是由内往外的顺序,由小到大,即是事件冒泡。

    注意:

         由于有事件冒泡这个机制,会给程序带来一些不必要的麻烦,因此需要阻止冒泡。

    2. 阻止冒泡
    1. 火狐谷歌,IE11等 用event.stopPropagation()

    2. IE10及以下 用 event.cancelBubble = true

    采用兼容写法:

     event = event || window.event;
     if(event && event.stopPropagation()){
        event.stopPropagation();
     }else {
         event.cancelbubble = true;
     }

    那么在上面的案例中:
          使box3阻止冒泡,将上述代码修改成以下代码:

    box3.onclick = function (event) {
        //在box3的点击事件中阻止冒泡,阻止后,冒泡将停止不会再执行父系的click事件
        event = event || window.event;
        if(event && event.stopPropagation()){
            event.stopPropagation();
        } else {
            event.cancelBubble = true;
        }
        console.log("我是box3")
    }

    修改之后,点击box3,可以发现: 只打印了 “ 我是box3 ”,这样就阻止了冒泡

    这里写图片描述

    捕获事件

         捕获事件是与冒泡相反的方向执行的,由外向内执行,先执行父事件再向内执行,直接当前事件。

    利用addEventListener方法来实现事件捕获。

    target.addEventListener(type, listener, useCapture)

    type:监听事件类型的字符串。

    listener:事件处理函数。

    useCapture:布尔类型值。

    useCapturevalue
    false(默认值)表示冒泡事件(由小)。由内往外执行,先执行当前事件再向外执行,直到执行完父事件。
    true表示捕获事件。由外向内执行,先执行父事件再向内执行,直接当前事件

    将上述案例的js代码改为捕获:

    box1.addEventListener("click",function () {
        console.log("我是box1")
    },true);
    
    box2.addEventListener("click",function () {
        console.log("我是box2")
    },true);
    
    box3.addEventListener("click",function () {
        console.log("我是box3")
    },true);
    
    document.addEventListener("click",function () {
        console.log("我是document")
    },true);
    

    点击box3时:

    这里写图片描述

    展开全文
  • 主要介绍了javascript事件冒泡和事件捕获机制的详解的相关资料,网上的相关资料有很多,但是讲的不是多清楚,通过本文希望能让大家理解掌握,需要的朋友可以参考下
  • JS 事件冒泡和事件捕获.pdf
  • 主要为大家详细介绍了js事件冒泡事件捕获和阻止默认事件,感兴趣的小伙伴们可以参考一下
  • js 事件冒泡和事件捕获

    万次阅读 多人点赞 2018-07-18 16:33:59
    而firefox的事件流是捕获事件流。  1.事件冒泡  IE的事件流叫做事件冒泡,即事件从最具体的元素到不具体的元素。  好比气泡从水底下一直向上冒泡,像dom树一样,一直到根元素。  2.事件捕获  即从不具体的元素...
  • 主要介绍了JS冒泡事件事件捕获,结合实例形式分析了javascript冒泡的原理与阻止冒泡的相关操作技巧,需要的朋友可以参考下
  • JS事件冒泡和事件捕获 他们是描述事件触发时序问题的术语。事件捕获指的是从document到触发事件的那个节点,即自上而下的去触发事件。相反的,事件冒泡是自下而上的去触发事件。绑定事件方法的第三个参数,就是控制...
  •   事件冒泡和事件捕获是为了解决页面中事件发生的顺序(事件流)问题提出的。两者的顺序完全倒置。事件冒泡是微软提出的。认为发生顺序是从内到外(如泡泡从底网上泡)。而事件捕获是网景提出的,认为发生顺序是从...
  • 主要介绍了JavaScript事件冒泡事件捕获,结合实例形式分析了事件冒泡、阻止冒泡以及事件捕获的相关原理、操作技巧与注意事项,需要的朋友可以参考下
  • 主要介绍了javaScript 事件绑定、事件冒泡事件捕获和事件执行顺序整理总结的相关资料,需要的朋友可以参考下
  • 冒泡事件:是从当前事件一层一层的向外延伸,子事件触发会触发父事件再到上级,我们可以使用e.stopPropagation()来阻止事件,注意这里有兼容性window.event? window.event.cancelBubble = true : ...捕获事件:是从...
  • 本文主要介绍了js事件冒泡事件捕获的相关知识。具有很好的参考价值,下面跟着小编一起来看下吧
  • 本文主要介绍了javascript中的事件冒泡和事件捕获,具有一定的参考价值,下面跟着小编一起来看下吧
  • (2)捕获型事件(event capturing):事件从最不精确的对象(document 对象)开始触发,然后到最精确(也可以在窗口级别捕获事件,不过必须由开发人员特别指定)。 (3)DOM事件流:同时支持两种事件模型:捕获型事件
  • --一、事件冒泡和事件捕获--&gt; &lt;div id="parent"&gt;  &lt;div id="child" class="child"&gt;点击child&lt;/div&gt; &lt;/div&gt;
  • IE9,chrome,Firefox,Opera,Safari均实现了DOM2级规范中定义的标准DOM事件,而IE8IE8以下版本仍然保留专有的事件处理方式。 事件冒泡 事件冒泡是由IE开发团队提出来的,即事件开始时由最具体的元素...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 29,831
精华内容 11,932
关键字:

js冒泡事件和捕获事件