深入理解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)

document.onkeydown=function()

//相容瀏覽器的寫法：

document.onkeydown=function(e)
}

①再出發的函式中，接收事件因子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==13) 
if(isalt==1&&isent==1)
}document.onkeyup=function()
document.onkeypress=function()
document.onkeydown=function()
document.onkeypress=function()
//判斷是否按下了回車鍵
document.onkeydown=function(e)
}

繫結注意事項：

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

window.onload =function()

②放在body後面進行繫結。

//body內容

內聯模型繫結
哈哈哈哈
dom2模型繫結
取消dom2

內聯模型繫結

2.指令碼模型（動態繫結）：通過在js中選中某個節點，然後給節點新增onclick屬性。

document.getelementbyid("btn1")=function(){}

缺點：同乙個節點只能新增一次同型別事件，如果新增多次，最後乙個生效。

document.getelementbyid("btn1").onclick=function()

document.getelementbyid("btn1").onclick=function()//重複的只能出現最近的一次

document.getelementbyid("btn3").onclick=function()else

alert("取消dom2");
}

1.新增dom2事件繫結：

①ie8之前，使用.attachevent("onclick",函式);

②ie8之後，使用.addeventlistener("click",函式，true/false);

引數三：false（預設）表示事件冒泡，傳入true表示事件捕獲。

③相容所有瀏覽器的處理方式：

var btn=document.getelementbyid("btn1");

if(btn.attachevent)else

①同乙個節點，可以使用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
#div2
#div3
//html
超連結div1.addeventlistener("click",function(),false);
div2.addeventlistener("click",function(),false);
div3.addeventlistener("click",function(),false);

div1.addeventlistener("click",function(),true);

div2.addeventlistener("click",function(),true);
div3.addeventlistener("click",function(),true);

//依然遵循事件冒泡

document.onclick=function()
//截獲事件流阻止事件冒泡
function myparagrapheventhandler(e) else 
}//截獲事件流阻止事件冒泡
function myparagrapheventhandler(e) else 
}//阻止預設事件
function eventhandler(e) else 
}

JS事件流，事件繫結

事件流，事件繫結 主流browser，符合w3c標準，支援冒泡和捕獲 低版本ie，僅支援冒泡 冒泡到window document 事件繫結 解綁 elem.addeventlistener evt,func,usecapture elem.removeeventlistener evt,func ...

深入理解事件冒泡和事件捕捉

前幾天做到阿里的前端面試題，其中的一道選擇題考查的知識點就是事件的傳播，當時做題的時候不確定答案所以決定總結下這方面的知識點。首先事件傳播分為三個階段 第一階段 發生在目標處理程式呼叫之前，稱為捕獲階段 第二階段 目標物件本身的事件處理程式呼叫 第三階段 發生在目標處理程式呼叫之後，稱為冒泡階段 回...

深入理解事件捕獲冒泡

看到乙個的日誌，發現自己對事件冒泡捕獲並沒有完全理解透。借用一下這個例子和大家 一下 假設有指令碼片段如下 document.body.addeventlistener mousedown function e false document.body.addevnetlistener mousedo...