JS事件监听详解

最新推荐文章于 2025-02-26 11:15:50 发布

靖颀

最新推荐文章于 2025-02-26 11:15:50 发布

阅读量742

点赞数

本文链接：https://blog.csdn.net/qq_40961420/article/details/105349641

版权

本文深入解析W3C规范中的事件监听机制，包括捕获阶段、目标阶段和冒泡阶段，探讨了Netscape与IE的不同事件驱动机制及其历史演变。同时，文章提供了封装事件监听与解除绑定的方法，帮助开发者理解并运用事件监听的优势。

摘要由CSDN通过智能技术生成

事件监听

关于事件监听，W3C规范中定义了3个事件阶段，依次是捕获阶段、目标阶段、冒泡阶段。起初Netscape制定了JavaScript的一套事件驱动机制（即事件捕获）。随即IE也推出了自己的一套事件驱动机制（即事件冒泡）。最后W3C规范了两种事件机制，分为捕获阶段、目标阶段、冒泡阶段。IE8以前IE一直坚持自己的事件机制（前端人员一直头痛的兼容性问题），IE9以后IE也支持了W3C规范。

事件监听的优点

1、可以绑定多个事件

<input type="button" value="click me" id="btn3">

		常规的事件绑定只执行最后绑定的事件
		
		<input type="button" value="click me" id="btn4">

2、可以解除相应的绑定

封装事件监听

function addEventHandler(target,type,fn){
if(target.addEventListener){
target.addEventListener(type,fn);
}else{
target.attachEvent(“on”+type,fn);
}
}

function removeEventHandler(target,type,fn){
if(target.removeEventListener){
target.removeEventListener(type,fn);
}else{
target.detachEvent(“on”+type,fn);
}
}

var btn5 = document.getElementById(“btn5”);
addEventHandler(btn5,“click”,hello1);
addEventHandler(btn5,“click”,hello2);
removeEventHandler(btn5,“click”,hello1);