IE事件模型与DOM事件模型

最新推荐文章于 2024-07-25 08:06:37 发布

beyond667

最新推荐文章于 2024-07-25 08:06:37 发布

阅读量3.7k

点赞数

分类专栏： j2ee 文章标签： ie 浏览器 javascript button html 编程

本文链接：https://blog.csdn.net/beyond667/article/details/7343264

版权

j2ee 专栏收录该内容

25 篇文章 1 订阅

订阅专栏

当我们进行javascript编程的时，（至少）需要考虑两种模型：一种IE模型，事实规范，浏览器IE；另一种DOM2模型，是行业规范，浏览器如：火狐，谷歌.

IE模型，此种访问事件的方式是通过隐式可用的全局对象event。而DOM2规范的事件对象由系统创建，作为函数参数隐式传入事件处理器。

<body>
<!-- 绑定事件处理器时，将event作为参数传入 -->
<button οnclick="clickHandler(event);">按钮</button>
<script type="text/javascript">
	function clickHandler(evt)
	{
		alert(evt.srcElement.innerHTML);//evt.srcElement返回发生事件的HTML元素
	}
</script>
</body>

输出结果：点击“按钮”后，输出此button的value值

DOM2

<body>
<!-- 绑定事件处理器时，将event作为参数传入 -->
<button id="a">按钮</button>
<script type="text/javascript">
//定义一个形参evt
function clickHandler(evt)
{
//DOM 2的事件对象将作为第一个参数传入clickHandler对象
alert(evt.target.innerHTML);//eve.target返回触发事件的事件源
}
//为按钮a绑定事件处理器
document.getElementById("a").οnclick=clickHandler;//DOM2规范的事件对象由系统创建，作为函数参数隐式传入事件处理器
</script>
</body>

下面介绍兼容浏览器的方法

<body>
<button id="a">按钮</button>
<script type="text/javascript">
//定义一个形参evt
function clickHandler(evt)
{
	//对于IE浏览器，事件作为隐式可用的全局对象event
	if (!evt) 
	{
		evt = window.event
	}
	//对于DOM 2事件模型，访问事件源用target属性
	if (evt.target)
	{
		alert(evt.target.innerHTML);
	}
	//对于IE浏览器
	else
	{
		alert(evt.srcElement.innerHTML);
	}
}

//为按钮a绑定事件处理器
document.getElementById("a").οnclick=clickHandler;
</script>
</body>
这样就兼容了不同浏览器