JavaScript事件对象（Event Object）是在事件被触发时由浏览器自动创建的对象，它包含了与事件相关的所有信息，我们可以通过JS事件对象来获取一些有用的信息，如事件类型、触发事件的元素、鼠标的位置等。
以下是JS事件对象常用的属性：
type：事件类型，如"click"、"mouseover"等；target：触发事件的元素；currentTarget：事件绑定的元素；pageX：鼠标指针的水平位置，相对于文档的左侧边缘；pageY：鼠标指针的垂直位置，相对于文档的顶部边缘；keyCode：触发事件的按键的键码值；shiftKey、ctrlKey、altKey：是否按下了Shift、Ctrl、Alt键。以下是JS事件对象常用的方法：
preventDefault()：取消事件的默认行为；stopPropagation()：停止事件的传播；stopImmediatePropagation()：立即停止事件的传播。以下是一个JS事件对象的使用示例：
<!DOCTYPE html>
<html>
<head>
<title>JS事件对象使用示例</title>
<script type="text/javascript">
var btn = document.getElementById("btn");
btn.onclick = function(event) {
alert("触发事件的元素：" + event.target.tagName);
alert("事件类型：" + event.type);
alert("键码值：" + event.keyCode);
alert("鼠标位置：" + event.pageX + "," + event.pageY);
event.preventDefault(); //取消事件的默认行为
}
</script>
</head>
<body>
<button id="btn">点击我</button>
</body>
</html>
以上代码中，我们给button元素绑定了一个click事件，当点击该元素时，事件会触发。在事件的处理函数中，我们用JS事件对象来获取一些有用的信息，如事件类型、触发事件的元素、键码值等，并使用event.preventDefault()方法来取消事件的默认行为。
另外一个JS事件对象的使用示例，如下：
<!DOCTYPE html>
<html>
<head>
<title>JS事件对象使用示例</title>
<script type="text/javascript">
var box = document.getElementById("box");
box.addEventListener("mouseover", function(event) {
event.target.style.backgroundColor = "red";
event.stopPropagation(); //停止事件的传播
}, false);
document.addEventListener("mouseover", function(event) {
event.target.style.backgroundColor = "green";
}, false);
</script>
</head>
<body>
<div id="box"></div>
</body>
</html>
以上代码中，我们给一个div元素绑定了一个mouseover事件，并使用event.target.style.backgroundColor来修改该元素的背景色为红色。同时，在鼠标移入该元素时，还会触发document元素上的mouseover事件，我们在该事件的处理函数中使用event.target.style.backgroundColor来修改背景色为绿色。为了避免事件在document上的传播，我们使用了event.stopPropagation()方法来停止事件的传播。
本文链接：http://task.lmcjl.com/news/9589.html