事件是將JavaScript腳本與網頁聯系在一起的主要方式,是JavaScript中最重要的主題之一,深入理解事件的工作機制以及它們對性能的影響至關重要。本文將詳細介紹JavaScript的事件機制,並對比分析了浏覽器之間的不同,具體內容包括事件流、事件處理程序綁定方式、事件對象
JavaScript與HTML之間的交互就是通過事件實現的。
事件:用戶或浏覽器自身執行的某種動作,換言之,文檔或浏覽器發生的一些特定的交互瞬間。
事件處理程序:又稱事件偵聽器,事件發生時執行的代碼段。
事件流描述的是從頁面中接收事件的順序
事件捕獲:事件從最不精確的對象(document 對象)開始觸發,然後到最精確。
IE9、Safari、Chrome、Opera、Firefox都是從window對象開始捕獲,冒泡到window對象
同時支持 兩種基本事件模型,規定事件流包括三個階段:事件捕獲階段、處於目標階段、事件冒泡階段
DOM事件處理程序綁定時,程序員可以自己選擇綁定事件時采用事件捕獲還是事件冒泡。
IE只支持事件冒泡,不支持事件捕獲。
事件處理程序屬性名為“on”+事件名
程序作用域為元素的作用域,this指向元素本身
方法一:將函數值賦給一個事件處理程序屬性。如下
var btn=document.getElementById("myBtn");
btn.onclick=function(){
//具體代碼段
}
此種方法只能添加一個事件處理程序
方法一:通過addEventListener()方法。如下
addEventListener("事件名",事件處理程序,ture/false:在事件捕獲/冒泡階段調用模型)
對應的事件處理程序移除方法:removeEventListener(),參數必須相同。
注意:此種方法,以匿名函數添加的事件處理程序無法被移除
此方法可以添加多個事件處理程序
IE+Oprea浏覽器
程序作用域為全局作用域,this指向window對象
添加方法:attachEvent("on+事件名",事件處理程序)
移除方法:detachEvent("on+事件名",事件處理程序)
在觸發某個事件時,會產生一個相應的事件對象,這個對象包含所有與事件相關的信息。如:導致事件的元素、事件的類型等
構造EventUtil對象,為其添加可兼容各浏覽器的事件處理方法
var =EventUtil{
//添加事件處理程序//
addHandler:function(element,type,handler){
if(element.addEventListener){
addEventListener(type,handler,false);
}else if(element.attachEvent){
attachEvent("on"+type,handler);
}else{
element["on"+type]=handler;
}
}
//移除事件處理程序//
removeHandler:function(element,type,handler){
if(element.removeEventListener){
removeEventListener(type,handler,false);
}else if(element.detachEvent){
detachEvent("on"+type,handler);
}else{
element["on"+type]=null;
}
}
//獲得事件對象//
getEvent:function(event){
return event ? event : window.event;
}
//獲得事件的目標//
getTarget:function(event){
return event.target || event.scrElement;
}
//取消事件的默認行為//
preventDefault:function(event){
if(event.preventDefault){
event.preventDefault();
}else{
event.returValue=false;
}
}
//阻止事件進一步冒泡//
stopPropagation:function(event){
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble=true;
}
}
}