javaScript事件學(xué)習(xí)小結(jié)（四）event的公共成員（屬性和方法）

更新時(shí)間：2016年06月09日 11:32:21 作者：starof

這篇文章主要介紹了javaScript事件學(xué)習(xí)小結(jié)（四）event的公共成員（屬性和方法）的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下

相關(guān)閱讀：

JavaScript事件學(xué)習(xí)小結(jié)(五）js中事件類(lèi)型之鼠標(biāo)事件

http://m.fzitv.net/article/86259.htm

JavaScript事件學(xué)習(xí)小結(jié)（一）事件流

http://m.fzitv.net/article/86261.htm

javaScript事件學(xué)習(xí)小結(jié)（四）event的公共成員（屬性和方法）

http://m.fzitv.net/article/86262.htm

JavaScript事件學(xué)習(xí)小結(jié)(二)js事件處理程序

http://m.fzitv.net/article/86264.htm

JavaScript事件學(xué)習(xí)小結(jié)（三）js事件對(duì)象

一、事件對(duì)象的公共成員

1、DOM中的event的公共成員

event對(duì)象包含與創(chuàng)建它的特定事件有關(guān)的屬性和方法。觸發(fā)的事件類(lèi)型不一樣，可用的屬性和方法不一樣。但是，DOM中所有事件都有以下公共成員。

a、對(duì)比currentTarget和target

在事件處理程序內(nèi)部，對(duì)象this始終等于currentTarget的值，而target則只是包含事件的實(shí)際目標(biāo)。

舉例：頁(yè)面有個(gè)按鈕，在body（按鈕的父節(jié)點(diǎn)）中注冊(cè)click事件，點(diǎn)按鈕時(shí)click事件會(huì)冒泡到body進(jìn)行處理。

<body>
<input id="btn" type="button" value="click"/>
<script>
 document.body.onclick=function(event){
 console.log("body中注冊(cè)的click事件");
 console.log("this===event.currentTarget? "+(this===event.currentTarget)); //true
 console.log("currentTarget===document.body?"+(event.currentTarget===document.body)); //true
 console.log('event.target===document.getElementById("btn")? '+(event.target===document.getElementById("btn"))); //true
 }
</script>
</body>

運(yùn)行結(jié)果為：

b、通過(guò)type屬性，可以在一個(gè)函數(shù)中處理多個(gè)事件。

原理：通過(guò)檢測(cè)event.type屬性，對(duì)不同事件進(jìn)行不同處理。

舉例：定義一個(gè)handler函數(shù)用來(lái)處理3種事件：click,mouseover,mouseout。

<body>
<input id="btn" type="button" value="click"/>
<script>
var handler=function(event){
 switch (event.type){
 case "click":
 alert("clicked");
 break;
 case "mouseover":
 event.target.style.backgroundColor="pink";
 break;
 case "mouseout":
 event.target.style.backgroundColor="";
 }
};
 var btn=document.getElementById("btn");
 btn.onclick=handler;
 btn.onmouseover=handler;
 btn.onmouseout=handler;
</script>
</body>

運(yùn)行效果：點(diǎn)擊按鈕，彈出框。鼠標(biāo)經(jīng)過(guò)按鈕，按鈕背景色變?yōu)榉凵皇髽?biāo)離開(kāi)按鈕，背景色恢復(fù)默認(rèn)。

c、stopPropagation()和stopImmediatePropagation()對(duì)比

同：stopPropagation()和 stopImmediatePropagation()都可以用來(lái)取消事件的進(jìn)一步捕獲或冒泡。

異：二者的區(qū)別在于當(dāng)一個(gè)事件有多個(gè)事件處理程序時(shí)，stopImmediatePropagation()可以阻止之后事件處理程序被調(diào)用。

舉例：

<body>
<input id="btn" type="button" value="click"/>
<script>
 var btn=document.getElementById("btn");
 btn.addEventListener("click",function(event){
 console.log("buttn click listened once");
// event.stopPropagation();//取消注釋查看效果
// event.stopImmediatePropagation();//取消注釋查看效果
 },false);
 btn.addEventListener("click",function(){
 console.log("button click listened twice");
 },false);
 document.body.onclick= function (event) {
 console.log("body clicked");
 }
</script>
</body>

運(yùn)行效果：

d、eventPhase

eventPhase值在捕獲階段為1，處于目標(biāo)階段為2，冒泡階段為3。

例子：

<body>
<input id="btn" type="button" value="click"/>
<script>
var btn=document.getElementById("btn");
btn.onclick= function (event) {
 console.log("按鈕DOM0級(jí)方法添加事件處理程序eventPhase值為？"+event.eventPhase);
}
btn.addEventListener("click",function(event){
 console.log("按鈕DOM2級(jí)方法添加事件處理程序，且addEventListener第三個(gè)參數(shù)為true時(shí)eventPhase值為？"+event.eventPhase);
},true);
btn.addEventListener("click",function(event){
 console.log("按鈕DOM2級(jí)方法添加事件處理程序，且addEventListener第三個(gè)參數(shù)為false時(shí)eventPhase值為？"+event.eventPhase);
},false);
 document.body.addEventListener("click", function (event) {
 console.log("body上添加事件處理程序，且在捕獲階段eventPhase值為？"+event.eventPhase);
 },true);
document.body.addEventListener("click", function (event) {
 console.log("body上添加事件處理程序，且在冒泡階段eventPhase值為？"+event.eventPhase);
},false);
</script>

運(yùn)行效果：