JavaScript 事件对象详解与跨浏览器兼容处理

事件对象概述

事件对象由浏览器在事件触发时自动创建，其中封装了事件类型、鼠标坐标等关键信息。

访问事件对象的属性需遵循 event.属性 的格式规范。

关于事件对象的使用，需注意以下几点说明：

event 对象用于表示事件状态，包括触发该事件的元素、鼠标位置与状态、按键信息等。

event 对象仅在事件发生期间有效，事件结束后即失效。

Firefox 与 IE 对 event 的处理机制不同：IE 中 event 是全局变量，随时可用；而 Firefox 中 event 是通过参数传递的运行时临时变量。

在 IE 和 Opera 中，event 表现为 window.event；而在 Firefox 中，event 直接作为参数传递。

对于事件源对象，IE 使用 window.event.srcElement，Firefox 使用 event.target，Opera 则两者皆支持。

事件绑定方法

事件绑定

在 JavaScript 中为对象（如控件）绑定事件，通常有两种实现方式。

首先在 <head> 标签内定义处理函数：

<script type="text/javascript">
function clickHandler()
    {
//do something
alert("button is clicked!");
    }
</script>

第一种事件绑定方法：

<input type="button" value="button1" onclick="clickHandler();"><br/>

<input type="button" id="button2" value="button2">
<script type="text/javascript">
var v = document.getElementById("button2");
v.onclick = clickHandler; //这里用函数名，不能加括号
</script>

其他实例

实例1：

<!DOCTYPE html>
<html>
<head>
<title>eventTest.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script>
function mOver(object) {
object.color = "red";
    }
function mOut(object) {
object.color = "blue";
    }
</script>
</head>
<body>
<font style="cursor:help"
onclick="window.location.href='http://www.baidu.com'"
onmouseover="mOver(this)" onmouseout="mOut(this)">欢迎访问</font>
</body>
</html>

实例2：

<!DOCTYPE html>
<html>
<head>
<title>eventTest2.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body>
<script type="text/javascript">
function getEvent(event) {
alert("事件类型： " + event.type);
        }
document.write("单击...");
document.onmousedown = getEvent;
</script>
</body>
</html>