JavaScript高级程序设计读书笔记--事件

事件流

描述从页面中接受事件的顺序；IE事件冒泡流，其他事件捕获流。

事件处理程序

响应某个事件的函数-事件处理程序（事件侦听器）

• html事件处理程序

<form action="">
    <input type="text" name="username" value=""/>
    <input type="button" onclick="alert(username.value)" />
</form>
<input type="button" onclick="try{show();}catch(ex){}" />

• DOM0级事件处理程序（元素的方法，this指向该元素）事件流的冒泡阶段被处理。
  
  • 元素的方法，this指向该元素，事件流的冒泡阶段被处理。

ali.onclick = function(){
    alert(this.id)
};
ali.onclick = null; //删除事件处理程序

• DOM2级事件处理程序

  • DOM2级事件处理程序（addEventListener()，removeEventListener()）所属元素作用域内 参数三个：处理事件名，作为事件处理的函数，布尔（true->捕获，flase->冒泡）。

  • 可以添加多个事件处理程序。

  • 只能用removeEventListener()，移除时传入的参数需与添加是相同。

  • 一般将事件处理程序添加在冒泡阶段，兼容更多的浏览器。

• IE的事件处理程序。

  • attachEvent()，detachEvent()接受相同的两个参数，事件处理名称与事件处理程序函数。冒泡阶段，全局作用内运行。

  • 可添加多个事件处理程序，相反顺序触发。

oUl.attachEvent("onclick",function(){
    alert(this == window);
});

• 跨浏览器的事件处理程序

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,handler);
        }else{
            element["on"+type] = null;
        }
    }
}

事件对象

event对象包含所有与事件相关的信息。所有浏览器都支持它。

• DOM中的事件对象

  • event.type 被触发的事件类型

  • 在事件处理程序内部对象this == currentTarget == target

  • 通过一个函数处理多个事件，可以使用type

  • 阻止事件默认行为，preventDefault()，前提，cancelable的属性为true。 stopPropagation()用于立即停止事件在DOM层次中的传播，即取消事件的捕获或者冒泡。前提，bubbles为true。

  • eventPhase属性，确定事件流当前处于哪个解阶段。

document.body.onclick = function(event){
    alert(event.currentTarget == document.body);
    alert(this == document.body);
    alert(event.target == document.body);//false
    alert(event.target == oUl);//true
}

ali[0].onclick = function(event){
    alert(event.eventPhase);
};//2

oUl.addEventListener("click",function(event){
    alert(event.eventPhase);
},true);//1

oUl.onclick = function(event){
    alert(event.eventPhase);
};//3

当eventPhase等于2的时候，target，currentTarget，this相等

• IE中的事件对象

访问IE中event有几种不同的方式，取决于指定事件处理程序的方法。

事件处理方法	访问IE中event对象的方式
DOM0级方法	window对象的一个属性 ：window.event
DOM2级方法	1.event对象通过参数被传入事件处理函数 btn.attachEvent(“click”,function(event){})；2.通过window.event
HTML特性	通过event变量来访问event对象

IE中事件对象与DOM中的事件对象的不同

特性	DOM	IE
取消默认行为	event.preventDefault()	returnValue =false
是否取消事件的默认行为	cancelable	\
是否可使用取消事件冒泡或捕获	bubbles	\
取消事件捕获或冒泡，同时阻止任何事件处理程序被调用	event.stopProtagation()	cancelBubble = true，只能取消冒泡
事件的目标	target	srcElement

• 跨浏览器的事件对象

var EventUtil = {
    getEvent:function(event){
        return event ? event : window.event;
    },
    getTarget:function(event){
        return event.target || event.srcElement;
    },
    preventDefault:function(event){
        if(event.preventDefault){
            event.preventDefault();
        }else{
            event.returnValue = false;
        }
    },
    stopPropagation:function(event){
        if(event.stopPropagation){
            event.stopPropagation();
        }else{
            event.cancelBubble = true;
        }
    },
    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,handler);
        }else{
            element["on"+type] = null;
        }
    }
};

a1.onclick = function(event){
    event = EventUtil.getEvent();
    EventUtil.preventDefault(event);
};