你可能做Web開發已經有一段時間，你有沒有想過下列問題呢？
為什麼p元素甚至是所有的html元素都可以使用addEventListener來新增事件？
為什麼每個DOM節點都有parentNode、firstChild、nodeType等屬性呢？
為什麼每個DOM元素都有className、classList、innerHTML等屬性呢？
為什麼有些DOM元素有accessKey、contentEditable、isContentEditable等屬性呢？
為什麼每個DOM元素都有onclick、ondblclick、ondrag等屬性？
本文就是來解答這些簡單又不「簡單」的問題。

EventTarget

定義

EventTarget 是一個由可以接收事件的物件實現的接口，並且可以為它們建立偵聽器。

作用

Element，document 和 window 是最常見的事件目標，但其他物件也可以是事件目標，例如XMLHttpRequest，AudioNode，AudioContext 等等。
許多事件目標（包括元素，文件和 window）也支援透過 onXXX（如onclick）屬性和屬性設定事件處理程序。

該介面的方法

EventTarget.addEventListener()

在EventTarget上註冊特定事件類型的事件處理程序。

EventTarget.removeEventListener()

EventTarget中刪除事件偵聽器。

EventTarget.dispatchEvent()

將事件分派到此EventTarget。

我們自己實作EventTarget

var EventTarget = function() {
  this.listeners = {};
};

EventTarget.prototype.listeners = null;
EventTarget.prototype.addEventListener = function(type, callback) {
  if (!(type in this.listeners)) {
    this.listeners[type] = [];
  }
  this.listeners[type].push(callback);
};

EventTarget.prototype.removeEventListener = function(type, callback) {
  if (!(type in this.listeners)) {
    return;
  }
  var stack = this.listeners[type];
  for (var i = 0, l = stack.length; i < l; i++) {
    if (stack[i] === callback){
      stack.splice(i, 1);
      return;
    }
  }
};

EventTarget.prototype.dispatchEvent = function(event) {
  if (!(event.type in this.listeners)) {
    return true;
  }
  var stack = this.listeners[event.type].slice();

  for (var i = 0, l = stack.length; i < l; i++) {
    stack[i].call(this, event);
  }
  return !event.defaultPrevented;
};

登入後複製

Node

定義

#Node是一個接口，許多DOM類型從這個介面繼承，並允許類似地處理（或測試）這些各種類型。 Node是一個接口，許多DOM類型從這個接口繼承，並允許類似地處理（或測試）這些各種類型。

有那些介面重Node繼承其方法和屬性？

Document, Element, CharacterData (which Text, Comment, and CDATASection inherit), ProcessingInstruction, DocumentFragment, DocumentType, Notation, Entity, EntityReference
PS：在方法和屬性不相關的特定情況下，這些介面可能傳回null。它們可能會拋出異常 - 例如，當子節點添加到不允許子節點存在的節點時。

介面相關的屬性和方法

屬性

Node.baseURI

傳回一個表示base URL的DOMString。不同語言中的base URL的概念都不一樣。在HTML中，base URL表示協定和域名，以及一直到最後一個'/'之前的文件目錄。

Node.childNodes

傳回一個包含了該節點所有子節點的即時的NodeList。 NodeList 是「即時」的意思是，如果該節點的子節點發生了變化，NodeList物件就會自動更新。

Node.firstChild

傳回該節點的第一個子節點，如果該節點沒有子節點則傳回null。

Node.lastChild

傳回該節點的最後一個子節點，如果該節點沒有子節點則傳回null。
此處省略若干Node介面屬性，更多屬性查看這裡。

方法

那麼重點來了！
重點：從其父類別EventTarget繼承了addEventListener、removeEventListener、dispatchEvent等方法。

Node.appendChild()

將一個節點加入到指定父節點的子節點清單結尾。

Node.contains()

傳回的是一個布林值，來表示傳入的節點是否為該節點的後代節點。

Node.cloneNode()

傳回呼叫該方法的節點的副本。
此處省略若干Node介面方法，更多方法查看這裡。

Element

說明

Element是非常通用的基類，所有 Document物件下的物件都繼承它。這個介面描述了所有相同種類的元素所普遍具有的方法和屬性。這些繼承自Element並且增加了一些額外功能的介面描述了特定的行為。
PS：HTMLElement 接口是所有HTML元素的基礎接口，而 SVGElement 接口是所有SVG元素的基本接口。
在web以外的語言，像 XUL 可以透過 XULElement 的API，也能實現它。

屬性

