亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

addEventListener中事件函數(shù)的this指向

2bdenny / 874人閱讀

摘要：的文檔中關(guān)于該問題有更權(quán)威的解釋事件處理函數(shù)中的權(quán)威指南中文版頁關(guān)于這個問題也有說明，并且提到之前的作為函數(shù)調(diào)用其值是全局對象。這種情況和內(nèi)聯(lián)函數(shù)中的指向類似，當(dāng)被內(nèi)聯(lián)函數(shù)調(diào)用時，它的默認(rèn)指向監(jiān)聽器所在的元素。

Update： MDN的文檔中關(guān)于該問題有更權(quán)威的解釋 ?DOM事件處理函數(shù)中的 this  《權(quán)威指南》中文版455頁關(guān)于這個問題也有說明，并且提到：IE9之前的attachEvent()作為函數(shù)調(diào)用其this值是全局（window）對象。
當(dāng)時想這問題的時候沒去找文檔,書也沒看仔細(xì)啊！

使用JS原型封裝對象的時候，綁定事件我有時會這樣寫：

var obj = function() {...}

// 將某事件綁定至某對象e，但事件函數(shù)中上下文保持為obj
obj.prototype.bindEvn = function(e){
     e.addEventListener(Event,obj.method.bind(this),false)    
}


obj.prototype.method = function(){...}

這里addEventListener中this的指向我不是太清晰， 雖然一直以來都直接用bind設(shè)置this的值（毫無疑問地返回了一個綁定了obj對象的函數(shù)），但是如果沒用bind方法會是種什么情況？ 這里面的this指向是調(diào)用addEventListener方法的對象e呢還是obj（如果這樣那么我這bind白用了？）
馬上做個demo看下到底啥情況：
我是DEMO
（貌似demo設(shè)計得有點略傻？）

//定義一個可見的盒子用于綁定點擊事件
var box = document.getElementById("box");
box.x = "box"

//設(shè)置執(zhí)行函數(shù)的對象屬性
function outFunc() {
  this.x = "outFunc";
  box.addEventListener("click", func, false);
}
outFunc();

function func() {
  console.log(this.x); //輸出box 說明該this指向的是調(diào)用addEventListener的對象
}

當(dāng)用bind設(shè)置this值的時候， this才指向執(zhí)行函數(shù)

function outFunc() {
  this.x = "outFunc";//給全局對象window.x賦值（相當(dāng)于賦值全局變量）
  box.addEventListener("click", func.bind(this), false);
}
function func() {
  console.log(this.x); //輸出outFunc 使用bind設(shè)置this的值
}

其實這里面也涉及到了JS的基本概念， 也就是當(dāng)函數(shù)作為方法調(diào)用時，this指向調(diào)用該方法的對象， 當(dāng)函數(shù)作為嵌套函數(shù)調(diào)用時， this指向全局對象（非嚴(yán)格模式下）或者undefined（嚴(yán)格模式）而不是其外包函數(shù)的上下文， 如果對這個概念認(rèn)識清楚了，就可以發(fā)現(xiàn)addEventListener的中的事件函數(shù)默認(rèn)是作為調(diào)用addEventListener對象的方法，如果需要設(shè)置this的指向（比如上面的栗子中就使用bind設(shè)置this的指向為外包函數(shù)的上下文），則可以使用bind()。

這種情況和內(nèi)聯(lián)函數(shù)中的this指向類似，當(dāng)this被內(nèi)聯(lián)函數(shù)調(diào)用時，它的this默認(rèn)指向監(jiān)聽器所在的DOM元素。這里直接用MDN文檔中的栗子：

 //輸出button

在stackoverflow上也有類似問題的討論：
The value of “this” within the handler using addEventListener
關(guān)于this值的問題，要多看看MDN的文檔：
this

自己動手，豐衣足食，吃早餐去了～

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

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/86145.html

相關(guān)文章

  • IE兼容性

    摘要：方式方式方式指向節(jié)點對象輸出事件對象輸出事件對象輸出事件對象指向節(jié)點對象輸出事件對象輸出事件對象輸出事件對象指向全局對象輸出事件對象如果是方式定義的時候也可以沒有形參但是被調(diào)用的時候一定會傳遞一個事件對象如果有形參則用接收如果沒有可以在函數(shù) hello1 //方式1 hello2 //方式2 hello3 //方式3 document.ge...

    劉東 評論0 收藏0

  • 深入理解js Dom事件機制（二）——添加事件處理程序

    摘要：深入理解事件機制一事件流事件就是當(dāng)用戶或者瀏覽器自身執(zhí)行的某種動作，諸如等都是事件的名稱，那響應(yīng)個事件的函數(shù)就稱為事件處理程序事件處理函數(shù)事件句柄。 深入理解js Dom事件機制（一）——事件流 事件就是當(dāng)用戶或者瀏覽器自身執(zhí)行的某種動作，諸如 click、mouseover等都是事件的名稱，那響應(yīng)個事件的函數(shù)就稱為事件處理程序（事件處理函數(shù)、事件句柄）。 事件處理程序的名字都是以on...

    ddongjian0000 評論0 收藏0

  • 深入理解js Dom事件機制（二）——添加事件處理程序

    摘要：深入理解事件機制一事件流事件就是當(dāng)用戶或者瀏覽器自身執(zhí)行的某種動作，諸如等都是事件的名稱，那響應(yīng)個事件的函數(shù)就稱為事件處理程序事件處理函數(shù)事件句柄。 深入理解js Dom事件機制（一）——事件流 事件就是當(dāng)用戶或者瀏覽器自身執(zhí)行的某種動作，諸如 click、mouseover等都是事件的名稱，那響應(yīng)個事件的函數(shù)就稱為事件處理程序（事件處理函數(shù)、事件句柄）。 事件處理程序的名字都是以on...

    qianfeng 評論0 收藏0

  • JavaScript系列 事件

    摘要：推薦使用該方式進(jìn)行事件的注冊，可以對同一節(jié)點注冊多個事件處理函數(shù)。當(dāng)前冒泡流是被大多瀏覽器支持，因此大多賦為。阻斷事件的冒泡流或者事件捕獲流。資料推薦紅寶書阮一峰事件模型 一步，一步前進(jìn)の一步 showImg(https://segmentfault.com/img/bVbfVGO?w=830&h=328); 事件是文檔或者瀏覽器窗口中發(fā)生的一些交互瞬間。JS注冊事件處理程序來預(yù)訂事件...

    周國輝 評論0 收藏0

  • this指針使用及call(),apply()及bind()的使用

    摘要：目錄一理解指針意義二用解決指針指向問題三的使用場景與少用之處一理解指針意義讓我們先理解好指針的定義引用的是函數(shù)執(zhí)行的環(huán)境對象永遠(yuǎn)指向的是最后調(diào)用它的對象，也就是看它執(zhí)行的時候是誰調(diào)用的通俗地講，就是誰調(diào)用，就指向誰我們分類舉例舉例前先看下本 目錄 一.理解this指針意義二.用call(),apply(),bind()解決指針指向問題三.bind()的使用場景與少用之處 一.理解thi...

    iKcamp 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<