在這篇文章中小編給大家整理了關於JS中DOM事件繫結的相關知識點，寫的十分的全面細緻，具有一定的參考價值，對此有需要的朋友可以參考學習下。如有不足之處，歡迎批評指正。

#Js事件繫結

JavaScript 有三種事件模型：

內聯模型
指令碼模型
DOM2 模型

1、內聯模型

//基本廢除不用
<input type="button" value="按鈕" onclick="alert('Lee');" />
<input type="button" value="按鈕" onclick="box();" />

2、指令碼模型

//基本不用
var input = document.getElementsByTagName('input')[0]; //得到 input 物件
 input.onclick = function () { //匿名函式執行
 alert('Lee');
};
事件處理函式 影響的元素 何時發生
onabort 影象 當影象載入被中斷時
onblur 視窗、框架、所有表單物件 當焦點從物件上移開時
onchange 輸入框，選擇框和文字區域 當改變一個元素的值且失去焦點時
onclick 連結、按鈕、表單物件、影象對映區域 當用戶單擊物件時
ondblclick 連結、按鈕、表單物件 當用戶雙擊物件時
ondragdrop 視窗 當用戶將一個物件拖放到瀏覽器視窗時
onError 指令碼 當指令碼中發生語法錯誤時
onfocus 視窗、框架、所有表單物件 當單擊滑鼠或者將滑鼠移動聚焦到視窗或框架時
onkeydown 文件、影象、連結、表單 當按鍵被按下時
onkeypress 文件、影象、連結、表單 當按鍵被按下然後鬆開時
onkeyup 文件、影象、連結、表單 當按鍵被鬆開時
onload 主題、框架集、影象 文件或影象載入後
onunload 主體、框架集 文件或框架集解除安裝後
onmouseout 連結 當圖示移除連結時
onmouseover 連結 當滑鼠移到連結時
onmove 視窗 當瀏覽器視窗移動時
onreset 表單復位按鈕 單擊表單的 reset 按鈕
onresize 視窗 當選擇一個表單物件時
onselect 表單元素 當選擇一個表單物件時
onsubmit 表單 當傳送表格到伺服器時
歡迎加入前端全棧開發交流圈一起學習交流：864305860
 

3、內聯模型

“DOM2 級事件”定義了兩個方法，用於新增事件和刪除事件處理程式的操作：
addEventListener()和 removeEventListener()。所有 DOM 節點中都包含這兩個方法，並且它們都接受 3 個引數；事件名、函式、冒泡或捕獲的布林值(true 表示捕獲，false 表示冒泡)

window.addEventListener('load', function () {
 alert('Lee');
}, false);
window.removeEventListener('load', function () {
 alert('Mr.Lee');
}, false)//歡迎加入前端全棧開發交流圈一起學習交流：864305860
 

PS: IE 實現了與 DOM 中類似的兩個方法：attachEvent()和 detachEvent()。這兩個方法接受
相同的引數：事件名稱和函式。
在使用這兩組函式的時候，先把區別說一下：

• 1. IE 不支援捕獲，只支援冒泡；
• 2. IE 新增事件不能遮蔽重複的函式；
• 3. IE 中的 this 指向的是 window 而不是 DOM 物件。
• 4. 在傳統事件上，IE 是無法接受到 event 物件的，但使用了 attchEvent()卻可以，但有些區別。

Javascript
window.attachEvent('load', function () {
 alert('Lee');
}, false);
window.detachEvent('load', function () {
 alert('Mr.Lee');
}, false)//歡迎加入前端全棧開發交流圈一起學習交流：864305860

PS：IE 中的事件繫結函式 attachEvent()和 detachEvent()可能在實踐中不去使用，有幾個原因：
1.IE9 就將全面支援 W3C 中的事件繫結函式；
2.IE 的事件繫結函式無法傳遞 this；
3.IE的事件繫結函式不支援捕獲；
4.同一個函式註冊繫結後，沒有遮蔽掉；5.有記憶體洩漏的問題

結語

感謝您的觀看，如有不足之處，歡迎批評指正。

本次給大家推薦一個免費的學習群，裡面概括移動應用網站開發，css，html，webpack，vue node angular以及面試資源等。
對web開發技術感興趣的同學，歡迎加入Q群：864305860，不管你是小白還是大牛我都歡迎，還有大牛整理的一套高效率學習路線和教程與您免費分享，同時每天更新視訊資料。
最後，祝大家早日學有所成，拿到滿意offer，快速升職加薪，走上人生巔峰。