Firefox下的event对象

有时候在某个事件被触发时,我们希望能得到事件对象本身。IE下很简单,用window.event来代表事件对象,经测试,chrome、opera也支持window.event,所以在这几个浏览器下推荐使用window.event,简单!

但是Firefox并不支持window.event,而是把事件对象作为第一个参数传给事件处理函数,显式或者隐式传递都可以,IE9既支持window.event又支持Firefox下的事件对象。例如:

<input type="button" id="btn" value="click me" />
<script type="text/javascript">
document.getElementById("btn").onclick = function(e){
     alert(e.type);  //"click"
};
</script>

<input type="button" id="btn" value="click me" />
<script type="text/javascript">
document.getElementById("btn").onclick = function(){
     alert(arguments[0].type);  //“click”
};
</script>

但事情没那么简单(这也是推荐使用window.event的原因),当在标签内定义事件响应函数时又是另一回事了。这里借用论坛上一个帖子,楼主想点击链接时改变窗口的背景颜色并取消默认的处理程序(载入新的网页):

<html>
<body bgcolor="#FFFFFF">
<div><a href="http://www.baidu.com" onClick="a();return false;">百度!</a></div>
<script type="text/javascript">
function a()
{
    document.body.bgColor="#669900";
}
</script>
</body>
</html>

return false可以取消默认的事件处理程序,上面的做法自然是可以的。取消默认的事件处理函数还可以用preventDefault(支持传递事件对象的浏览器下使用)和returnValue(支持window.event对象的浏览器下使用)。所以上面的程序又可以改为:

<html>
<body bgcolor="#FFFFFF">
<div><a href="http://www.baidu.com" onClick="a()">百度!</a></div>
<script type="text/javascript">
function a()
{
    document.body.bgColor="#669900";
	if (arguments[0]&&arguments[0].preventDefault) {
		arguments[0].preventDefault();
	} else {
		window.event.returnValue = false;
	}
}
</script>
</body>
</html>

但此时你会发现上面的程序在Firefox下是无效的!不是说Firefox下会将事件对象作为第一个参数传递给处理函数吗?但要说明的是(不知道原因),标签内定义的事件处理程序里如果用的是封装好的函数是无法访问event对象的,arguments[0]也不行,除非直接用js语句作为标签内的事件处理程序,例如以下的的程序在Firefox下也是正常的:

<html>
<body bgcolor="#FFFFFF">
<div><a href="http://www.baidu.com" onClick="document.body.bgColor='#669900';  //onClick直接用js语句
	if (arguments[0]&&arguments[0].preventDefault) {
		arguments[0].preventDefault();
	} else {
		window.event.returnValue = false;
	}">百度!</a></div>
</body>
</html>
但是封装成函数就不行了,像下面的程序在Firefox也达不到想要的效果:
<html>
<body bgcolor="#FFFFFF">
<div><a href="http://www.baidu.com" onClick="(function(){document.body.bgColor='#669900';  //封装成函数
	if (arguments[0]&&arguments[0].preventDefault) {
		arguments[0].preventDefault();
	} else {
		window.event.returnValue = false;
	}})()">百度!</a></div>
</body>
</html>
综上所述,在Firefox下访问event对象的话有两种方式,要么在js里定义事件处理程序,如果要在标签内定义事件处理程序的话那么不能封装成函数,而且只能用arguments[0]表示。
已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页