為事件綁定監聽函數一共有三種方法：
1 HTML 的 on- 屬性
3 addEventListener()
HTML 的 on- 屬性
1 這些屬性的值是將會執行的代碼，而不是一個函數。
2 使用這個方法指定的監聽函數，只會在冒泡階段觸發，不能指定讓他在捕獲階段觸發。
元素節點的事件屬性
1 使用這個方法指定的監聽函數，也是只會在冒泡階段觸發。
2 注意，這種方法與 HTML 的on-屬性的差異是，它的值是函數名，或者是一個匿名函數。
3 同一個事件只能定義一個監聽函數，也就是說，如果定義兩次onclick屬性，后一次定義會覆蓋前一次。
addEventListener()
三個參數：
type：事件名稱，大小寫敏感。listener：監聽函數。事件發生時，會調用該監聽函數。useCapture：布爾值，表示監聽函數是否在捕獲階段（capture）觸發（參見后文《事件的傳播》部分），默認為false（監聽函數只在冒泡階段被觸發）。
最基本的一個例子：
他的強大在於：
1第三個參數除了布爾值，還可以是一個屬性配置對象。
該對象有以下屬性：
capture：布爾值，表示該事件是否在捕獲階段觸發監聽函數。once：布爾值，表示監聽函數是否只觸發一次，然后就自動移除。passive：布爾值，表示監聽函數不會調用事件的preventDefault方法。如果監聽函數調用了，瀏覽器將忽略這個要求，並在監控台輸出一行警告。
2 可為同一事件綁定多個函數，按書寫順序一次執行。
總結：
第一種“HTML 的 on- 屬性”，違反了 HTML 與 JavaScript 代碼相分離的原則，將兩者寫在一起，不利於代碼分工，因此不推薦使用。
第二種“元素節點的事件屬性”的缺點在於，同一個事件只能定義一個監聽函數，也就是說，如果定義兩次onclick屬性，后一次定義會覆蓋前一次。因此，也不推薦使用。
第三種EventTarget.addEventListener是推薦的指定監聽函數的方法。它有如下優點：1 三個參數（第三個參數可以是配置對象，里面有一些參數可自己設置，是否在捕獲階段執行，知否只執行一次）2 同一個事件可以添加多個監聽函數，按順序一次執行. 3 它等於是整個 JavaScript 統一的監聽函數接口,除了 DOM 節點，其他對象（比如window、XMLHttpRequest等）也有這個接口，