JS的事件繫結和事件流模型

wait.發表於2018-10-27
JS事件模型

一、JS事件

（一）JS事件分類

1.滑鼠事件：

click/dbclick/mouseover/mouseout

2.HTML事件：

onload/onunload/onsubmit/onresize/onchange/onfoucs/onscroll

3.鍵盤事件：

keydown：鍵盤按下時觸發 keypress：鍵盤按下並抬起的瞬間觸發。 keyup：鍵盤抬起觸發 [注意事項] ①執行順序：keydown keypress keyup ②keypress只能捕獲數字，字母，符號鍵，而不能捕獲功能鍵。 ③長按時迴圈執行keydown--keypress ④有keydown，並不一定有keyup，當長按時焦點失去，將不再觸發keyup ⑤keypress區分大小寫，keydown，kewup不區分。

4.事件因子：

當觸發一個事件時，該事件將向事件所呼叫的函式中，預設傳入一個引數， 這個引數就是一個事件因子，包含了該事件的各種詳細資訊。

 document.onkeydown=function(e){
 console.log(e);
 }
複製程式碼
document.onkeydown=function(){
console.log(window.event);
}
複製程式碼
//相容瀏覽器的寫法：
document.onkeydown=function(e){
e==e||Window.event;
var Code=e.keyCode||e.which||e.charCode;
if(code==13){
//回車
}
}
複製程式碼

5.如何確定鍵盤按鍵？

①再出發的函式中，接收事件因子e。 ②可以使用e.key直接去到按下的按鍵字元（不推薦使用）。 ③一次可以使用keyCode/which/charCode取到按鍵的ASCII碼值。 (相容各種瀏覽器的寫法)

 var Code=e.keyCode||e.which||e.charCode;
複製程式碼
//判斷組合鍵
var isAlt=0,isEnt=0;
document.onkeyup=function(e){
if(e.keyCode==18){ //前端全棧開發交流圈：866109386
isAlt=1; // 面相1-3年前端開發人員
} // 幫助突破技術瓶頸，提升思維能力，歡迎大家進來。
if(e.keyCode==13){
isEnt=1;
}        
if(isAlt==1&&isEnt==1){
alert("同時按下Alt和Enter鍵");
}
}
複製程式碼
document.onkeyup=function(){
console.log("keyup");
}
document.onkeypress=function(){
console.log("keypress");
}
document.onkeydown=function(){
console.log("keydown");
}
document.onkeypress=function(){
console.log(window.event);
}
複製程式碼
//判斷是否按下了Enter鍵
document.onkeydown=function(e){
var code=e.keyCode;
if(code==13){
alert("你輸入的是Enter鍵");
}
}
複製程式碼

二、事件繫結模型

（一）DOM0事件模型 繫結注意事項：

①使用window.onload載入完成後進行繫結。

