這次給大家?guī)碓鯓釉陧椖恐惺褂胘s綁定DOM事件，在項目中使用js綁定DOM事件的注意事項有哪些，下面就是實戰(zhàn)案例，一起來看一下。

js事件綁定

JavaScript 有三種事件模型：

• 內聯(lián)模型

• 腳本模型

• DOM2 模型

1、內聯(lián)模型

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

2、腳本模型

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

3、內聯(lián)模型

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

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

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

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

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

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

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

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

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

4.同一個函數(shù)注冊綁定后，沒有屏蔽掉；5.有內存泄漏的問題

相信看了本文案例你已經(jīng)掌握了方法，更多精彩請關注php中文網(wǎng)其它相關文章！

推薦閱讀：

nodejs+express做出文件上傳

怎樣操作angularjs緩存

以上是怎樣在項目中使用js綁定DOM事件的詳細內容。更多信息請關注PHP中文網(wǎng)其他相關文章！