javascript事件

yuanxin 發(fā)布于2019-08-26 13:38 / 2064人閱讀

摘要：事件的本質(zhì)是程序各組成之間的一種通訊方式，也是異步編程的一種實(shí)現(xiàn)。事件如的名稱，大小寫敏感。事件發(fā)生時(shí)，就會(huì)執(zhí)行此函數(shù)。該對(duì)象有下列屬性布爾值，表示該事件是否在捕獲階段觸發(fā)監(jiān)聽函數(shù)。該方法主要用于移除添加的事件監(jiān)聽函數(shù)。

事件的本質(zhì)是程序各組成之間的一種通訊方式，也是異步編程的一種實(shí)現(xiàn)。
----摘自JavaScript標(biāo)準(zhǔn)參考教程

1.EventTarget接口

EventTarget是接收事件監(jiān)聽跟出發(fā)的接口。所有的節(jié)點(diǎn)對(duì)象都會(huì)有這個(gè)接口。
該接口提供三個(gè)實(shí)例方法。

 addEventListener:綁定監(jiān)聽事件
 removeEventListener:移除監(jiān)聽事件
 dispatchEvent：觸發(fā)事件

1.1 EventTarget.addEventListener()

   EventTarget.addEventListener()用于實(shí)現(xiàn)為節(jié)點(diǎn)或者對(duì)象綁定一個(gè)監(jiān)聽事件，一個(gè)對(duì)象或者節(jié)點(diǎn)可以綁定多個(gè)監(jiān)聽事件，但若每個(gè)監(jiān)聽事件的監(jiān)聽函數(shù)是同一個(gè)的話就只會(huì)執(zhí)行一次，其他函數(shù)會(huì)自動(dòng)被移除。

該方法接受三個(gè)參數(shù)。

target.addEventListener(type,listener[,userCapture]);

type:事件(如：click,focus)的名稱，大小寫敏感。
listener:監(jiān)聽函數(shù)（函數(shù)名）。事件發(fā)生時(shí)，就會(huì)執(zhí)行此函數(shù)。
useCapture:布爾指，表示監(jiān)聽函數(shù)是否在捕獲階段觸發(fā)，默認(rèn)值：false（函數(shù)只在冒泡時(shí)觸發(fā)）

example 1：

oDiv=document.querySelector(".div1"); 
function eventFun(){ 
   console.log("監(jiān)聽事件") 
} 
oDiv.addEventListener("click",eventFun,false);

關(guān)于參數(shù)還有另外兩個(gè)情況
1.第二個(gè)參數(shù)除了監(jiān)聽函數(shù)，還可以是具有handleEvent方法的對(duì)象
example 2:

oDiv.addEventListener("click",
   {   handleEvent:function(){
   console.log("handleEvent方法"); 
   } 
  });

2.第三個(gè)參數(shù)除了布爾值useCapture，還可以是一個(gè)屬性配置對(duì)象。該對(duì)象有下列屬性

capture：布爾值，表示該事件是否在捕獲階段觸發(fā)監(jiān)聽函數(shù)。

once：布爾值，表示監(jiān)聽函數(shù)只觸發(fā)一次，然后自動(dòng)移除。

passive：布爾值，表示監(jiān)聽函數(shù)不會(huì)調(diào)用事件的preventDefault方法。如果監(jiān)聽函數(shù)調(diào)用了，瀏覽器會(huì)自動(dòng)忽略這個(gè)要求，并在控制臺(tái)輸出一行警告。

1.2 EventTarget.removeEventListener()
該方法主要用于移除addEventListener添加的事件監(jiān)聽函數(shù)。該方法沒有返回值。用法與addEventListener()方法完全一值。

1.3 EventTarget.dispatchEvent()
EventTarget.dispatchEvent()方法在當(dāng)前節(jié)點(diǎn)上出發(fā)指定事件，從而觸發(fā)監(jiān)聽函數(shù)的執(zhí)行。該方法返回一個(gè)布爾值，只要一個(gè)監(jiān)聽函數(shù)調(diào)用了Event.preventDefault()，則返回false，否則返回true。

 EventTarget.dispatchEvent(event)

example 3:

oDiv.addEventListener("click",eventFun,false);
 var event = new Event("click);
 oDiv.dispatchEvent(event);//自動(dòng)執(zhí)行click事件。

2.監(jiān)聽函數(shù)

瀏覽器的事件模型就是通過監(jiān)聽函數(shù)來對(duì)事件作出反應(yīng)的，瀏覽器監(jiān)聽到這個(gè)事件就會(huì)執(zhí)行對(duì)應(yīng)的監(jiān)聽函數(shù)。
javascript中有三種方法可以為事件綁定監(jiān)聽函數(shù)

2.1 html的on-屬性(事件名)

 
 //這樣綁定的是函數(shù)名+(),這樣當(dāng)事件發(fā)生時(shí)就會(huì)立即執(zhí)行函數(shù)

2.2元素節(jié)點(diǎn)的事件屬性

div.onclick=function(){
  console.log("節(jié)點(diǎn)事件")
}

2.3 EventTarget.addEventListener()
使用方法同第一小節(jié)

2.4 總結(jié)
第一種方法違反了html與javascriot代碼分離的原則，不利于代碼分工，不推薦使用。
第二種方法，同一個(gè)事件只能定義一個(gè)監(jiān)聽函數(shù)。如果定義多次，后一次會(huì)把前面的覆蓋掉。不推薦使用。
第三種是比較推薦且官方指定的監(jiān)聽函數(shù)方法，原因如下：

1.同一個(gè)事件可以添加多個(gè)監(jiān)聽函數(shù)。
2.能夠指定在哪個(gè)階段觸發(fā)監(jiān)聽函數(shù)。
3.除了DOM節(jié)點(diǎn)，其他對(duì)象(比如：window,XMLHttpRequest等)也有這個(gè)接口，它等于是整個(gè)javascript統(tǒng)一的監(jiān)聽函數(shù)接口。