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

最新推荐文章于 2024-04-01 13:33:38 发布

ZPD_zpd

最新推荐文章于 2024-04-01 13:33:38 发布

阅读量524

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/ZPD_zpd/article/details/110475959

版权

addEventListener() 方法，监听事件，向一个元素添加多个事件处理程序。
第一个参数是事件的类型（比如 “click” 或 “mousedown”）。
第二个参数是当事件发生时我们需要调用的函数。
第三个参数是布尔值，指定使用事件冒泡还是事件捕获。此参数是可选的。

事件冒泡

多个元素嵌套并调用同一个事件时，由内部子元素先触发事件，再触发父元素的事件。
在这里插入图片描述

<body>
	<div id="box">
		<button type="button" id="btn">按钮</button>
	</div>

	<script type="text/javascript">
		var box = document.getElementById("box");
		var btn = document.getElementById("btn");

		// 事件冒泡,嵌套元素，子元素先触发，之后触发父元素，以此类推

		btn.addEventListener("click",function(){
			console.log("btn-------");
		});
		
		document.addEventListener("click",function(){
			console.log("document-------");
		});
		
		box.addEventListener("click",function(){
			console.log("box-------");
		});
	   
	   //使用外部函数时，嵌套元素，触发事件冒泡
	   /*
		btn.onclick = function() {
			console.log("btn-------");
		}

		box.onclick = function() {
			console.log("box-------");
		}

		document.onclick = function() {
			console.log("document-------");
		}
		*/
	</script>
</body>

事件捕获

多个元素嵌套并调用同一个事件时，由父元素先触发事件，再内部子父元素的事件。

在这里插入图片描述

<body>
	<div id="box">
		<button type="button" id="btn">按钮</button>
	</div>

	<script type="text/javascript">
		var box = document.getElementById("box");
		var btn = document.getElementById("btn");
		// 事件捕获，嵌套元素，父元素先被触发，之后触发子元素，以此类推
		btn.addEventListener("click",function(){
			console.log("btn-------");
		},true);
		
		document.addEventListener("click",function(){
			console.log("document-------");
		},true);
		
		box.addEventListener("click",function(){
			console.log("box-------");
		},true);
			</script>
</body>

阻止事件冒泡

使用event.stopPropagation()方法，终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。

该方法将停止事件的传播，阻止它被分派到其他 Document 节点。在事件传播的任何阶段都可以调用它。注意，虽然该方法不能阻止同一个 Document 节点上的其他事件句柄被调用，但是它可以阻止把事件分派到其他节点。

在这里插入图片描述

<body>
	<div id="box">
		<button type="button" id="btn">按钮</button>
	</div>

	<script type="text/javascript">
		var box = document.getElementById("box");
		var btn = document.getElementById("btn");

		btn.addEventListener("click", function(event) {
			var event = event || window.event; //兼容性处理
			
			//跨浏览器的事件对象
			if (event.stopPropagation) {
			    //阻止事件冒泡
				event.stopPropagation(); //非IE
			} else {
			    //阻止事件冒泡
				event.cancelBubble = true;   //IE
			}
			console.log("btn-------");
		});

		box.addEventListener("click", function() {
		//未使用event.stopPropagation()方法阻止事件冒泡
			console.log("box-------");
		});

		document.addEventListener("click", function() {
			console.log("document-------");
		});
	</script>
</body>

取消默认事件

方法一：使用event.preventDefault()方法
该方法将通知 Web 浏览器不要执行与事件关联的默认动作（如果存在这样的动作）。

在这里插入图片描述

<body>
	<a href="https://www.baidu.com/?tn=48020221_20_hao_pg&H123Tmp=nunew11" id="a1">a1取消默认事件</a>
	<a href="https://www.baidu.com/?tn=48020221_20_hao_pg&H123Tmp=nunew11" id="a2">a2未取消默认事件</a>


	<script type="text/javascript">
		var a1 = document.getElementById("a1");
		var a2 = document.getElementById("a2");

		// 取消默认事件:方法1  event.preventDefault()
		a1.onclick=function(event){
		    var event = event || window.event; //兼容性处理
		
			//跨浏览器的事件对象
			if(event.preventDefault){
				// 取消默认事件
				event.preventDefault();  //非IE
			}else{
				// 取消默认事件
				event.returnValue=false;  //IE
			}
			
			console.log("a1-------取消了默认事件");
		}
	</script>
</body>

方法二：return false;
阻止事件继续传播，事件冒泡和默认行为都被阻止。

<body>
	<a href="https://www.baidu.com/?tn=48020221_20_hao_pg&H123Tmp=nunew11" id="a1">a1删除</a>
	<a href="https://www.baidu.com/?tn=48020221_20_hao_pg&H123Tmp=nunew11" id="a2">a2删除</a>


	<script type="text/javascript">
		var a1 = document.getElementById("a1");
		var a2 = document.getElementById("a2");


		// 取消默认事件:方法2  return false
		a1.onclick = function() {
			console.log("a1-------取消了默认事件");
			return false; //事件处理函数会取消事件，不再继续向下执行。比如表单将终止提交。(阻止事件继续传播，事件冒泡和默认行为都被阻止。)
		}
	</script>
</body>

ZPD_zpd

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS 关于事件冒泡，事件捕获，阻止事件冒泡，取消默认事件

addEventListener() 方法，监听事件，向一个元素添加多个事件处理程序。第一个参数是事件的类型（比如 “click” 或 “mousedown”）。第二个参数是当事件发生时我们需要调用的函数。第三个参数是布尔值，指定使用事件冒泡还是事件捕获。此参数是可选的。事件冒泡多个元素嵌套并调用同一个事件时，由内部子元素先触发事件，再触发父元素的事件。<body> <div id="box"> <button type="button" id="bt.
复制链接

扫一扫