js的事件冒泡和事件捕获

最新推荐文章于 2024-03-16 11:12:42 发布

doublesXu

最新推荐文章于 2024-03-16 11:12:42 发布

阅读量111

点赞数

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

本文链接：https://blog.csdn.net/xyr0709/article/details/98208533

版权

JavaScript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>事件冒泡和事件捕获</title>
	<script>
		/**
		 * 事件流：当一个HTML元素产生事件时，该事件会在当前元素与根元素之间按特定的顺序传播，所有经过的节点都会接收到该事件并执行，这个传播的过程就是DOM事件流
		 * 分类：事件冒泡、事件捕获
		 * 默认情况下，事件使用的是事件冒泡流
		 */
		
		/**
		 * 事件冒泡：事件从事件目标(事件源)开始 ，往上冒泡直接页面的根元素
		 * 特点：先触发子级元素的事件，再触发父级元素的事件
		 * 注意：一般的绑定事件的方式，采用的都是事件冒泡
		 */
		/*window.οnlοad=function(){
			document.querySelector('#myP').οnclick=function(){
				alert(444);
			};
			document.querySelector('#myDiv').οnclick=function(){
				alert(555);
			};
		};*/
		
		/**
		 * 事件捕获：事件从页面的根元素开始，往下到事件目标元素
		 * 特点：先触发父级元素的事件，再触发子级元素的事件
		 * 注意：可以通过addEventListener()函数进行事件绑定，绑定时可以指定采用事件冒泡还是事件捕获
		 */
		/*window.οnlοad=function(){
			document.querySelector('#myP').addEventListener('click', function(){
				alert(444);
			},true); //第三个参数为true时表示采用事件捕获，false表示事件冒泡，默认为false
			document.querySelector('#myDiv').addEventListener('click', function(){
				alert(555);
			},true);
		};*/

		/**
		 * 阻止事件冒泡
		 * 注：实际中，阻止事件捕获没有多大意义，所以基本上不会做阻止事件捕获的操作
		 */
		window.onload=function(){
			document.querySelector('#myP').onclick=function(event){
				alert(444);
				//阻止事件冒泡
				event.stopPropagation(); //W3C标准方式
				// event.cancelBubble=true; //非标准方式
			};
			document.querySelector('#myDiv').onclick=function(){
				alert(555);
			};
		};

		/**
		 * 阻止事件的默认行为
		 */
		function do1(event){
			console.log(111);
			event.preventDefault();//阻止事件默认行为
		}

		function do2(event){
			console.log(222);
			event.preventDefault();
		}
		

	</script>
</head>
<body>
	<!-- 
		事件冒泡
		点击span元素，先触发span的click事件，再触发p元素的click事件，最后触发div的click事件
	 -->
	<div onclick="alert(333)">
		<p onclick="alert(222)">
			<span onclick="alert(111)">itany</span>
		</p>
	</div>
	<hr>
	
	<div id="myDiv">
		<p id="myP">欢迎光临</p>
	</div>
	<hr>
	
	<!-- 事件的默认行为，如：点击链接时默认会跳转 -->
	<a href="#" onclick="do1(event)">hello</a>
	<button oncontextmenu="do2(event)">右键点我</button>





</body>
</html>