js中DOM事件綁定分析
js事件綁定
JavaScript 有三種事件模型:
- 內聯(lián)模型
- 腳本模型
- DOM2 模型
1、內聯(lián)模型
//基本廢除不用 <input type="button" value="按鈕" onclick="alert('Lee');" /> <input type="button" value="按鈕" onclick="box();" />
2、腳本模型
//基本不用 var input = document.getElementsByTagName('input')[0]; //得到 input 對象 input.onclick = function () { //匿名函數執(zhí)行 alert('Lee'); }; 事件處理函數 影響的元素 何時發(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 個參數;事件名、函數、冒泡或捕獲的布爾值(true 表示捕獲,false 表示冒泡)
window.addEventListener('load', function () { alert('Lee'); }, false); window.removeEventListener('load', function () { alert('Mr.Lee'); }, false)
PS: IE 實現(xiàn)了與 DOM 中類似的兩個方法:attachEvent()和 detachEvent()。這兩個方法接受
相同的參數:事件名稱和函數。
在使用這兩組函數的時候,先把區(qū)別說一下:
1. IE 不支持捕獲,只支持冒泡; 2. IE 添加事件不能屏蔽重復的函數; 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 中的事件綁定函數 attachEvent()和 detachEvent()可能在實踐中不去使用,有幾個原因:
1.IE9 就將全面支持 W3C 中的事件綁定函數;
2.IE 的事件綁定函數無法傳遞 this;
3.IE的事件綁定函數不支持捕獲;
4.同一個函數注冊綁定后,沒有屏蔽掉;5.有內存泄漏的問題
- JavaScript中DOM操作常用事件總結
- JavaScript DOMContentLoaded事件案例詳解
- JavaScript WebAPI、DOM、事件和操作元素實例詳解
- 詳解用js代碼觸發(fā)dom事件的實現(xiàn)方案
- JS前端知識點總結之頁面加載事件,數組操作,DOM節(jié)點操作,循環(huán)和分支
- JS實現(xiàn)同一DOM元素上onClick事件與onDblClick事件并存的解決方法
- JS對象與JSON互轉換、New Function()、 forEach()、DOM事件流等js開發(fā)基礎小結
- js學習總結之dom2級事件基礎知識詳解
- JS實現(xiàn)動態(tài)添加DOM節(jié)點和事件的方法示例
- JavaScript DOM操作與事件處理方法
相關文章
JavaScript中函數表達式和函數聲明及函數聲明與函數表達式的不同
這篇文章主要介紹了JavaScript中函數表達式和函數聲明及函數聲明與函數表達式的不同的相關資料,需要的朋友可以參考下2015-11-11javascript setTimeout()傳遞函數參數(包括傳遞對象參數)
由于需要,我要用到setTimeout()并且在里邊的函數參數傳遞一個參數,就像這樣setTimeout("fun(參數)", 1000)。但是以我這種寫法,js會報錯,說‘參數’未定義。2010-04-04JavaScript代碼判斷輸入的字符串是否含有特殊字符和表情代碼實例
這篇文章主要介紹了JavaScript代碼判斷輸入的字符串是否含有特殊字符和表情,通過js代碼if語句進行判斷,并結合自己開發(fā)的情景,具體操作步驟大家可查看下文的詳細講解,感興趣的小伙伴們可以參考一下。2017-08-08