addEventListener中事件函數的this指向

2bdenny 發布于2019-08-21 10:46 / 685人閱讀

摘要：的文檔中關于該問題有更權威的解釋事件處理函數中的權威指南中文版頁關于這個問題也有說明，并且提到之前的作為函數調用其值是全局對象。這種情況和內聯函數中的指向類似，當被內聯函數調用時，它的默認指向監聽器所在的元素。

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

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

var obj = function() {...}

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


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

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

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

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

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

當用bind設置this值的時候， this才指向執行函數

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

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

這種情況和內聯函數中的this指向類似，當this被內聯函數調用時，它的this默認指向監聽器所在的DOM元素。這里直接用MDN文檔中的栗子：

 //輸出button

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

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

云服務器 GPU云服務器 this的指向改變this指向指向函數的指針 java中this

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

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

IE兼容性

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

劉東 2019-08-20 14:45 評論0 收藏0
深入理解js Dom事件機制（二）——添加事件處理程序

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

ddongjian0000 2019-08-21 17:39 評論0 收藏0
深入理解js Dom事件機制（二）——添加事件處理程序

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

qianfeng 2019-08-01 18:00 評論0 收藏0
JavaScript系列事件

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

周國輝 2019-08-23 11:29 評論0 收藏0
this指針使用及call(),apply()及bind()的使用

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

iKcamp 2019-08-26 12:21 評論0 收藏0