成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

JavaScript 筆記 —— 標(biāo)準(zhǔn)事件對(duì)象與 IE 事件對(duì)象

animabear / 2418人閱讀

摘要：另外，標(biāo)準(zhǔn)事件對(duì)象還有一個(gè)屬性，該屬性在事件處理函數(shù)當(dāng)中始終與相等，而屬性則是指向事件觸發(fā)的具體目標(biāo)。取消事件默認(rèn)行為有如下的標(biāo)準(zhǔn)事件對(duì)象使用的方法取消事件默認(rèn)行為。而在標(biāo)準(zhǔn)事件綁定當(dāng)中，的值等于被綁定的元素。

標(biāo)準(zhǔn)的事件綁定函數(shù)是 addEventListener 函數(shù)，而 IE 瀏覽器（IE9 以下）則是用 attachEvent。 這兩個(gè)函數(shù)中的事件處理函數(shù)都可以傳入一個(gè) event 參數(shù)，就是我們所說的事件對(duì)象，本文就來總結(jié)一下兩者的區(qū)別。

獲取事件的目標(biāo)

事件的目標(biāo)就是指當(dāng)前觸發(fā)事件的元素。

有如下的 HTML：

標(biāo)準(zhǔn)事件對(duì)象使用 event 的 target 屬性獲取事件目標(biāo)。

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

IE 事件對(duì)象使用 event 的 srcElement 屬性獲取事件目標(biāo)。

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

另外，標(biāo)準(zhǔn)事件對(duì)象還有一個(gè) currentTarget 屬性，該屬性在事件處理函數(shù)當(dāng)中始終與 this 相等，而 target 屬性則是指向事件觸發(fā)的具體目標(biāo)。

document.body.addEventListener("click", function (event) {
    alert(event.currentTarget.id);    // myBody
    alert(event.target.id);           // myButton
    alert(this.id);                   // myBody
});
取消事件默認(rèn)行為

有如下的 HTML：


    acwong blog

標(biāo)準(zhǔn)事件對(duì)象使用 event 的 preventDefault() 方法取消事件默認(rèn)行為。

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

IE 事件對(duì)象使用 event 的 returnValue 屬性取消事件默認(rèn)行為，該屬性默認(rèn)值為 true 設(shè)置為 false 就可以取消事件默認(rèn)行為。

var myLink = document.getElementById("myLink");
myLink.attaxchEvent("onclick",function(event) {
    alert("haha");                  // haha
    event.returnValue = false;      // 瀏覽器不會(huì)跳轉(zhuǎn)
});
禁止事件冒泡

有如下的 HTML:

標(biāo)準(zhǔn)事件對(duì)象使用 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);           // 不會(huì)出現(xiàn)
});

IE 事件對(duì)象使用 event 的 cancelBubble 屬性禁止事件冒泡，該屬性值默認(rèn)為 false，設(shè)置為 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");             // 不會(huì)出現(xiàn)
});
IE 事件處理函數(shù)中的 this

最后，還要一個(gè)與事件對(duì)象無關(guān)的小點(diǎn)，在 IE 事件處理函數(shù)當(dāng)中 this 的值并不等于被綁定元素，而是等于 window 對(duì)象。

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

而在標(biāo)準(zhǔn)事件綁定當(dāng)中，this 的值等于被綁定的元素。

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

最后祝大家新年快樂~

感謝您的閱讀，有不足之處請(qǐng)為我指出。

參考

JavaScript高級(jí)程序設(shè)計(jì)(第3版)

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/85460.html

相關(guān)文章

  • JavaScript 筆記 —— 鼠標(biāo)事件的瀏覽器差異

    摘要：本文總結(jié)一下，鼠標(biāo)事件在不同瀏覽器實(shí)現(xiàn)的差異。和相關(guān)元素差異和是級(jí)事件當(dāng)中的其中兩個(gè)事件。標(biāo)準(zhǔn)事件對(duì)象使用屬性來識(shí)別鼠標(biāo)按鍵。該事件當(dāng)中的值與事件對(duì)象當(dāng)中的作用相同。 鼠標(biāo)是我們?cè)?PC 端瀏覽網(wǎng)頁時(shí)候最重要的交互工具，因此鼠標(biāo)事件也是 Web 開發(fā)當(dāng)中最常用的一類事件。然而，由于各種原因，不同廠商或者不同版本的瀏覽器之間對(duì)于鼠標(biāo)事件的實(shí)現(xiàn)也有所不同。本文總結(jié)一下，鼠標(biāo)事件在不同瀏覽器...

    haoguo 評(píng)論0 收藏0

  • 001-讀書筆記-JavaScript高級(jí)程序設(shè)計(jì) JavaScript簡(jiǎn)介

    摘要：由于計(jì)算機(jī)的國(guó)際化，組織的標(biāo)準(zhǔn)牽涉到很多其他國(guó)家，因此組織決定改名表明其國(guó)際性。規(guī)范由萬維網(wǎng)聯(lián)盟制定。級(jí)標(biāo)準(zhǔn)級(jí)標(biāo)準(zhǔn)是不存在的，級(jí)一般指的是最初支持的。 這篇筆記的內(nèi)容對(duì)應(yīng)的是《JavaScript高級(jí)程序設(shè)計(jì)(第三版)》中的第一章。 1.ECMA 和 ECMA-262 ECMA 是歐洲計(jì)算機(jī)制造商協(xié)會(huì)的縮寫，全程是 European Computer Manufacturers Ass...

    masturbator 評(píng)論0 收藏0

  • [學(xué)習(xí)筆記] 事件（上篇）

    摘要：指定事件處理程序指定事件處理程序主要有兩種方式級(jí)事件處理程序級(jí)事件處理程序。添加事件處理程序注意這里是哦或移除事件處理程序使用移除事件處理程序的條件與方法相同必須提供相同的參數(shù)，從而添加的匿名函數(shù)也無法被移除。 今天看書又看到事件，遂決定小總結(jié)一下~ JavaScript與HTML之間的交互是通過事件實(shí)現(xiàn)的。事件，就是文檔或?yàn)g覽器窗口中發(fā)生的一些特定的交互瞬間?？梢允褂帽O(jiān)聽器（事件處...

    wangym 評(píng)論0 收藏0

  • [學(xué)習(xí)筆記] 事件（上篇）

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

    RayKr 評(píng)論0 收藏0

  • JavaScript MVC 學(xué)習(xí)筆記（五）事件的基本操作

    摘要：事件是應(yīng)用程序的核心，是所有內(nèi)容的驅(qū)動(dòng)。將對(duì)這兩種事件模型的支持都加入標(biāo)準(zhǔn)規(guī)范之中。根據(jù)型，事件首先被目標(biāo)元素所捕捉，然后向上冒泡。取消事件冒泡當(dāng)事件冒泡時(shí)，可以通過數(shù)來終止冒泡，這個(gè)函數(shù)是對(duì)象中的方法。 事件是 JavaScript 應(yīng)用程序的核心，是所有內(nèi)容的驅(qū)動(dòng)。盡管后來W3C 對(duì)此做了標(biāo)準(zhǔn)化，但 IE 仍然堅(jiān)持使用與 W3C 不兼容的事件模型，直到 IE9 才遵循標(biāo)準(zhǔn)。有很多諸...

    Julylovin 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<