事件冒泡，捕获，取消冒泡，阻止默认事件

矫情吗；* 2022-05-26 10:53 170阅读 0赞

**事件冒泡**

结构上（非视觉上）嵌套关系的元素，会存在事件的冒泡功能，

即同一事件，自子元素冒泡向父元素（自内向外）

源元素触发不算是冒泡

<body>
    
    <div style="width: 300px;height: 300px;background: red;">
    
    <div class="test" style="width: 200px;height: 200px;background: blue;">
    
    <div class="test1" style="width: 100px;height: 100px;background: black;"></div>
    
    </div>
    
    </div>
    
    <script type="text/javascript">
    
    var warp = document.getElementsByTagName('div')[0];
    	
    var test = document.getElementsByClassName('test')[0];
    	
    var test1 = document.getElementsByClassName('test1')[0];
    	
    warp.addEventListener('click',function () {console.log('warp')},false);
    	
    test.addEventListener('click',function () {console.log('test')},false);
    	
    test1.addEventListener('click',function () {console.log('test1')},false);
    	
    </script>
    
    </body>

![QQ浏览器截图\_20180327185238\_1671803A24104aa1A568D0DA0F02201B.jpg][QQ_20180327185238_1671803A24104aa1A568D0DA0F02201B.jpg]

以上是点击了 黑色的 div 触发的事件，

每个元素都绑定一个事件，点击最里层的子元素，会存在事件冒泡功能。

**事件捕获**

ele.addEventListener(type,fun,true)

结构上（非视觉上）嵌套关系的元素，会存在事件的捕获功能，

即同一事件，自父元素捕获至子元素（事件源元素）（自外向内）

源元素触发不算是捕获

低版本IE没有捕获事件

多个事件类型触发顺序，先捕获，后冒泡

focus,blur,change,submit,reset,select等事件不冒泡

**取消冒泡**

event.stopPropagation()  W3C标准，但是 IE 9 以下不支持

示例：

box3.addEventListener('click',function (event) {
    				
    			console.log('box3');
    			event.stopPropagation();
    				
    		},false)

**event.cancelBubble = true ** 取消冒泡，兼容IE

示例：

box3.addEventListener('click',function () {
    				
    			console.log('box3');
    			event.cancelBubble = true;
    				
    		},false)

**封装方法stopBubble，取消冒泡，兼容 ie**

function stopBubble(event) {
    	
    if(event.stopPropagation) {
    		
    event.stopPropagation();
    		
    }else {
    		
    event.cancelBubble = true;
    		
    }
    	
    }

示例：

box3.addEventListener('click',function (event) {
    				
    			console.log('box3');
    				
    				function stopBubble() {
    		
    				if(event.stopPropagation) {
    							
    				event.stopPropagation();
    							
    				}else {
    							
    				event.cancelBubble = true;
    							
    				}
    						
    			}
    			stopBubble(event);
    		},false)

**阻止默认事件**

写在处理函数的内部执行

常见的默认事件： 表单提交，a标签跳转，右键菜单...

return false

eve.onclick = function() \{\} 这种方式的绑定事件才生效

例如取消右键菜单事件：

document.oncontextmenu = function () {
    	
    	return false;
    	
    }

执行后右键就不会再弹出菜单。

eve.preventDefault()

取消右键弹出菜单

**ie9以下不兼容**

document.oncontextmenu = function (eve) {
    	
    	eve.preventDefault();
    	
    }

支持所有绑定事件的方法

兼容IE9以下的浏览器,高版本 IE 不支持

eve.returnValue = false;

封装一个方法，兼容所有浏览器组织默认事件

function stopDefault(event) {
    
    					if(event.preventDefault) {
    							
    					event.preventDefault();
    							
    					}else {
    							
    					event.returnValue = false;
    							
    						}
    						
    					}

使用方法：

a.onclick = function () {
    
    					stopDefault(event);
    					
    				}
    				
    				function stopDefault(event) {
    
    				if(event.preventDefault) {
    						
    				event.preventDefault();
    						
    				}else {
    						
    				event.returnValue = false;
    						
    					}
    					
    				}

[QQ_20180327185238_1671803A24104aa1A568D0DA0F02201B.jpg]: http://blog.mobaii.com/Public/Uploads/2018-03-27/5aba2283751c2.jpg