跨浏览器解决事件处理程序兼容问题

最新推荐文章于 2024-05-05 01:42:54 发布

原创最新推荐文章于 2024-05-05 01:42:54 发布 · 437 阅读

0 ·

CC 4.0 BY-SA版权

javascript/DOM操作专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一种跨浏览器兼容的事件处理方法，通过封装统一的事件添加和移除接口，解决了不同浏览器间事件处理机制的差异问题。示例代码展示了如何为按钮元素添加点击事件，并兼容了DOM2级、IE及DOM0级事件模型。

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8"/>
	<title>跨浏览器解决事件处理程序兼容问题</title>
</head>
<body>
<div>
	<input type="button" value="btn" id="btn" />
</div>
	<script type="text/javascript">
		var btn=document.getElementById('btn');
		function showMessage(){
			alert("hello world!");
		}
		var eventUtil={
			
			addHandler:function(element,event,handler){   //DOM2级事件处理程序
				if(element.addEventListener)
					element.addEventListener(event,handler,false);
				else if(element.attachEvent)              //IE事件处理程序
					element.attachEvent('on'+event,handler);
				else                                      //DOM0级事件处理程序
					element['on'+event]=handle;
			},

			removeHandler:function(element,event,handler){
				if(element.removeEventListener)			  //DOM2级事件处理程序
					element.removeEventListener(event,handler,false);
				else if(element.detachEvent)              //IE事件处理程序
					element.detachEvent('on'+event,handler);
				else                                      //DOM0级事件处理程序
					element['on'+event]=null;
			}
		}
		eventUtil.addHandler(btn,'click',showMessage);
	</script>
</body>
</html>