哪個對象「擁有」addEventListener？

Question

至於原因，我在尋找，定義addEventListener源對象。從XMLHttpRequest開始，我發現以下幾點：

> Object.prototype.hasOwnProperty(XMLHttpRequest.prototype, 'addEventListener') 
false 

> XMLHttpRequest.prototype.__proto__ 
XMLHttpRequestEventTarget {} 

> Object.prototype.hasOwnProperty(XMLHttpRequestEventTarget.prototype, 'addEventListener') 
false 

> XMLHttpRequestEventTarget.prototype.__proto__ 
EventTarget {} 

> Object.prototype.hasOwnProperty(EventTarget.prototype, 'addEventListener') 
false 

> EventTarget.prototype.__proto__ 
Object {} 

這怎麼可能？ addEventListener似乎沒有在任何原型中定義。

要清楚，我知道這個功能是本機的功能，但我不明白的是如何從一個標準來看，財產的任何原型不可用，但仍然存在，當我們需要它。

Answer 1

DOM 接口是複雜的。它們被指定爲一個接口（EventTarget在這種情況下），但是這些方法都必須在每個「類」或原型實現單獨因爲JS不具有多繼承或接口。不過，確切的繼承hierarachy在瀏覽器和版本之間可能會有所不同。

在你的榜樣，addEventListener實際上是在XMLHttpRequest原型（至少在我的歌劇）來實現，只有你是檢查錯了：

// Opera 12 
XMLHttpRequest.prototype.hasOwnProperty("addEventListener") // true 
Object.prototype.hasOwnProperty.call(XMLHttpRequest.prototype, "addEventListener") // true 
//        ^^^^ 
Object.prototype.isPrototypeOf(XMLHttpRequest.prototype) // true - flat hierarchy 

// Chrome 48 
EventTarget.prototype.hasOwnProperty("addEventListener") // true 
XMLHttpRequest.prototype instanceof EventTarget // true - some indirection 

Answer 2

事件目標原型持有該屬性：

console.log(EventTarget.prototype.hasOwnProperty('addEventListener')) 
// true 

採取Ø外觀上Mozilla MDN: EventTarget.addEventListener()

的EventTarget.addEventListener（）方法註冊的事件目標指定 監聽器，它被稱爲上。

從Mozilla MDN: EventTarget

事件目標是能夠接收 事件，並可能有聽衆對他們的對象實現的接口。

元，文件，並窗口是最常見的事件的目標，但其他 對象可以是事件的目標也是如此，例如XMLHttpRequest的， AudioNode，AudioContext，等等。

方法

EventTarget.addEventListener（）寄存器的事件目標特定 事件類型的事件處理程序。 .......... ..........

這樣的addEventListener可以在從事件目標接口（繼承屬性所有接口被稱爲window，document，Element等。 ）。