DOM中的event對象詳解 — 第13.3.1節

了解事件對象

追根溯源事件對象，才發現自己會的微不足道！

  在觸發DOM的事件的時候，浏覽器會預設産生一個event對象，這個對象包含了所有與該事件有關的資訊，比如：滑鼠點選頁面的某個按鈕會讓事件對象中包含對象的節點、滑鼠的位置….等資訊。

一：對于直接在html裡寫入的事件，通過變量event來輸出event對象：

<input type="button" value="按鈕3" onmouseover="console.log(event)">
           

二：event對象有是什麼呢？不要怕，慢慢來看：

三：this、e.target和e.currentTarget的差別

在事件處理程式的内部，對象this始終等于currentTarget，而target則隻包含事件的實際目标。

公共代碼：

<input type="button" value="點選1" id="mybtn1">
<input type="button" value="點選2" id="mybtn2">
<input type="button" value="點選4" id="mybtn4">
<a href="http://www.baidu.com" id="mybtn3">百度</a>
           

情況一：直接将事件處理程式指定給目标（兩者相等）

btn.addEventListener('mouseover',function(e){
        console.log(e)
        console.log(e.type);         //mouseover
        console.log(e.currentTarget);//<input type="button" value="點選" id="mybtn">
        console.log(e.target);       //<input type="button" value="點選" id="mybtn">
    },false);
           

情況二：事件處理程式指定在按鈕的父節點中（兩者不相等）

document.body.onclick = function(e){
        console.log(this);          //body...</body>
        console.log(e.currentTarget);//body...</body>
        console.log(e.target);      //<div id="mybtn2"></div>
    }
           

總結各個情況：當eventPhase等于2的時候，this、target和currentTarget始終是相等的,其餘别的情況，兩者不相等。

btn4.onclick = function(e){
    console.log(e.eventPhase);  //2
}
document.body.addEventListener('click',function(e){
    console.log(e.eventPhase);  //1
},true);
document.body.onclick = function(e){
    console.log(e.eventPhase);  //3
}
           

四：一個函數處理多個事件的方法？

var handler = function(event){
    switch(event.type){
        case 'click':
            alert('clicked');
            break;
        case 'mouseover':
            event.target.style.backgroundColor = 'red';
            break;
        case 'mouseout':
            event.target.style.backgroundColor = '';
            break;
    }
};
btn1.onclick = handler;
btn2.onmouseover = handler;
btn2.onmouseout = handler;
           

五：stopPropagation和preventDefault用法

//stopPropagation取消事件進一步捕獲或者冒泡
//preventDefault取消事件預設行為
//defaultPrevented的值為true的時候表示調用了preventDefault()方法
btn3.onclick = function(e){
    alert('click');
    e.stopPropagation();
    e.preventDefault();
    console.log(e.defaultPrevented);//true
}
document.body.onclick = function(e){
    alert('Body Clicked');
}
           

隻有在事件處理程式執行的時候，event才會被建立，處理程式執行完成的時候event被銷毀