JS和事件对象

什么是事件对象？

当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递给响应函数。

这里需要注意三点：

1. 这个实参是在没有定义形参的情况下由浏览器传入；
2. 响应函数被触发几次，浏览器就将一个事件对象传入几次；
3. 这个事件对象中封装了当前事件相关的一切信息。比如，鼠标的坐标等，可以通过鼠标/键盘属性获取。

通过实例演示，如何通过事件对象来获取鼠标坐标

<div id="areaDiv"></div>
<div id="showMsg"></div>

#这里有两个div，分别定义两个id

#areaDiv{
	width = 300px;
	height = 200px;
	border = 1px black solid;
}
#showMsg{
	width = 300px;
	height = 100px;
	border = 1px black solid;
}

#分别给两个div设置样式

实现的功能：鼠标在#areaDiv中移动，在#showMsg中显示鼠标坐标（x , y）

var areaDiv = document.getElementId("areaDiv");
var showMsg = document.getElementId("showMsg");
areaDiv.onmousemove = function(event){
	//这里可以定义一个形参event，方便获取浏览器传入的事件对象
	//clientX和clientY属性分别获取鼠标指针的水平坐标和垂直坐标
	var x = event.clientX;
	var y = event.clientY;

	//在showMsg中显示（x , y）
	showMsg.innerHTML = "x = "+ x + ", y = " +y;
};

兼容性问题：

在IE8中，响应函数被触发时，浏览器不会传递事件对象；在IE8及以下浏览器中，事件对象作为window的属性保存

因此，如果要兼容IE8及以下浏览器，需要在获取鼠标坐标前加上以下代码：

//解决事件对象的兼容性问题
event = event || window.event;