JavaScript 筆記 —— 標準事件對象與 IE 事件對象

animabear 發布于2019-08-21 10:24 / 2412人閱讀

摘要：另外，標準事件對象還有一個屬性，該屬性在事件處理函數當中始終與相等，而屬性則是指向事件觸發的具體目標。取消事件默認行為有如下的標準事件對象使用的方法取消事件默認行為。而在標準事件綁定當中，的值等于被綁定的元素。

標準的事件綁定函數是 addEventListener 函數，而 IE 瀏覽器（IE9 以下）則是用 attachEvent。這兩個函數中的事件處理函數都可以傳入一個 event 參數，就是我們所說的事件對象，本文就來總結一下兩者的區別。

獲取事件的目標

事件的目標就是指當前觸發事件的元素。

有如下的 HTML：

標準事件對象使用 event 的 target 屬性獲取事件目標。

var btn = document.getElementById("myButton");
btn.addEventListener("click", function(event) {
    alert(event.target.id);    // myButton
});

IE 事件對象使用 event 的 srcElement 屬性獲取事件目標。

var btn = document.getElementById("myButton");
btn.attachEvent("onclick", function(event) {
    alert(event.srcElement.id);    // myButton
});

另外，標準事件對象還有一個 currentTarget 屬性，該屬性在事件處理函數當中始終與 this 相等，而 target 屬性則是指向事件觸發的具體目標。

document.body.addEventListener("click", function (event) {
    alert(event.currentTarget.id);    // myBody
    alert(event.target.id);           // myButton
    alert(this.id);                   // myBody
});

取消事件默認行為

有如下的 HTML：


    acwong blog

標準事件對象使用 event 的 preventDefault() 方法取消事件默認行為。

var myLink = document.getElementById("myLink");
myLink.addEventListener("click",function(event) {
    alert("haha");          // haha
    event.preventDefault(); // 瀏覽器不會跳轉
});

IE 事件對象使用 event 的 returnValue 屬性取消事件默認行為，該屬性默認值為 true 設置為 false 就可以取消事件默認行為。

var myLink = document.getElementById("myLink");
myLink.attaxchEvent("onclick",function(event) {
    alert("haha");                  // haha
    event.returnValue = false;      // 瀏覽器不會跳轉
});

禁止事件冒泡

有如下的 HTML:

標準事件對象使用 event 的 stopPropagation() 方法禁止事件冒泡。

var btn = document.getElementById("myButton");
btn.addEventListener("click", function(event) {
    alert(this.id);            // myButton
    event.stopPropagation();   // 禁止事件冒泡
});
document.body.addEventListener("click",function(event) {
    alert(this.id);           // 不會出現
});

IE 事件對象使用 event 的 cancelBubble 屬性禁止事件冒泡，該屬性值默認為 false，設置為 true 就可以禁止事件冒泡。

var btn = document.getElementById("myButton");
btn.attachEvent("onclick", function(event) {
    alert("haha");              // haha
    event.cancelBubble = true;  // 禁止事件冒泡
});
document.body.attachEvent("onclick",function(event) {
    alert("hehe");             // 不會出現
});

IE 事件處理函數中的 this

最后，還要一個與事件對象無關的小點，在 IE 事件處理函數當中 this 的值并不等于被綁定元素，而是等于 window 對象。

var btn = document.getElementById("myButton");
btn.attachEvent("onclick", function(event) {
    alert(this === window);              // true
    alert(this.id)                       // undefined
});

而在標準事件綁定當中，this 的值等于被綁定的元素。

var btn = document.getElementById("myButton");
btn.addEventListener("click", function(event) {
    alert(this === btn);                  // true
    alert(this.id);                       // myButton
    alert(this === event.currentTarget);  // true
});

最后祝大家新年快樂~

感謝您的閱讀，有不足之處請為我指出。

參考

JavaScript高級程序設計(第3版)

本文同步于我的個人博客 http://blog.acwong.org/2014/12/30/standard-event-object-and-IE-event-object/

GPU云服務器云服務器 IE事件對象事件對象 js事件對象 html對象點擊事件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/85460.html

JavaScript 筆記 —— 鼠標事件的瀏覽器差異

摘要：本文總結一下，鼠標事件在不同瀏覽器實現的差異。和相關元素差異和是級事件當中的其中兩個事件。標準事件對象使用屬性來識別鼠標按鍵。該事件當中的值與事件對象當中的作用相同。鼠標是我們在 PC 端瀏覽網頁時候最重要的交互工具，因此鼠標事件也是 Web 開發當中最常用的一類事件。然而，由于各種原因，不同廠商或者不同版本的瀏覽器之間對于鼠標事件的實現也有所不同。本文總結一下，鼠標事件在不同瀏覽器...

haoguo 2019-08-21 10:25 評論0 收藏0
001-讀書筆記-JavaScript高級程序設計 JavaScript簡介

摘要：由于計算機的國際化，組織的標準牽涉到很多其他國家，因此組織決定改名表明其國際性。規范由萬維網聯盟制定。級標準級標準是不存在的，級一般指的是最初支持的。這篇筆記的內容對應的是《JavaScript高級程序設計(第三版)》中的第一章。 1.ECMA 和 ECMA-262 ECMA 是歐洲計算機制造商協會的縮寫，全程是 European Computer Manufacturers Ass...

masturbator 2019-08-21 17:18 評論0 收藏0
[學習筆記] 事件（上篇）

摘要：指定事件處理程序指定事件處理程序主要有兩種方式級事件處理程序級事件處理程序。添加事件處理程序注意這里是哦或移除事件處理程序使用移除事件處理程序的條件與方法相同必須提供相同的參數，從而添加的匿名函數也無法被移除。今天看書又看到事件，遂決定小總結一下~ JavaScript與HTML之間的交互是通過事件實現的。事件，就是文檔或瀏覽器窗口中發生的一些特定的交互瞬間。可以使用監聽器（事件處...

wangym 2019-08-22 10:57 評論0 收藏0
[學習筆記] 事件（上篇）

摘要：指定事件處理程序指定事件處理程序主要有兩種方式級事件處理程序級事件處理程序。添加事件處理程序注意這里是哦或移除事件處理程序使用移除事件處理程序的條件與方法相同必須提供相同的參數，從而添加的匿名函數也無法被移除。今天看書又看到事件，遂決定小總結一下~ JavaScript與HTML之間的交互是通過事件實現的。事件，就是文檔或瀏覽器窗口中發生的一些特定的交互瞬間。可以使用監聽器（事件處...

RayKr 2019-08-01 14:48 評論0 收藏0
JavaScript MVC 學習筆記（五）事件的基本操作

摘要：事件是應用程序的核心，是所有內容的驅動。將對這兩種事件模型的支持都加入標準規范之中。根據型，事件首先被目標元素所捕捉，然后向上冒泡。取消事件冒泡當事件冒泡時，可以通過數來終止冒泡，這個函數是對象中的方法。事件是 JavaScript 應用程序的核心，是所有內容的驅動。盡管后來W3C 對此做了標準化，但 IE 仍然堅持使用與 W3C 不兼容的事件模型，直到 IE9 才遵循標準。有很多諸...

Julylovin 2019-08-21 10:26 評論0 收藏0