Javascript學(xué)習(xí)之事件模型詳解

事件模型是javascript中非常重要的知識(shí)點(diǎn)之一，本文和大家分享的主要是javascript中的這部分內(nèi)容，希望通過分享，對(duì)大家學(xué)習(xí)javascript有所幫助。

　　JS中的事件

　　1、鼠標(biāo)事件

　　onclick   ondbclick   onmouseover   onmouseout

　　2、HTML事件

　　onload   onunload   onsubmit   onresize  onfocus  onchange   onscroll

　　3、鍵盤事件

　　1. onkeydown：鍵盤按下時(shí)觸發(fā)

　　2. onkeypress:鍵盤按下并抬起的瞬間觸發(fā)

　　3. onkeyup:鍵盤抬起時(shí)觸發(fā)

　　【注意事項(xiàng)】

　　· ① 執(zhí)行順序：keydown--keypress--keyup

　　· ② keypress只能捕獲數(shù)字、字母、符號(hào)鍵，不能捕獲功能鍵；

　　· ③ 長按時(shí)循環(huán)執(zhí)行：keydown--keypress

　　· ④ 有keydown,不一定有keyup,當(dāng)長按時(shí)焦點(diǎn)失去時(shí)，不再觸發(fā)keyup.

　　· ⑤ keypress區(qū)分字母大小寫，keydown/keyup不區(qū)分大小寫

　　4、事件因子

　　當(dāng)觸發(fā)一個(gè)事件時(shí)，該事件將向事件所調(diào)用的函數(shù)中，默認(rèn)傳入一個(gè)參數(shù)，這個(gè)參數(shù)就是事件因子，包含了事件的各種詳細(xì)信息。

1 document.onkeydown=function(e){

2   console.log(e);

3 }

　　5、如何確定鍵盤按鍵

　　· ① 在觸發(fā)函數(shù)中，接收事件因子e

　　e = e || window.event;

　　· ② 可以使用 e.key直接取到按下的按鍵字符（不推薦）

　　· ③ 可以使用keyCode/which/charCode取到按鍵的ASCII碼值：

1 var code=e.keyCode || e.which || e.charCode;

2  //(兼容各種瀏覽器的寫法)

3 document.onkeydown=function(e){

4    e = e || window.event;

5    var code=e.keyCode || e.which || e.charCode;

6    console.log(e);

7 }

　　DOM0事件模型

　　1.內(nèi)聯(lián)模型綁定 (行內(nèi)綁定)

　　將函數(shù)名直接作為HTML標(biāo)簽中事件屬性的屬性值

　　<button onclick="func()">內(nèi)聯(lián)模型綁定</button>

　　缺點(diǎn)：不符合w3c中關(guān)于內(nèi)容與行為分離的基本規(guī)范

　　2.腳本模型（動(dòng)態(tài)綁定）

　　通過在js中選中某個(gè)節(jié)點(diǎn)，然后給節(jié)點(diǎn)添加onclick屬性

　　document.getElementById("btn1").onclick=function(){}

　　優(yōu)點(diǎn)：符合w3c中內(nèi)容與行為分離的基本規(guī)范，實(shí)現(xiàn)html與js的分離

　　缺點(diǎn)：同一個(gè)節(jié)點(diǎn)，只能添加一次同類型事件。如果添加多次，最后一個(gè)生效。

　　3.DOM0共有的缺點(diǎn)：

　　通過DOM0綁定的事件，一旦綁定，無法取消

　　DOM2事件模型

　　1.添加DOM2事件綁定

　?、?IE8之前，使用.attachEvent("onclick",函數(shù))；

　?、?IE8之后，使用.addEventListener("click",函數(shù),true/false);

　　參數(shù)三：false（默認(rèn)）表示事件冒泡，傳入true表示事件捕獲

　?、?nbsp;兼容所有瀏覽器的處理方式

1 var btn = document.getElementById("btn2");

2 if(btn.attachEvent) {

3       btn.attachEvent("onclick", func1);

4     } else {

5       btn.addEventListener("click", func1);

6 }

　　2.DOM2的優(yōu)點(diǎn)：

　?、?nbsp;同一個(gè)節(jié)點(diǎn)，可以使用DOM2綁定多個(gè)同類型事件

　?、?nbsp;使用DOM2綁定的事件，有專門的函數(shù)取消

　　3.DOM2取消事件綁定：

　?、?nbsp;使用attachEvent綁定，用detachEvent("onclick",func1);取消

　?、?nbsp;使用addEventListenner綁定，用removeEventListener("click",func1);取消

1 document.getElementById("btn3").onclick=function() {

2 if(btn.detachEvent) {

3        btn.detachEvent("onclick", func1);

4     } else {

5        btn.removeEventListener("click", func1);

6     }

7     alert("取消事件綁定");

8 }

　　注意： 如果是DOM2綁定的事件需要取消，則綁定事 時(shí)，回掉函數(shù)必須是函數(shù)名，而不能是匿名函數(shù)，因?yàn)槿∠录r(shí)，，取消傳入函數(shù)名進(jìn)行綁定

　　js中的事件流模型

　　1.事件冒泡：

　　當(dāng)觸發(fā)一個(gè)節(jié)點(diǎn)的事件時(shí)，會(huì)從當(dāng)前節(jié)點(diǎn)開始，依次觸發(fā)其祖先節(jié)點(diǎn)的同類型事件， 直到DOM根節(jié)點(diǎn) 。

　　2.事件捕獲

　　當(dāng)觸發(fā)一個(gè)節(jié)點(diǎn)的事件時(shí)，會(huì)從DOM根節(jié)點(diǎn)開始，依次觸發(fā)其祖先節(jié)點(diǎn)的同類型事件， 知道當(dāng)前節(jié)點(diǎn)自身 。

　　3.什么時(shí)候事件冒泡？事件捕獲？

　?、?span>當(dāng)使用addEventListener綁定事件，第三個(gè)參數(shù)設(shè)為true時(shí)表示事件捕獲

　?、?span>除此之外的所有事件均為事件冒泡

　　4.阻止事件冒泡

　　①IE10之前，使用e.cancelBubble = true;

　?、贗E10之后，使用 e.stopPropagation();

1 function myParagraphEventHandler(e) {

2     e = e || window.event;

3     if (e.stopPropagation) {

4          e.stopPropagation(); //IE10之后

5     } else {

6          e.cancelBubble = true; //IE10之前

7     }

8 }

　　5.阻止默認(rèn)事件

　?、買E10之前：e.returnValue = false;

　?、贗E10之后：e.stopPropagation();

1 function eventHandler(e) {

2   e = e || window.event;

3   // 防止默認(rèn)行為

4   if (e.preventDefault) {

5        e.preventDefault(); //IE10之外

6    }else {

7       e.returnValue = false; //IE10之前

8    }

9 }

 

來源：網(wǎng)絡(luò)