所有屬性繼承至它的祖先介面Node, 和它所擴展的介面EventTarget, 並且從以下部分繼承了屬性ParentNode, ChildNode, NonDocumentTypeChildNode, 和Animatable.

Element.assignedSlot

傳回元素對應的HTMLSlotElement 介面

#Element.attributes

傳回一個與該元素相關的所有屬性集合NamedNodeMap

Element.classList

傳回該元素所包含的class屬性是一個DOMTokenList.

Element.className

它是一個DOMString 表示這個元素的class.
此處省略若干Element介面屬性，更多方法查看這裡。

方法

那麼重點來了！
從它的父類別（Node）和它父類別的父類別（EventTarget）繼承方法，並實作parentNode、ChildNode、NonDocumentTypeChildNode、Animatable。
此處省略若干Element介面方法，更多方法查看這裡。

Element.closest()

方法用來取得符合特定選擇器且離目前元素最近的祖先元素（也可以是目前元素本身）。如果匹配不到，則傳回 null。

Element.getAttribute()

傳回元素上一個指定的屬性值。如果指定的屬性不存在，則傳回 null 或 "" （空字串）。

Element.getElementsByClassName()

參數中給出類別的列表，傳回一個動態的 HTMLCollection ，這裡麵包含了所有持有這些類別的後代元素。
此處省略若干Element介面方法，更多方法查看這裡。

HTMLElement

作用

HTMLElement 介面表示所有的 HTML 元素。有些HTML元素直接實作了HTMLElement接口，其它的間接實作HTMLElement介面。

屬性

那麼重點來了！
繼承自父介面Element和 GlobalEventHandlers的屬性。
HTMLElement.accessKey DOMString 獲取/設定元素存取的快速鍵
HTMLElement.accessKeyLabel DOMString 傳回一個包含元素存取的快速鍵的字串（唯讀）
HTMLElement.contentEtabletable 可獲取元素存取的快速鍵的字串編輯狀態
HTMLElement.isContentEditable Boolean 顯示元素的內容是否可編輯（唯讀）
此處省略若干HTMLElement介面屬性，更多方法查看這裡。

Event handlers

HTMLElement.onTouchStart
HTMLElement.onTouchEnd
HTMLElement.onTouchMove
HTMLElement.onTouchEnter
HTMLElement.onTouchLeave
HTMLElement.onTouchcelcelcel

方法

HTMLElement.blur() void 元素失去焦點

HTMLElement.click() void 觸發元素的點擊事件
HTMLElement.focus() 觸發元素的點擊事件
HTMLElement.focus() void #ML 元素獲得焦點。 forceSpellCheck() void

GlobalEventHandlers

#定義

GlobalEventHandlers介面描述了事件處理程序像HTMLElement常見的幾個介面,檔案,視窗,或WorkerGlobalScope Web Workers。這些介面可以實作更多的事件處理程序。

屬性

GlobalEventHandlers.onabort

中斷事件。

GlobalEventHandlers.onblur

失去焦點事件。

GlobalEventHandlers.onfocus

取得焦點事件。

此處省略若干GlobalEventHandlers介面屬性，更多方法查看這裡。

元素介面

此介面用於建立對應的元素。

如：
HTMLpElement 介面提供了一些特殊屬性（它也繼承了通常的 HTMLElement 介面）來操作p元素。
HTMLFormElement介面可以建立或修改

物件;它繼承了HTMLElement介面的方法和屬性。
HTMLAnchorElement 介面表示超連結元素，並提供一些特別的屬性和方法（除了那些繼承自普通 HTMLElement物件介面的之外）以用於操作這些元素的佈局和顯示。
......
回答前面問題

透過上面的知識，我們了解到：

HTMLpElement（其他元素介面）繼承 HTMLElement 和 GlobalEventHandlers 介面。
HTMLElement 繼承 Element 介面。
Element 繼承 Node 介面。
Node 繼承 EventTarget 介面。

為什麼p元素甚至是所有的html元素都可以使用addEventListener來新增事件？一個完整的HTML物件是什麼樣的，如何產生？回答：從 EventTarget 介面中繼承而來。
為什麼每個DOM節點都有parentNode、firstChild、nodeType等屬性呢？
回答：從 Node 介面中繼承而來。
為什麼每個DOM元素都有className、classList、innerHTML等屬性呢？
回答：從 Element 介面繼承而來。
為什麼有些DOM元素有accessKey、contentEditable、isContentEditable等屬性呢？
回答：從 HTMLElement 介面繼承而來。
為什麼每個DOM元素都有onclick、ondblclick、ondrag等屬性？
回答：從 GlobalEventHandlers 介面中繼承而來。

那麼重點來了！