DOM2级点击事件的事件流的阻止

最新推荐文章于 2023-01-06 21:24:23 发布

江南极客

最新推荐文章于 2023-01-06 21:24:23 发布

阅读量729

点赞数

分类专栏： HTML JS 文章标签： HTML DOM 事件流 addEventListener stopPropagation

本文链接：https://blog.csdn.net/sinat_35861727/article/details/78554697

版权

JS 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

HTML

7 篇文章 0 订阅

订阅专栏

DOM2级点击事件，即通过 addEventListener('click',function(){},[bool])方法为标签添加的点击事件，此方法有三个参数，其中第三个参数是布尔类型的，默认为false，效果如下：
取值true，是 捕捉型事件流（事件从外往内依次执行），点击该标签的时候，从该标签的父级标签开始向内，点击事件依次被触发；
取值false，是 冒泡型事件流(事件从内往外依次执行)，点击该标签的时候，从该标签开始，自身包括父级标签的点击事件依次被触发。
如图所示:

捕捉型,点击span1标签,依次触发div,p标签和span1点击事件；
冒泡型,点击span1标签,span1,p标签和div点击事件依次被触发。

开发中，时常需要阻止这样的流事件，那么先获取到点击事件对象，然后就可以使用事件对象的stopPropagation()方法，来阻止事件流，演示代码如下：

<!DOCTYPE html>
<html>
	<head>
		<title>事件流效果</title>
		<meta charset="UTF-8">
		<style>
			
		</style>
		
	</head>
	
	<body>
		<h2>事件流效果</h2>
		<div style="width:400px;height:300px;background:lightgreen;">
			<p style="width:300px;height:200px;background:lightblue;">
				<span style="background:gray;">事件流效果(span1)</span>
				<span style="background:orange;">阻止事件流(span2)</span><br/>
				p标签
			</p>div标签
		</div>
		
	</body>
	<script type="text/javascript">
		//dom2级事件
		var divtag = document.getElementsByTagName('div')[0];
		var ptag = document.getElementsByTagName('p')[0];
		var sptag1 = document.getElementsByTagName('span')[0];
		var sptag2 = document.getElementsByTagName('span')[1];
		
		function f1(){
			console.log('click div tag');
		}
		function f2(){
			console.log('click p tag');
		}
	
		var f3 = function(){
			console.log('click span1 tag');
		}
		var f4 = function(e){
			e.stopPropagation();						//阻止冒泡型事件流,点击span标签,p标签和div点击事件不会被触发
			console.log('click span2 tag');
		}
		//addEventListener()方法有三个参数,第三个参数是布尔类型的事件流,默认为false[冒泡型]
		//事件流的值: true[捕捉型(事件从外往内依次执行)]   false[冒泡型(事件从内往外依次执行)]
		
		divtag.addEventListener('click',f1);
		ptag.addEventListener('click',f2);				//冒泡型,点击p标签,div点击事件被触发
		sptag1.addEventListener('click',f3);			//冒泡型,点击span1标签,span1,p标签和div点击事件依次被触发
		sptag2.addEventListener('click',f4);
		
		/*
		divtag.addEventListener('click',f1,true);
		ptag.addEventListener('click',f2,true);			//捕捉型,点击p标签,依次触发div和p标签点击事件
		sptag1.addEventListener('click',f3,true);		//捕捉型,点击span1标签,依次触发div,p标签和span1点击事件
		*/
	</script>
</html>

感谢观看!