Js中DOM事件綁定分析

在這篇文章中小編給你們整理了關於JS中DOM事件綁定的相關知識點，寫的十分的全面細緻，具備必定的參考價值，對此有須要的朋友能夠參考學習下。若有不足之處，歡迎批評指正。

#Js事件綁定

JavaScript 有三種事件模型：

內聯模型 腳本模型 DOM2 模型

一、內聯模型

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

二、腳本模型

//基本不用
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
複製代碼

三、內聯模型

「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，快速升職加薪，走上人生巔峯。