JavaScript6 事件监听
JavaScript、CSS、DOM高级篇
第6章 事件
事件可以说是JavaScript最令人瞩目的特性，因为它提供了一个平台，让用户不仅可以浏览页面中的内容，而且能够跟页面进行交互。本章围绕JavaScript处理事件的特性进行讲解，主要包括事件流、事件的监听、事件的类型以及浏览器的兼容性问题等。
6.1 事件流(event flow)
浏览器的事件模型分为两种：捕获型事件和冒泡型事件。
冒泡型（dubbed bubbling） 事件指的是时间按照从最特定的时间目标到最不特定的时间目标的顺序逐一触发。
单击鼠标时间像冒泡一样从DOM层次结构的最低端往上一级级升。
捕获型!=冒泡型
6.2 事件监听
6.2.1通用的监听方法
事件处理函数(event handle)页面中的事件都需要一个函数来响应。亦称之为事件监听函数(event listener)
6.2.2 IE中的监听方法
IE浏览器中，每个元素都有两个方法来处理时间的监听，分别是attachEvent()和detachEvent()。
[object].attachEvent("event_handler",fnHandler);
event_handler 表示事件的名称，如“onclick”“onload” “onmouseover”等，fnHandler即为监听函数的名称。 注：函数名称，而不是加上括号的运行结果，类似“fnHandler()”是错误的写法。
6.2.3 标准DOM的监听方法
[object].addEventListener("event_name",fnHandler,bCapture);
[object].removeEventListener("event_name",fnHandler,bCapture);
6.3 事件对象
浏览器中的时间都是以对象的形式存在的。
在IE浏览器中事件对象是window对象的一个属性event，访问是通常采用如下方法。
oP.onclick = function(){
var oEvent = window.event;
}
而标准的DOM中规定event对象必须作为惟一的参数传给事件处理函数，因此在类似Firefox浏览器中访问事件通常将其作为参数，代码如下:
oP.onclick = function(oEvent){
}
兼容后：
oP.onclick = function(oEvent){
if(window.event) oEvent = window.event;
}
浏览器获取了时间对象之后就可以通过它的一系列属性和方法来处理各种具体事件了。如鼠标时间、键盘市静安和浏览器事件等。
var sType = oEvent.type;
这对于同一个函数处理多种事件时十分有用。
<html> <head> <script language = "javascript"> function handle(oEvent) { var oDiv = document.getElementById("display"); alert("where"); if(window.event)oEvent = window.event; if(oEvent.type == "click") { oDiv.innerHTML +="你单击了我  "; } else if(oEvent.type =="mouseover") oDiv.innerHTML +="你移动到我上方  "; } window.onload = function(){ var oImg = document.getElementsByTagName("img")[0]; oImg.onclick = handle; oImg.onmouseover = handle; } </script> </head> <body> <img src = "images\7.jpg" border = "0"> <div id = "display">where</div> </body> </html>
注：1、通过便签找到节点 getElementsByTagName 元素是Element有一个s的。
2、标签是数组 getElementsByTagName("img")[0] 指明那一个img 节点
Shift、Alt、Ctrl这是那个按键时，两类浏览器使用的方法也完全一样，具有shiftKey、altKey和ctrlKey这个属性。
var bShift = oEvent.shiftKey;
var bAlt = oEvent.altKey;
var bCtrl = oEvent.ctrlKey;
事件目标
假设为<p>元素分配onclick事件处理函数，触发click事件时<p>就被认为是目标。
IE浏览器中目标包含在event对象的srcElement属性中。
var oTarget = oEvent.srcElement;
而在 标准的DOM浏览器中，目标则包含在target属性中，
var oTarget = oEvent.target
6.4 事件的类型（鼠标、键盘和浏览器）
6.4.1 鼠标事件
click 单击鼠标左键时触发
dbclick 双击鼠标左键时触发
mousedown 单击任意一个鼠标按键是触发
mouseout 鼠标指针在某个元素上，移出该元素边界时触发
mouseup 松开鼠标任意一个按键时触发
mousemove 鼠标指针在某个元素上移动持续触发
<script language = "javascript"> function handle(oEvent){ var oDiv = document.getElementById("display"); if(window.event)oEvent = window.event; oDiv.innerHTML += oEvent.type + "<br>"; } window.onload = function(){ var oImg = document.getElementsByTagName("img")[0]; oImg.onmousedown = handle; oImg.onmouseup = handle; oImg.onmouseout = handle; oImg.onclick = handle; oImg.ondbclick = handle; oImg.onmouseover = handle; } </script>
