摘要：定義是一個(gè)由可以接收事件的對(duì)象實(shí)現(xiàn)的接口，并且可以為它們創(chuàng)建偵聽(tīng)器。重點(diǎn)分割線只有通過(guò)上面的繼承關(guān)系，我們得到的元素才是一個(gè)完整的對(duì)象，我們才能為它設(shè)置獲取屬性綁定事件添加樣式類(lèi)等操作。

寫(xiě)在前面，本文將同步發(fā)布于Blog、掘金、segmentfault、知乎等處，如果本文對(duì)你有幫助，記得為我得到我的個(gè)人技術(shù)博客項(xiàng)目給個(gè)star哦。

你可能做Web開(kāi)發(fā)已經(jīng)有一段時(shí)間，你是否有想過(guò)下列問(wèn)題呢？
為什么div元素甚至是所有的html元素都可以使用addEventListener來(lái)添加事件呢？
為什么每個(gè)DOM節(jié)點(diǎn)都有parentNode、firstChild、nodeType等屬性呢？
為什么每個(gè)DOM元素都有className、classList、innerHTML等屬性呢？
為什么有些DOM元素有accessKey、contentEditable、isContentEditable等屬性呢？
為什么每個(gè)DOM元素都有onclick、ondblclick、ondrag等屬性？
本文就是來(lái)解答這些簡(jiǎn)單而又不“簡(jiǎn)單”的問(wèn)題。

EventTarget 是一個(gè)由可以接收事件的對(duì)象實(shí)現(xiàn)的接口，并且可以為它們創(chuàng)建偵聽(tīng)器。

Element，document 和 window 是最常見(jiàn)的事件目標(biāo)，但是其他對(duì)象也可以是事件目標(biāo)，比如XMLHttpRequest，AudioNode，AudioContext 等等。
許多事件目標(biāo)（包括元素，文檔和 window）還支持通過(guò) onXXX（如onclick） 屬性和屬性設(shè)置事件處理程序。

在EventTarget上注冊(cè)特定事件類(lèi)型的事件處理程序。

EventTarget中刪除事件偵聽(tīng)器。

將事件分派到此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是一個(gè)接口，許多DOM類(lèi)型從這個(gè)接口繼承，并允許類(lèi)似地處理（或測(cè)試）這些各種類(lèi)型。Node是一個(gè)接口，許多DOM類(lèi)型從這個(gè)接口繼承，并允許類(lèi)似地處理（或測(cè)試）這些各種類(lèi)型。

Document, Element, CharacterData (which Text, Comment, and CDATASection inherit), ProcessingInstruction, DocumentFragment, DocumentType, Notation, Entity, EntityReference
PS：在方法和屬性不相關(guān)的特定情況下，這些接口可能返回null。它們可能會(huì)拋出異常 - 例如，當(dāng)將子節(jié)點(diǎn)添加到不允許子節(jié)點(diǎn)存在的節(jié)點(diǎn)時(shí)。

返回一個(gè)表示base URL的DOMString。不同語(yǔ)言中的base URL的概念都不一樣。 在HTML中，base URL表示協(xié)議和域名，以及一直到最后一個(gè)"/"之前的文件目錄。

返回一個(gè)包含了該節(jié)點(diǎn)所有子節(jié)點(diǎn)的實(shí)時(shí)的NodeList。NodeList 是“實(shí)時(shí)的”意思是，如果該節(jié)點(diǎn)的子節(jié)點(diǎn)發(fā)生了變化，NodeList對(duì)象就會(huì)自動(dòng)更新。

返回該節(jié)點(diǎn)的第一個(gè)子節(jié)點(diǎn)，如果該節(jié)點(diǎn)沒(méi)有子節(jié)點(diǎn)則返回null。

返回該節(jié)點(diǎn)的最后一個(gè)子節(jié)點(diǎn)，如果該節(jié)點(diǎn)沒(méi)有子節(jié)點(diǎn)則返回null。
此處省略若干Node接口屬性，更多屬性查看這里。

--------------------重點(diǎn)分割線-------------------
重點(diǎn)：從其父類(lèi)EventTarget繼承了addEventListener、removeEventListener、dispatchEvent等方法。

將一個(gè)節(jié)點(diǎn)添加到指定父節(jié)點(diǎn)的子節(jié)點(diǎn)列表末尾。

