一種 觸發—響應 的機制； 使用者的行為 + 浏覽器感覺（捕獲）到使用者的行為 + 事件處理程式
事件三要素：
事件源:(被)觸發事件的元素
事件類型:事件的觸發方式(例如滑鼠點選或鍵盤點選)
事件處理程式:事件觸發後要執行的代碼(函數形式)
行内方式綁定(元素屬性)
onclick 其實就是html元素的一個屬性，而屬性的值需要是 一段可執行的JS代碼
動态綁定 (節點對象屬性)
擷取節點對象，然後 修改 節點對象 的 <code>屬性 onclick</code> 的值，值是一個 匿名函數 即可；
以上兩種事件綁定方式，需要在事件名稱前加 on ;
事件監聽(節點對象方法)
每一個節點對象都提供了 <code>addEventListener</code> 方法，這個方法可以給選中的節點添加指定類型的事件及事件處理程式；
移除事件監聽
注意: removeEventListener方法移除的監聽函數， 必須與對應的addEventListener方法的參數完全一緻， 而且必須在同一個元素節點，否則無效。
this關鍵字
在JavaScript中，每一個函數的内部都存在一個this關鍵字，其随着運作環境的不同，其指向也是不同的。
将上述代碼的動态綁定，改為行内綁定：
由此可知：
行内綁定，其事件處理程式内部的this指向了全局的window對象。
動态綁定，其事件處理程式内部的this指向了目前正在操作的dom對象。
需求：同一個元素的同一個事件，綁定多個處理函數：
總結：
第一種 “HTML标簽的on-屬性”，違反了HTML與JavaScript代碼相分離的原則；處理函數中 this 指向的window對象；
第二種 “Element節點的事件屬性” 的缺點是，同一進制素同一個事件隻能定義一個監聽函數，也就是說，如果定義兩次onclick屬性，後一次定義會覆寫前一次。但是處理函數中的 this 指向的選中的對象；
第三種：addEventListener方法可以針對同一個元素的同一個事件，添加多個監聽處理函數。處理函數中的 this 指向的也是選中的元素；
事件類型一覽表：
https://developer.mozilla.org/zh-CN/docs/Web/Events
事件名稱
何時觸發
load
一個資源及其相關資源已完成加載。
focus
元素獲得焦點
blur
元素失去焦點
mouseenter
指針移到有事件監聽的元素内
mouseover
指針移到有事件監聽的元素或者它的子元素内
mousemove
指針在元素内移動時持續觸發
mousedown
在元素上按下任意滑鼠按鈕
mouseup
在元素上釋放任意滑鼠按鍵
click
在元素上按下并釋放任意滑鼠按鍵
dblclick
在元素上輕按兩下滑鼠按鈕
contextmenu
右鍵點選 (右鍵菜單顯示前).
mouseleave
指針移出元素範圍外（不冒泡）
mouseout
指針移出元素，或者移到它的子元素上
select
文本被選中（input标簽、textarea标簽）
copy
元素内容被拷貝時
keydown
按下任意按鍵
keypress
除 Shift, Fn, CapsLock 外任意鍵被按住. (連續觸發)
keyup
釋放任意按鍵
Event Name
Fired When
reset
點選重置按鈕時 （<code><input type=’reset’ value=’重置’ /></code>）
submit
點選送出按鈕
change： 當内容改變且失去焦點時觸發 （存儲事件）
input ： 當内容改變時觸發 （值變化事件）
三個包裹着的DIV，都綁定了點選事件，問：
當點選 div1 時，會發生什麼現象？
當點選div1時，觸發 事件1，但是，緊跟着，事件2和事件3也被觸發了；
這種現象，我們稱為 事件冒泡
在JS中當一個事件發生以後，它會在不同的DOM節點之間傳播。
這種傳播分成三個階段：
第一階段：從window對象傳導到目标節點，稱為 捕獲階段。
第二階段：在目标節點上觸發，稱為 目标階段。
第三階段：從目标節點傳導回window對象，稱為 冒泡階段。
事件傳播的最上層對象是window；
事件的傳播順序，在捕獲階段依次為window、document、html、body、div；
在冒泡階段依次為div、body、html、document、window。
注意： 三種事件綁定方式全部 預設 監聽冒泡階段事件；
想讓事件監聽在捕獲階段，隻能通過 addEventListener 方法的進行設定：