②事件对象的属性
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; };
