DOM事件学习手记 DOM事件处理

1. 事件流
   事件流----描述的是从页面中接受事件的顺序。
   1.1 IE 事件冒泡流
   即事件最开始由具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播至最不具体的那个节点（文档）。
   1.2 NetScape 事件捕获流
   事件捕获流：不太具体的节点应该更早接收到元素，而最具体的节点最后接收到事件

2 事件处理程序
2.1 html事件写法：
直接把事件写在html代码中，后期修改麻烦。
缺点：HTML和js代码高耦合，如果修改，就要修改两个地方--HTML元素内和script函数。
例子：

1. <input id="myButton" type="button" value="Press Me" onclick="alert('thanks');" >
   2.2 .DOM0级事件处理程序
   用较传统的方式，把一个函数赋值给一个事件的处理程序属性。
   简单、跨浏览器。
   先获取对象，再对对象的属性进行事件处理。
   例子：
2. document.getElementById("myButton").onclick = function () {
3. alert('thanks');
4. }
5. document.getElementById("myButton").onclick = null // 删除事件

2.3 DOM2级事件处理程序
DOM2级事件定义了两个方法，用于处理指定和删除事件处理程序的操作：
addEventListener()和removeEventListener()
【接收三个参数】：要处理的事件名、作为事件处理程序的函数和布尔值。
其中，true表示在捕获阶段调用事件处理程序，false表示在冒泡阶段调用事件处理程序。一般设置为false，即添加到冒泡阶段，能兼容更多的浏览器。
例子：

1. document.getElementById("myTest").addEventListener("click", function(){alert(1)}, false);
2. document.getElementById("myTest").removeEventListener("click", function(){alert(1)}, false); //删除事件
   2.4 IE事件处理程序
   attachEvent()添加事件，detachEvent()删除事件。接收相同的两个参数：事件处理程序的名称和事件处理程序的函数（把布尔值去掉了，因为IE8以及更早的版本只支持事件冒泡，所以默认为添加到冒泡阶段）
   例子：
3. document.getElementById("myTest").attachEvent("onclick", function(){alert(1)});

4. document.getElementById("myTest").detachEvent("onclick", function(){alert(1)}); // 删除事件
   2.5 跨浏览器事件处理
   将添加事件addHandle与删除事件removeHandle两个方法封装在eventUtil中。
   addHandle:function(element,type,handler)
   第一个参数是给谁添加，第二个参数是添加什么，第三个参数是触发了什么操作。
   例子：
   var eventutil = {
   addHandler:function (element,type,handler) {
   if(element.addEventListener){
   element.addEventListener(type,handler,false);
   }else if(element.attachEvent){
   element.attachEvent('on'+type,handler);
   }else{
   element['on'+type]=handler;
   }
   }, //该处有一个逗号！
   removeHandler:function (element,type,handler) {
   if(element.removeEventListener){
   element.removeEventListener(type,handler,false);
   }else if(element.detachEvent){
   element.detachEvent('on'+type,hander);
   }else{
   element['on'+type]=null;
   }
   }
   }
   eventutil.addHandler(btn3,"click",showMessage);
   // btn3为获取的对象，showMessage为定义的函数

5. 事件对象
   3.1 DOM中的事件对象 event
   type: event.type
   发生的事件的类型，例如"click", "mouseover"
   target: event.target
   发生事件的节点，可能与currentTarget不同
   currentTarget:
   　　　　正在处理事件的节点，如果在capturing阶段和冒泡阶段处理事件，这个属性就与target属性不同。在事件监听函数中应该用这个属性而不是this
   stopPropagation(): event.stopPropagation
   　　　　可以阻止事件从当前正在处理他的节点传播
   preventDefault(): enent.preventDefault
   　　　　阻止浏览器执行与事件相关的默认动作，与0级DOM中返回false一样
   clientX, clientY:
   　　　　鼠标相对于浏览器的x坐标y坐标
   screenX, screenY:
   　　　　鼠标相对于显示器左上角的x坐标y坐标

3.2 IE Event对象常用属性
type:
兼容DOM的type属性
srcElement: 　　　　　　
兼容DOM的target属性
clientX, clientY:
兼容DOM的clientX, clientY属性
cancelBubble:
布尔值，设为true同调用stopPropagation()
returnValue:
布尔值，设为false同调用preventDefault()
例子：一个封装好的事件函数，
调用方法。//eventUtil.addHandler(element,type,handler) element为元素对象，type为click等事件，handler为触发的函数。

var eventUtil = {
addHandler:function (element,type,handler) {
if(element.addEventListener){
element.addEventListener(type,handler,false);
}else if(element.attachEvent){
element.attachEvent('on'+type,hander);
}else{
element['on'+type]=hander;
}
}, //该处有一个逗号！
removeHandler:function (element,type,handler) {
if(element.removeEventListener){
element.removeEventListener(type,handler,false);
}else if(element.detachEvent){
element.detachEvent('on'+type,hander);
}else{
element['on'+type]=null;
}
},
getElement:function (event) {
return event.target || event.srcElement;
},
getEvent:function (event) {
return event?event:window.event;
},
preventDefault:function (event) {
if(event.preventDefault){
event.preventDefault()
}else{
event.returnValue = false;
}
},
stopPropagation:function (event) {
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble = true;
}
},
preventEvent:function (event) {
if(event.preventDefault){
enent.preventDefault()
}else{
eventReturnValue=false;
}
},
stopPropagation:function (enent) {
if(event.stopPropagation) {
event.stopPropagation()
}else{
enent.cancelBubble=true;
}
}
}