window.onload =function(){//事件}
複製程式碼

②放在body後面進行繫結。

//body內容
<body>
    <button onclick="func()">內聯模型繫結</button>
    <button id="btn1">哈哈哈哈</button>
    <button id="btn2">DOM2模型繫結</button>
    <button id="btn3">取消DOM2</button>
</body>
複製程式碼

1.內聯模型（行內繫結）：將函式名直接作為html標籤中屬性的屬性值。

<button onclick="func()">內聯模型繫結</button>
複製程式碼

缺點：不符合w3c中關於內容與 行為分離的基本規範。 2.指令碼模型（動態繫結）：通過在JS中選中某個節點，然後給節點新增onclick屬性。

document.getElementById("btn1")=function(){}
複製程式碼

優點：符合w3c中關於內容與行為分離的基本規範，實現html與js的分離。 缺點：同一個節點只能新增一次同型別事件，如果新增多次，最後一個生效。

document.getElementById("btn1").onclick=function(){
    alert(1234);    
}
document.getElementById("btn1").onclick=function(){
    alert(234);    
}//重複的只能出現最近的一次
複製程式碼

3.DOM0共有缺點：通過DOM0繫結的事件，一旦繫結將無法取消。

document.getElementById("btn3").onclick=function(){//不能取消匿名函式
    if(btn.detachEvent){
        btn.detachEvent("onclick",func1);
    }else{
        btn.removeEventListener("click",func1);
    }
        alert("取消DOM2");
}
複製程式碼

（二）DOM2事件模型

1.新增DOM2事件繫結：

①IE8之前，使用.attachEvent("onclick",函式); ②IE8之後，使用.addEventListener("click",函式，true/false); 引數三：false（預設）表示事件冒泡，傳入true表示事件捕獲。 ③相容所有瀏覽器的處理方式：

 var btn=document.getElementById("btn1");
 if(btn.attachEvent){
 btn.attachEvent("onclick",func1);//事件，事件需要執行的函式IE8可以
 }else{
  btn.attachEventListener("click",func1);
 }
複製程式碼

2.DOM2繫結的優點：

①同一個節點，可以使用DOM2繫結多個同型別事件。 ②使用DOM2繫結的事件，可以有專門的函式進行取消。

3.取消事件繫結：

①使用attachEvent繫結，要用detachevent取消。 ②使用attachEventListener繫結，要用removeEventListenter取消。 注意：如果DOM2繫結的事件，需要取消，則繫結事件時，回撥函式必須是函式名， 而不能是匿名函式，因為取消事件時，取消傳入函式名進行取消。

三、JS事件流模型

（一）JS中的事件流模型

  1. 事件冒泡(fasle/不寫)：當觸發一個節點的事件是，會從當前節點開始，依次觸發其祖先節點的同型別事件，直到DOM根節點。
  2. 事件捕獲(true)：當初發一個節點的事件時，會從DOM根節點開始，依次觸發其祖先節點的同型別事件，直到當前節點自身。
  3. 什麼時候事件冒泡？什麼時候事件捕獲？ ① 當使用addEventListener繫結事件，第三個引數傳為true時表示事件捕獲； ② 除此之外的所有事件繫結均為事件冒泡。
  4. 阻止事件冒泡： ① IE10之前，e.cancelBubble = true; ② IE10之後，e.stopPropagation();
  5. 阻止預設事件： ① IE10之前：e.returnValue = false; ② IE10之後：e.preventDefault();
css//
#div1{
    width: 300px;;
    height: 300px;
    background-color: powderblue;
}
#div2{
    width: 200px;
    height: 200px;
    background-color: deeppink;
}
#div3{
    width: 100px;
    height: 100px;
    background-color:#A9A9A9;
}
複製程式碼
//html
<div id="div1">
    <div id="div2">
        <div id="div3"></div>
    </div>
</div>
<a href="01-事件筆記.html" onclick="func()">超連結</a>
複製程式碼
div1.addEventListener("click",function(){
    console.log("div1 click");
},false);
div2.addEventListener("click",function(){
    console.log("div2 click");
},false);
div3.addEventListener("click",function(){ //原來的順序是：3-->2-->1。
//    myParagraphEventHandler(); //截獲事件流後，只觸發3.但是從2開始依然會冒泡；
    console.log("div3 click");
},false);
複製程式碼

結果（事件冒泡）（由小到大div3-》div2-》div1）：

JS的事件繫結和事件流模型

div1.addEventListener("click",function(){
    console.log("div1 click");
},true);
div2.addEventListener("click",function(){
    console.log("div2 click");
},true);
div3.addEventListener("click",function(){ 
//    myParagraphEventHandler(); //截獲事件流後，只觸發3.但是從2開始依然會冒泡；
    console.log("div3 click");
},true);
複製程式碼

結果(事件捕獲)（由小到大div3-》div2-》div1）：

JS的事件繫結和事件流模型

//依然遵循事件冒泡
document.onclick=function(){
    console.log("document click")
}
複製程式碼
//截獲事件流阻止事件冒泡
function myParagraphEventHandler(e) {
     e = e || window.event;
    if (e.stopPropagation) {
         e.stopPropagation(); //IE10以後 
    } else {
         e.cancelBubble = true; //IE10之前
     }
}
複製程式碼
//截獲事件流阻止事件冒泡
function myParagraphEventHandler(e) {
     e = e || window.event;
    if (e.stopPropagation) {
         e.stopPropagation(); //IE10以後 
    } else {
         e.cancelBubble = true; //IE10之前
     }
}
複製程式碼
//阻止預設事件
function eventHandler(e) {
    e = e || window.event;
// 防止預設行為 
     if (e.preventDefault) {
         e.preventDefault(); //IE10之後
    } else {
         e.returnValue = false; //IE10之前    
    }
}
複製程式碼

相關文章