欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

js中DOM事件綁定分析

 更新時間:2018年03月18日 08:04:09   投稿:laozhang  
在這篇文章中小編給大家整理了關(guān)于JS中DOM事件綁定的相關(guān)知識點,有興趣的朋友趕快學(xué)習(xí)參考下。

js事件綁定

JavaScript 有三種事件模型:

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

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

3、內(nèi)聯(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 添加事件不能屏蔽重復(fù)的函數(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.有內(nèi)存泄漏的問題

相關(guān)文章

  • js 數(shù)組詳細操作方法及解析合集

    js 數(shù)組詳細操作方法及解析合集

    在開發(fā)中,數(shù)組的使用場景非常多,平日中也涉及到很多數(shù)組的api/相關(guān)操作,一直也沒有對這塊內(nèi)容進行一塊整理總結(jié),很多時候就算用過幾次這個api,在開發(fā)中也很容易忘記,還是要谷歌一下
    2018-06-06
  • JavaScript字符串轉(zhuǎn)換數(shù)字的方法

    JavaScript字符串轉(zhuǎn)換數(shù)字的方法

    這篇文章主要介紹了JavaScript字符串轉(zhuǎn)換數(shù)字的方法,文章圍繞JavaScript字符串轉(zhuǎn)換數(shù)字的相關(guān)資料展開全文內(nèi)容,需要的小伙伴可以參考一下
    2021-12-12
  • javascript封裝 Cookie 應(yīng)用接口

    javascript封裝 Cookie 應(yīng)用接口

    本文通過幾個簡單的示例向大家展示了javascript封裝cookie的注意事項及操作方法,非常的簡單實用,最后附上一則具體實例,有需要的小火把可以參考下。
    2015-08-08
  • JavaScript中函數(shù)表達式和函數(shù)聲明及函數(shù)聲明與函數(shù)表達式的不同

    JavaScript中函數(shù)表達式和函數(shù)聲明及函數(shù)聲明與函數(shù)表達式的不同

    這篇文章主要介紹了JavaScript中函數(shù)表達式和函數(shù)聲明及函數(shù)聲明與函數(shù)表達式的不同的相關(guān)資料,需要的朋友可以參考下
    2015-11-11
  • javascript二維數(shù)組轉(zhuǎn)置實例

    javascript二維數(shù)組轉(zhuǎn)置實例

    這篇文章主要介紹了javascript二維數(shù)組轉(zhuǎn)置方法,實例分析了數(shù)組行列交換的轉(zhuǎn)置技巧,具有一定參考借鑒價值,需要的朋友可以參考下
    2015-01-01
  • JS簡單計算器實例

    JS簡單計算器實例

    這篇文章主要介紹了JS簡單計算器的實現(xiàn)方法,以加法實例分析了js實現(xiàn)計算功能的技巧,需要的朋友可以參考下
    2015-01-01
  • JavaScript中的閉包原理分析

    JavaScript中的閉包原理分析

    一看到閉包這個詞,我就會想起線性代數(shù)中的封閉空間,也就是說,這個空間中的所有向量,無論經(jīng)過何種運算,最終結(jié)果還是會落在該空間中。那么JavaScript中會不會也是類似的概念呢?
    2010-03-03
  • 得到form下的所有的input的js代碼

    得到form下的所有的input的js代碼

    得到form下的所有的input的方法有很多,在本文為大家介紹下使用form 的集合對象elements,從而得到value,需要的朋友可以參考下
    2013-11-11
  • javascript setTimeout()傳遞函數(shù)參數(shù)(包括傳遞對象參數(shù))

    javascript setTimeout()傳遞函數(shù)參數(shù)(包括傳遞對象參數(shù))

    由于需要,我要用到setTimeout()并且在里邊的函數(shù)參數(shù)傳遞一個參數(shù),就像這樣setTimeout("fun(參數(shù))", 1000)。但是以我這種寫法,js會報錯,說‘參數(shù)’未定義。
    2010-04-04
  • JavaScript代碼判斷輸入的字符串是否含有特殊字符和表情代碼實例

    JavaScript代碼判斷輸入的字符串是否含有特殊字符和表情代碼實例

    這篇文章主要介紹了JavaScript代碼判斷輸入的字符串是否含有特殊字符和表情,通過js代碼if語句進行判斷,并結(jié)合自己開發(fā)的情景,具體操作步驟大家可查看下文的詳細講解,感興趣的小伙伴們可以參考一下。
    2017-08-08

最新評論