js事件綁定
JavaScript 有三種事件模型:
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 表單 當發送表格到服務器時
3、內聯模型
“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()卻可以,但有些區別。```javascriptwindow.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.有內存泄漏的問題
新聞熱點
疑難解答