事件监听机制详解-优快云博客

本文深入探讨了事件监听机制，包括如何使用addEventListener绑定事件，不同阶段触发事件的区别，以及如何通过事件句柄实现事件绑定和解除绑定的灵活性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<script>
		
		var d1 = document.getElementById("d1");
		var d2 = document.getElementById("d2");
		// d1.onclick = function(e){
			
		// } 绑定事件
		// d1.onclick = null; 解绑事件
		// 事件监听，domobj.addEventListener(事件类型, 绑定的函数)
		// 事件监听机制的第三个参数表示 在哪个阶段触发
		// true表示在 捕获（capture）阶段触发 ，eventPhase 等于 1
		// d1.addEventListener("click", function(){
		// 	console.log("d1>EventListener1>"+event.eventPhase);
		// }, true);
		// // false是默认参数，表示在 冒泡（bubble）阶段触发 ，eventPhase 等于 3
		// d1.addEventListener("click", function(){
		// 	console.log("d1>EventListener1>"+event.eventPhase);
		// });
		// // 真正点击的目标是 target ，eventPhase 等于 2
		// d2.addEventListener("click", function(){
		// 	console.log("d2>EventListener>"+event.eventPhase)
		// });

		// // 所有父元素在事件传递链中都要 传递，包括 document和body
		// document.body.addEventListener("click", function(){
		// 	console.log("body"+event.eventPhase);
		// });
		// document.body.addEventListener("click", function(){
		// 	console.log("body"+event.eventPhase);
		// },true);

		// // 可以在事件监听时将事件 存入变量，这个变量叫 事件句柄（这个函数也可以叫事件句柄：handler）
		// var handler2 = null;
		// d1.addEventListener("click", handler2 = function(){
		// 	alert("EventListener2");
		// });
		// var handler3 = null;
		// d1.addEventListener("click", handler3 = function(){
		// 	alert("EventListener3");
		// });


		// 利用事件监听可以做到多个句柄绑定，同时也可以根据逻辑移除某些句柄，这样非常灵活
		var btn = document.querySelector("input");
		btn.onclick = function(){
			d1.removeEventListener("click", handler2)
		}

		// over冒泡和捕获的过程






		d1.addEventListener("mouseover", function(){
			console.log("d1 > mouseover > "+event.eventPhase);
		}, false);
		d1.addEventListener("mouseover", function(){
			console.log("d1 > mouseover > "+event.eventPhase);
		}, true);
		// d2.addEventListener("mouseover", function(){
		// 	console.log("d2 > mouseover > "+event.eventPhase);
		// });

		


	</script>