携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第17天，点击查看活动详情
②事件对象的属性
button 返回当事件被触发时，哪个鼠标按钮被点击。 clientX 返回当事件被触发时，鼠标指针相对于页面正文的水平坐标。 clientY 返回当事件被触发时，鼠标指针相对于页面正文的垂直坐标。 screenX 返回当某个事件被触发时，鼠标指针相对于屏幕的水平坐标。 screenY 返回当某个事件被触发时，鼠标指针相对于屏幕的垂直坐标。 ctrlKey 返回当事件被触发时，"CTRL" 键是否被按下。 shiftKey 返回当事件被触发时，"SHIFT" 键是否被按下。 altKey 返回当事件被触发时，"ALT" 是否被按下。 type 返回事件的类型。 keyCode 返回键的虚拟键盘代码或此键的字符的Unicode码。
③事件源的获取
在事件处理程序中可能想要获得对事件源的引用，即事件是由哪个对象引发的。 可以使用事件对象的srcElement属性访问事件源，但这只适用于IE浏览器。 其他浏览器中可使用target属性代替。
事件源的获取示例：
function doclick(event) {
var targetElement;
if(document.all) {
targetElement = event.srcElement;
} else {
targetElement = event.target;
}
alert(targetElement.value);
}
<form>
<input type="button" name="btnA" id="btn_1" value="按钮A" οnclick="doclick(event);" />
<input type="button" name="btnB" id="btn_2" value="按钮B" οnclick="doclick(event);" />
</form>
④阻止事件的默认动作
事件处理程序还阻止浏览器执行此事件发生后的默认动作。 在IE浏览器中，可以为事件对象的returnValue属性赋值为false实现这一目标， 而在其他浏览器中则要调用事件对象的preventDefult()方法。
5、典型应用
- 跟随滚动条移动的广告
- 表单数据有效性验证
- 即时显示验证失败的错误消息
- 列表框级联
例如鼠标移动，实时显示鼠标坐标实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#eventArea {
border: 1px solid black;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<!-- 用div作为鼠标移动区域 -->
<div id="eventArea"></div>
<!-- 在p标签内显示鼠标坐标 -->
<p id="showData"></p>
</body>
<script type="text/javascript">
// 根据id找到div标签对应的元素对象
var divEle = document.getElementById("eventArea");
// 根据id找到p标签对应的元素对象
var pEle = document.getElementById("showData");
// 声明事件响应函数
function whenMouseMove(event){
pEle.innerText = event.clientX + " " + event.clientY;
}
// 将事件响应函数赋值给对应的事件属性
// onmousemove表示在鼠标移动的时候
divEle.onmousemove = whenMouseMove;
</script>
</html>
简化代码：
document.getElementById("eventArea").onmousemove = function (event){
document.getElementById("showData").innerText = event.clientX + " " + event.clientY;
};
