事件冒泡和事件捕获

最新推荐文章于 2024-09-11 11:02:35 发布

机器猫zhao

最新推荐文章于 2024-09-11 11:02:35 发布

阅读量357

点赞数

分类专栏： js 文章标签：事件冒泡事件捕获

本文链接：https://blog.csdn.net/zx_p24/article/details/53332349

版权

js 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

事件冒泡和事件捕获示意图：

一、事件冒泡

实例：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>事件冒泡</title>
<style>
*{margin:0; padding:0;}
</style>
<script type="text/javascript">
window.onload = function(){
	var div1 = document.getElementsByTagName('div')[0];
	var oSpan = document.getElementsByTagName('span')[0];
	var oBody = document.getElementsByTagName('body')[0];
	
	oSpan.onclick = function(e){
		this.style.background = 'red';
		var ev = e || event;
		alert('red');	
	}
	
	div1.onclick = function(e){
		this.style.background = 'green';
		var ev = e || event;
		alert('green');	
	}
	
	oBody.onclick = function(e){
		this.style.background = 'blue';
		var ev = e || event;
		alert('blue');	
	}
}
</script>
</head>

<body>
<div class="div1">
 	<span>测试事件冒泡</span>
</div>
</body>
</html>

结果依次弹出‘red’，‘green’，‘blue’，所以我们触发span元素，连同父级元素一起触发了，这就是事件冒泡。从里到外。

解决办法：阻止事件冒泡，但是有兼容问题，所以下面提供一个写好的无兼容问题的阻止冒泡函数

function stopBubble(e) {
	
		// 如果提供了事件对象，则这是一个非IE浏览器
	
		if ( e && e.stopPropagation ) {
	
			// 因此它支持W3C的stopPropagation()方法 
	
			e.stopPropagation();
	
		} else { 
	
			// 否则，我们需要使用IE的方式来取消事件冒泡
	
			window.event.cancelBubble = true;
	
		}
	
	}

那解决上面span那个事件冒泡的代码，写好的在下面：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>阻止事件冒泡</title>
<style>
*{margin:0; padding:0;}
</style>
<script type="text/javascript">
window.onload = function(){
	var div1 = document.getElementsByTagName('div')[0];
	var oSpan = document.getElementsByTagName('span')[0];
	var oBody = document.getElementsByTagName('body')[0];
	
	oSpan.onclick = function(e){
		this.style.background = 'red';
		var ev = e || event;
		stopBubble(e);
		alert('red');	
	}
	
	div1.onclick = function(e){
		this.style.background = 'green';
		var ev = e || event;
		alert('green');	
	}
	
	oBody.onclick = function(e){
		this.style.background = 'blue';
		var ev = e || event;
		alert('blue');	
	}
	
	//阻止事件冒泡的兼容性写法
	
	function stopBubble(e) {
	
		// 如果提供了事件对象，则这是一个非IE浏览器
	
		if ( e && e.stopPropagation ) {
	
			// 因此它支持W3C的stopPropagation()方法 
	
			e.stopPropagation();
	
		} else { 
	
			// 否则，我们需要使用IE的方式来取消事件冒泡
	
			window.event.cancelBubble = true;
	
		}
	
	}
}
</script>
</head>

<body>
<div class="div1">
 	<span>测试事件冒泡</span>
</div>
</body>
</html>

这样的话，再点击时，只会触发span的事件，背景颜色变成红色。

有事件冒泡的话，就会有相反的事件捕获~~~~~

二、事件捕获

实例：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>事件捕获</title>
<style>
*{margin:0; padding:0;}
</style>
<script type="text/javascript">
window.onload = function(){
	var div1 = document.getElementsByTagName('div')[0];
	var oSpan = document.getElementsByTagName('span')[0];
	var oBody = document.getElementsByTagName('body')[0];
	
	oSpan.addEventListener('click',function(){
		this.style.background = 'red';
		alert('red');	
	},true);
	
	div1.addEventListener('click',function(){
		this.style.background = 'green';
		alert('green');	
	},true);
	
	oBody.addEventListener('click',function(){
		this.style.background = 'blue';
		alert('blue');	
	},true);
	
	
}
</script>
</head>

<body>
<div class="div1">
 	<span>测试事件冒泡</span>
</div>
</body>
</html>

结果依次弹出‘blue’，‘green’，‘red’，所以我们触发span元素，会先触发最外层父级，在一直往里执行，这就是事件捕获。从外到里。

使用addEventListener绑定事件的时候，第三个参数为true表示捕获，为false表示事件冒泡。

阻止事件捕获：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>阻止事件捕获</title>
<style>
*{margin:0; padding:0;}
</style>
<script type="text/javascript">
window.onload = function(){
	var div1 = document.getElementsByTagName('div')[0];
	var oSpan = document.getElementsByTagName('span')[0];
	var oBody = document.getElementsByTagName('body')[0];
	
	oSpan.addEventListener('click',function(e){
		this.style.background = 'red';
		var e = e || event;
		alert('red');	
	},true);
	
	div1.addEventListener('click',function(e){
		this.style.background = 'green';
		var e = e || event;
		alert('green');	
	},true);
	
	oBody.addEventListener('click',function(e){
		this.style.background = 'blue';
		var e = e || event;
		stopBubble(e);
		alert('blue');	
	},true);
	
	function stopBubble(e) {

		// 如果提供了事件对象，则这是一个非IE浏览器
	
		if ( e && e.stopPropagation ) {
	
			// 因此它支持W3C的stopPropagation()方法 
	
			e.stopPropagation();
	
		} else { 
	
			// 否则，我们需要使用IE的方式来取消事件冒泡
	
			window.event.cancelBubble = true;
	
		}
	
	}
}
</script>
</head>

<body>
<div class="div1">
 	<span>测试事件冒泡</span>
</div>
</body>
</html>

显示结果：背景为蓝色，把往里传递的事件阻止了。

延伸

阻止事件默认行为;（因为像文字、图片等在浏览器中有默认行为，用下面写法去阻止）

无兼容写法：

function stopDefault( e ) {

     // 阻止默认浏览器动作(W3C)

     if ( e && e.preventDefault ) {

         e.preventDefault();

     } else {

        // IE中阻止函数器默认动作的方式

        window.event.returnValue = false;

    }

    return false;

}