返回的是一個(gè)布爾值，來(lái)表示傳入的節(jié)點(diǎn)是否為該節(jié)點(diǎn)的后代節(jié)點(diǎn)。

返回調(diào)用該方法的節(jié)點(diǎn)的一個(gè)副本。
此處省略若干Node接口方法，更多方法查看這里。

Element是非常通用的基類(lèi)，所有 Document對(duì)象下的對(duì)象都繼承它。這個(gè)接口描述了所有相同種類(lèi)的元素所普遍具有的方法和屬性。 這些繼承自Element并且增加了一些額外功能的接口描述了具體的行為。
PS：HTMLElement 接口是所有HTML元素的基礎(chǔ)接口， 而 SVGElement 接口是所有SVG元素的基本接口。
在web以外的語(yǔ)言，像 XUL 可以通過(guò)?XULElement?的API，也能實(shí)現(xiàn)它。

所有屬性繼承至它的祖先接口 Node, 和它所擴(kuò)展的接口 EventTarget, 并且從以下部分繼承了屬性ParentNode, ChildNode, NonDocumentTypeChildNode, 和Animatable.

返回元素對(duì)應(yīng)的 HTMLSlotElement 接口

返回一個(gè)與該元素相關(guān)的所有屬性集合NamedNodeMap

返回該元素包含的class屬性是一個(gè)DOMTokenList.

它是一個(gè) DOMString 表示這個(gè)元素的class.
此處省略若干Element接口屬性，更多方法查看這里。

--------------------重點(diǎn)分割線-------------------
從它的父類(lèi)（Node）和它父類(lèi)的父類(lèi)（EventTarget）繼承方法，并實(shí)現(xiàn)parentNode、ChildNode、NonDocumentTypeChildNode、Animatable。
此處省略若干Element接口方法，更多方法查看這里。

方法用來(lái)獲取匹配特定選擇器且離當(dāng)前元素最近的祖先元素（也可以是當(dāng)前元素本身）。如果匹配不到，則返回 null。

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

參數(shù)中給出類(lèi)的列表，返回一個(gè)動(dòng)態(tài)的 HTMLCollection ，這里面包含了所有持有這些類(lèi)的后代元素。
此處省略若干Element接口方法，更多方法查看這里。

HTMLElement 接口表示所有的 HTML 元素。一些HTML元素直接實(shí)現(xiàn)了HTMLElement接口，其它的間接實(shí)現(xiàn)HTMLElement接口。

--------------------重點(diǎn)分割線-------------------
繼承自父接口Element和 GlobalEventHandlers的屬性。
HTMLElement.accessKey DOMString 獲取/設(shè)置元素訪問(wèn)的快捷鍵
HTMLElement.accessKeyLabel DOMString 返回一個(gè)包含元素訪問(wèn)的快捷鍵的字符串（只讀）
HTMLElement.contentEditable DOMString 獲取/設(shè)置元素的可編輯狀態(tài)
HTMLElement.isContentEditable Boolean 表明元素的內(nèi)容是否可編輯（只讀）
此處省略若干HTMLElement接口屬性，更多方法查看這里。

HTMLElement.onTouchStart
HTMLElement.onTouchEnd
HTMLElement.onTouchMove
HTMLElement.onTouchEnter
HTMLElement.onTouchLeave
HTMLElement.onTouchCancel

HTMLElement.blur() void 元素失去焦點(diǎn)
HTMLElement.click() void 觸發(fā)元素的點(diǎn)擊事件
HTMLElement.focus() void 元素獲得焦點(diǎn)
HTMLElement.forceSpellCheck() void

GlobalEventHandlers接口描述了事件處理程序像HTMLElement常見(jiàn)的幾個(gè)接口,文件,窗口,或WorkerGlobalScope Web Workers。這些接口可以實(shí)現(xiàn)更多的事件處理程序。

中斷事件。

失去焦點(diǎn)事件。

獲取焦點(diǎn)事件。
此處省略若干GlobalEventHandlers接口屬性，更多方法查看這里。

該接口用于創(chuàng)建對(duì)應(yīng)的元素。
如：
HTMLDivElement 接口提供了一些特殊屬性（它也繼承了通常的 HTMLElement 接口）來(lái)操作div元素。
HTMLFormElement接口可以創(chuàng)建或者修改

EventTarget
Node
Element
HTMLElement
GlobalEventHandlers