跨浏览器访问事件的方法

最新推荐文章于 2024-10-16 00:32:26 发布

最新推荐文章于 2024-10-16 00:32:26 发布 · 182 阅读

文章标签：

#浏览器 #访问事件 #方法

JavaScript 专栏收录该内容

188 篇文章

订阅专栏

本文介绍了一种跨浏览器处理DOM事件的方法，通过绑定事件处理器到DOM对象的属性上，实现了在不同浏览器下统一处理事件源对象的目标。代码示例展示了如何在谷歌浏览器和IE浏览器中获取被点击按钮的内容。

一介绍

1、DOM事件模型和IE事件模型访问事件对象的方式完全不同，因此需要写一个跨浏览器的程序。

2、实现跨浏览器的通常做法是：将事件处理函数绑定到DOM对象的属性上。

二代码

<!DOCTYPE html>
<html>
<head>
	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
	<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
	<title> 跨浏览器访问事件 </title>
</head>
<body>
	<button id="a">按钮</button>
	<script type="text/javascript">
	// 定义一个形参evt
	var clickHandler = function(evt)
	{
		// 对于DOM事件模型，访问事件源用target属性
		if (evt)
		{
			alert(evt.target.innerHTML);
		}
		// 对于IE浏览器
		else
		{
			alert(window.event.srcElement.innerHTML);
		}
	}
	// 为按钮a绑定事件处理器
	document.getElementById("a").onclick = clickHandler;
	</script>
</body>
</html>

三运行结果

下面的运行结果分别是在谷歌浏览器和IE浏览器上执行的结果。