摘要:有的時候注冊事件的監聽者并不是事件的觸發者,實際事件的觸發者是,事件目標是一個由可以接收事件的對象實現的接口,并且可以為它們創建偵聽器。中刪除事件偵聽器。將事件分派到此。事件本身包含所有事件通用的屬性和方法。
dom event簡介
Event接口表示在DOM中發生的任何事件; 一些是用戶生成的(例如鼠標或鍵盤事件),而其他由API生成(例如指示動畫已經完成運行的事件,視頻已被暫停等等)。事件添加有以下幾個方法:
EventTarget.addEventListener
注意: Internet Explorer 6-8 并不支持這個方法,而是提供了類似的 element.attachEvent API 。如果要進行跨瀏覽器使用,請考慮使用有效的JavaScript 庫。
html的屬性添加
myButton.onclick = function(event){alert("Hello world");};
事件添加目標就是EventTarget,也是注冊事件的監聽者。有的時候注冊事件的監聽者并不是事件的觸發者,實際事件的觸發者是event.target,
EventTarget事件目標EventTarget 是一個由可以接收事件的對象實現的接口,并且可以為它們創建偵聽器。
Element,document 和 window 是最常見的事件目標,但是其他對象也可以是事件目標,比如XMLHttpRequest,AudioNode,AudioContext 等等。EventTarget實例主要需要實現下面三個方法:
EventTarget.addEventListener()
在EventTarget上注冊特定事件類型的事件處理程序。
EventTarget.removeEventListener()
EventTarget中刪除事件偵聽器。
EventTarget.dispatchEvent()
將事件分派到此EventTarget。
不少情況下,EventTarget就是注冊的事件的監聽者;
event實例有許多類型的事件,其中一些使用基于主要事件接口的其他接口。事件本身包含所有事件通用的屬性和方法。在添加注冊事件的時候,事件響應一般是一個函數,而函數的第一個參數就是event,一個真實的事件對象的打印如下:
altKey:false bubbles:true button:0 buttons:0 cancelBubble:false cancelable:true clientX:30 clientY:62 composed:true ctrlKey:false currentTarget:button#myBtn defaultPrevented:false detail:1 eventPhase:0 fromElement:null isTrusted:true layerX:30 layerY:62 metaKey:false movementX:0 movementY:0 offsetX:20 offsetY:6 pageX:30 pageY:62 path:(5) [button#myBtn, body, html, document, Window] relatedTarget:null returnValue:true screenX:2377 screenY:320 shiftKey:false sourceCapabilities:InputDeviceCapabilities {firesTouchEvents: false} srcElement:button#myBtn target:button#myBtn timeStamp:658.445 toElement:button#myBtn type:"click" view:Window {frames: Window, postMessage: ?, blur: ?, focus: ?, close: ?, …} which:1 x:30 y:62 __proto__:MouseEvent
通過查看w3c給出的event flow【https://www.w3.org/TR/DOM-Lev...】可以發現,由于事件捕獲和事件冒泡的存在,很多時候注冊的事件監聽者【event.currentTarget】并不是事件的觸發者【event.target】,大部分時候事件可能是由子元素觸發的,但是在捕獲、冒泡的過程中被父級元素的事件監聽器獲取到了,注冊監聽事件的父級元素就是這種情況下event.currentTarget,而事件觸發者也就是子元素就是event.target;
文字說來總是同步;可以看實例:
菜鳥教程(runoob.com) 該實例使用 addEventListener() 方法在按鈕中添加點擊事件。