JS學(xué)習(xí)之事件對(duì)象理解

在觸發(fā)DOM上的某個(gè)事件時(shí)，會(huì)創(chuàng)建一個(gè)event對(duì)象，該對(duì)象中包含著與事件相關(guān)的信息，包括事件的類型，導(dǎo)致事件的元素以其他的與事件有關(guān)的信息。

DOM中的事件對(duì)象

兼容DOM的瀏覽器會(huì)在事件觸發(fā)時(shí)傳一個(gè)event對(duì)象到事件處理程序中。不論指定事件處理程序時(shí)使用哪種方法（DOM0級(jí) 或者 DOM2級(jí))。

接下來(lái)我們看一個(gè)例子：

//假設(shè)有個(gè)按鈕，id為btn
<script>
var btn = document.getElementById("btn");
//DOM0級(jí)
btn.onclick = function (event)
{
    alert(event.type);  //"click"
}
//DOM2級(jí)
btn.addEventListener("click",function(event)
{
   alert(event.type);  //"click"
},false);
</script>

前面說(shuō)了event對(duì)象中包含著與事件有關(guān)的信息，那么，不可缺少的，event對(duì)象會(huì)有一些特定的屬性和方法。我們只介紹幾個(gè)常用的。

• bubbles 表示事件是否冒泡
• currentTarget 表示事件處理程序當(dāng)前正在處理事件的那個(gè)元素（簡(jiǎn)單來(lái)說(shuō)，就是你把事件設(shè)置給的那個(gè)元素）
• detail 與事件有關(guān)的詳細(xì)信息
• eventPhase 表示事件所處的階段 1 表示事件捕獲 2 表示“處于目標(biāo)”階段 3 表示事件冒泡
• target 事件的目標(biāo)
• type 事件的類型

事件流：從頁(yè)面接收事件的順序
IE中的事件流叫做事件冒泡，即事件開(kāi)始時(shí)由最具體的元素（文檔中嵌套層次最深的元素）接收，逐級(jí)向上傳播到最不具體的節(jié)點(diǎn)（文檔）。
Netscape提出的一種事件流叫事件捕獲，即事件由最不具體的節(jié)點(diǎn)先接收，然后逐級(jí)向下，知道最具體的節(jié)點(diǎn)。
DOM2級(jí)事件 規(guī)定的事件流分為三個(gè)階段 ：事件捕獲，處于目標(biāo)，事件冒泡

在事件處理程序中，this的值始終等于currentTarget的值，而target的值為實(shí)際目標(biāo)。

<div id = "Div" class="Father">
        <div id = "son" class="Son">
            <input type = "number" value = "0" id = "Input" class="input">
        </div>
    </div>
    <script type="text/javascript">
        var div = document.getElementById("Div");
div.addEventListener("click",function(event)
        {
            alert(this === event.target);
        })
    </script>

1566032819(1).png

當(dāng)我們點(diǎn)擊最外面的div時(shí)，結(jié)果顯示為true。當(dāng)點(diǎn)擊內(nèi)部的兩個(gè)div塊時(shí)，結(jié)果均是顯示false.

這是因?yàn)?，正如上面所說(shuō)，target 是事件的實(shí)際目標(biāo)，而this 等于currentTarget。currentTarget的值是由事件處理程序的對(duì)象決定的,在這段代碼中，我們把onclick事件添加到最外面的div塊上面，因此，currentTarget的值為div (或者 document.getElementById("Div"))

也就是說(shuō)，只有直接將事件處理程序指定給了目標(biāo)元素，則this, currentTarget, target的值相同

var btn = document.getElementById("btn");
btn.onclick = function(event)
{
    //省略代碼
}

IE中的事件對(duì)象

與在DOM中訪問(wèn)event對(duì)象不同，IE中訪問(wèn)event對(duì)象有幾種不同的方式，取決于指定事件處理程序的方式。當(dāng)通過(guò)DOM0級(jí)方式添加事件處理程序時(shí)，event對(duì)象作為window對(duì)象的一個(gè)屬性存在。

var btn = document.getElementById("btn");
btn.onclick = function()
{
    var event = window.event;
    alert(event.type);    //"click"
}

IE中的事件處理函數(shù)：attachEvent()，detachEvent();

當(dāng)使用attachEvent()來(lái)添加事件處理程序時(shí)，則會(huì)有一個(gè)event對(duì)象作為參數(shù)被傳入事件處理函數(shù)中。當(dāng)然也可以用window對(duì)象來(lái)訪問(wèn)event對(duì)象。

btn.attachEvent("onclick",function(event)
{
    //省略代碼
});

可以看到這里我們的匿名函數(shù)是有一個(gè)參數(shù)的：event。此處要注意：attachEvent()函數(shù)第一個(gè)參數(shù)是onclick而不是click

IE中event對(duì)象的屬性和方法：

• cancelBubble 默認(rèn)為false,設(shè)置為true即可取消事件冒泡（IE中不支持事件被捕獲，因此只能取消事件冒泡）
• type 事件的類型
• srcElement 事件的目標(biāo)（與DOM中的target相同）

注意：

• 采用DOM0級(jí)添加事件，事件處理程序均是在其依附元素的作用域下運(yùn)行。
• 對(duì)于DOM2級(jí)方式添加事件，DOM2級(jí)方法addEventListener(), removeEventListener()是在其依附元素的作用域中運(yùn)行，而對(duì)于IE來(lái)說(shuō)，attachEvent()，detachEvent()是在全局作用域中運(yùn)行。