js--DOM事件綁定

tianhang 發布于2019-08-26 11:50 / 1055人閱讀

摘要：中的事件綁定函數和可能在實踐中不去使用，有幾個原因就將全面支持中的事件綁定函數的事件綁定函數無法傳遞的事件綁定函數不支持捕獲同一個函數注冊綁定后，沒有屏蔽掉有內存泄漏的問題

js事件綁定

JavaScript 有三種事件模型：

內聯模型

腳本模型

DOM2 模型

內聯模型

//基本廢除不用

腳本模型

//基本不用
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 表單 當發送表格到服務器時

內聯模型
“DOM2 級事件”定義了兩個方法，用于添加事件和刪除事件處理程序的操作：
addEventListener()和 removeEventListener()。所有 DOM 節點中都包含這兩個方法，并且它們都接受 3 個參數；事件名、函數、冒泡或捕獲的布爾值(true 表示捕獲，false 表示冒泡)

window.addEventListener("load", function () {
  alert("Lee");
}, false);
window.removeEventListener("load", function () {
  alert("Mr.Lee");
}, false)

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)
```

PS：IE 中的事件綁定函數 attachEvent()和 detachEvent()可能在實踐中不去使用，有幾個
原因：1.IE9 就將全面支持 W3C 中的事件綁定函數；2.IE 的事件綁定函數無法傳遞 this；3.IE
的事件綁定函數不支持捕獲；4.同一個函數注冊綁定后，沒有屏蔽掉；5.有內存泄漏的問題

GPU云服務器云服務器事件綁定重復綁定事件綁定點擊事件 javascript事件綁定

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/107661.html

深入理解js Dom事件機制（一）——事件流

摘要：事件捕獲提出的事件流模型稱為事件捕獲。事件代理則是一種簡單有效的技巧，通過它可以把事件處理器添加到一個父級元素上，從而避免把事件處理器添加到多個子級元素上。更新無需重新綁定事件處理器，因為事件代理對不同子元素可采用不同處理方法。首先我們思考一個很有意思的事情：一張紙上畫了兩個同心圓，當我們把手指放到圓心上時，手指指向的不是一個圓，而是紙上的兩個圓，同理之，當我們單擊網頁上的一個div...

OBKoro1 2019-08-21 17:34 評論0 收藏0
JS DOM Event

摘要：事件處理程序事件偵聽器的設定級級首先講級事件處理程序對事件的方式被稱為事件處理程序或事件偵聽器，但這兩者之間是有區別的。此外，不能對事件目標事件類型執行階段都相同的對象注冊多個相同的事件偵聽器。關于這一篇章有太多對于我來說雜且亂的知識點，單單是分別DOM層級劃分我看過的文章就有（0,2,3）的，（0,2）的，由于自己知識掌握還很薄弱所以只能參考別人文章結合自己理解來寫，這其中也涉及到...

WelliJhon 2019-08-20 16:46 評論0 收藏0
史上前端面試最全問答（附答案）

摘要：第四步本地服務器再向上一步返回的域名服務器發送請求，然后接受請求的服務器查詢自己的緩存，如果沒有該紀錄，則返回相關的下級的域名服務器的地址。第六步本地域名服務器把返回的結果保存到緩存，以備下一次使用，同時還將結果返回給客戶機。史上前端面試最全知識點（附答案）一.html & js & css 1.AMD和CMD是什么？它們的區別有哪些？ AMD和CMD是二種模塊定義規范。現在都使用...

SHERlocked93 2019-08-01 17:28 評論0 收藏0
史上前端面試最全問答（附答案）

摘要：第四步本地服務器再向上一步返回的域名服務器發送請求，然后接受請求的服務器查詢自己的緩存，如果沒有該紀錄，則返回相關的下級的域名服務器的地址。第六步本地域名服務器把返回的結果保存到緩存，以備下一次使用，同時還將結果返回給客戶機。史上前端面試最全知識點（附答案）一.html & js & css 1.AMD和CMD是什么？它們的區別有哪些？ AMD和CMD是二種模塊定義規范。現在都使用...

scola666 2019-08-20 18:57 評論0 收藏0