這篇文章主要為大家展示了“js中DOM事件綁定的示例分析”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“js中DOM事件綁定的示例分析”這篇文章吧。

站在用戶的角度思考問(wèn)題，與客戶深入溝通，找到綏德網(wǎng)站設(shè)計(jì)與綏德網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類型包括：成都網(wǎng)站建設(shè)、網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、域名申請(qǐng)、虛擬空間、企業(yè)郵箱。業(yè)務(wù)覆蓋綏德地區(qū)。

js事件綁定

JavaScript 有三種事件模型：

• 內(nèi)聯(lián)模型

• 腳本模型

• DOM2 模型

1、內(nèi)聯(lián)模型

//基本廢除不用

2、腳本模型

//基本不用
var input = document.getElementsByTagName('input')[0]; //得到 input 對(duì)象
 input.onclick = function () { //匿名函數(shù)執(zhí)行
 alert('Lee');
};
事件處理函數(shù) 影響的元素 何時(shí)發(fā)生
onabort 圖像 當(dāng)圖像加載被中斷時(shí)
onblur 窗口、框架、所有表單對(duì)象 當(dāng)焦點(diǎn)從對(duì)象上移開(kāi)時(shí)
onchange 輸入框，選擇框和文本區(qū)域 當(dāng)改變一個(gè)元素的值且失去焦點(diǎn)時(shí)
onclick 鏈接、按鈕、表單對(duì)象、圖像映射區(qū)域 當(dāng)用戶單擊對(duì)象時(shí)
ondblclick 鏈接、按鈕、表單對(duì)象 當(dāng)用戶雙擊對(duì)象時(shí)
ondragdrop 窗口 當(dāng)用戶將一個(gè)對(duì)象拖放到瀏覽器窗口時(shí)
onError 腳本 當(dāng)腳本中發(fā)生語(yǔ)法錯(cuò)誤時(shí)
onfocus 窗口、框架、所有表單對(duì)象 當(dāng)單擊鼠標(biāo)或者將鼠標(biāo)移動(dòng)聚焦到窗口或框架時(shí)
onkeydown 文檔、圖像、鏈接、表單 當(dāng)按鍵被按下時(shí)
onkeypress 文檔、圖像、鏈接、表單 當(dāng)按鍵被按下然后松開(kāi)時(shí)
onkeyup 文檔、圖像、鏈接、表單 當(dāng)按鍵被松開(kāi)時(shí)
onload 主題、框架集、圖像 文檔或圖像加載后
onunload 主體、框架集 文檔或框架集卸載后
onmouseout 鏈接 當(dāng)圖標(biāo)移除鏈接時(shí)
onmouseover 鏈接 當(dāng)鼠標(biāo)移到鏈接時(shí)
onmove 窗口 當(dāng)瀏覽器窗口移動(dòng)時(shí)
onreset 表單復(fù)位按鈕 單擊表單的 reset 按鈕
onresize 窗口 當(dāng)選擇一個(gè)表單對(duì)象時(shí)
onselect 表單元素 當(dāng)選擇一個(gè)表單對(duì)象時(shí)
onsubmit 表單 當(dāng)發(fā)送表格到服務(wù)器時(shí)

3、內(nèi)聯(lián)模型

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

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

PS: IE 實(shí)現(xiàn)了與 DOM 中類似的兩個(gè)方法：attachEvent()和 detachEvent()。這兩個(gè)方法接受
相同的參數(shù)：事件名稱和函數(shù)。

在使用這兩組函數(shù)的時(shí)候，先把區(qū)別說(shuō)一下：

1. IE 不支持捕獲，只支持冒泡；
2. IE 添加事件不能屏蔽重復(fù)的函數(shù)；
3. IE 中的 this 指向的是 window 而不是 DOM 對(duì)象。
4. 在傳統(tǒng)事件上，IE 是無(wú)法接受到 event 對(duì)象的，但使用了 attchEvent()卻可以，但有些區(qū)別。
```javascript
window.attachEvent('load', function () {
 alert('Lee');
}, false);
window.detachEvent('load', function () {
 alert('Mr.Lee');
}, false)
```

PS：IE 中的事件綁定函數(shù) attachEvent()和 detachEvent()可能在實(shí)踐中不去使用，有幾個(gè)原因：

1.IE9 就將全面支持 W3C 中的事件綁定函數(shù)；

2.IE 的事件綁定函數(shù)無(wú)法傳遞 this；

3.IE的事件綁定函數(shù)不支持捕獲；

4.同一個(gè)函數(shù)注冊(cè)綁定后，沒(méi)有屏蔽掉；5.有內(nèi)存泄漏的問(wèn)題

以上是“js中DOM事件綁定的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！