JavaScript事件對象

標籤：class   程式   mil   屬性   div   efault   add   win   停止   

1、DOM中的事件對象

相容 DOM 的瀏覽器會將一個 event 對象傳入到事件處理常式中。無論指定事件處理常式時使用什麼方法（DOM0 級或 DOM2 級），都會傳入 event 對象。

var btn = document.getElementById("myBtn");btn.onclick = function(event){alert(event.type); //"click"};btn.addEventListener("click", function(event){alert(event.type); //"click"}, false);

（1）type：擷取事件類型

（2）target：擷取事件目標

在事件處理常式內部，對象 this 始終等於 currentTarget 的值，而 target 則只包含事件的實際目標。如果直接將事件處理常式指定給了目標元素，則 this 、 currentTarget 和 target 包含相同的值。

var btn = document.getElementById("myBtn");btn.onclick = function(event){alert(event.currentTarget === this); //truealert(event.target === this); //true};

這個例子檢測了 currentTarget 和 target 與 this 的值。由於 click 事件的目標是按鈕，因此這三個值是相等的。

如果事件處理常式存在於按鈕的父節點中（例如 document.body ），那麼這些值是不相同的。

document.body.onclick = function(event){alert(event.currentTarget === document.body); //truealert(this === document.body); //truealert(event.target === document.getElementById("myBtn")); //true}; 

當單擊這個例子中的按鈕時， this 和 currentTarget 都等於 document.body ，因為事件處理常式是註冊到這個元素上的。然而， target 元素卻等於按鈕元素，因為它是 click 事件真正的目標。由於按鈕上並沒有註冊事件處理常式，結果 click 事件就冒泡到了 document.body ，在那裡事件才得到
了處理。

（3）stopPropagation()：阻止事件冒泡

（4）preventDefault：取消事件的預設行為

注意：只有在事件處理常式執行期間， event 對象才會存在；一旦事件處理常式執行完成， event 對象就會被銷毀。

2、IE中的事件對象

（1）type：擷取事件類型

（2）srcElement：擷取事件目標

因為事件處理常式的範圍是根據指定它的方式來確定的，所以不能認為 this 會始終等於事件目標。故而，最好還是使用 event.srcElement 比較保險。

var btn = document.getElementById("myBtn");btn.onclick = function(){alert(window.event.srcElement === this);  //true};btn.attachEvent("onclick", function(event){alert(event.srcElement === this);  //false});

在第一個事件處理常式中（使用 DOM0 級方法指定的）， srcElement 屬性等於 this ，但在第二個事件處理常式中，這兩者的值不相同。

 

（3）cancelBubble：阻止事件冒泡的屬性

（4）returnValue：取消事件的預設行為的屬性

returnValue 屬性相當於 DOM中的 preventDefault() 方法，它們的作用都是取消給定事件的預設行為。只要將 returnValue 設定為 false ，就可以阻止預設行為。

var link = document.getElementById("myLink");link.onclick = function(){window.event.returnValue = false;};

cancelBubble 屬性與 DOM 中的 stopPropagation() 方法作用相同，都是用來停止事件冒泡的。由於 IE 不支援事件捕獲，因而只能取消事件冒泡；但 stopPropagatioin() 可以同時取消事件捕獲和冒泡。

var btn = document.getElementById("myBtn");btn.onclick = function(){alert("Clicked");window.event.cancelBubble = true;};document.body.onclick = function(){alert("Body clicked");}; 

3、跨瀏覽器的事件對象

var EventUtil = {addHandler: function(element, type, handler){//省略的代碼},getEvent: function(event){return event ? event : window.event;},getTarget: function(event){return event.target || event.srcElement;},preventDefault: function(event){if (event.preventDefault){event.preventDefault();} else {event.returnValue = false;}},removeHandler: function(element, type, handler){//省略的代碼},stopPropagation: function(event){if (event.stopPropagation){event.stopPropagation();} else {event.cancelBubble = true;}}};

window.event：IE8以及以下擷取event對象。

 

JavaScript事件對象