資訊專欄INFORMATION COLUMN
摘要：的文檔中關(guān)于該問題有更權(quán)威的解釋事件處理函數(shù)中的權(quán)威指南中文版頁關(guān)于這個(gè)問題也有說明，并且提到之前的作為函數(shù)調(diào)用其值是全局對象。這種情況和內(nèi)聯(lián)函數(shù)中的指向類似，當(dāng)被內(nèi)聯(lián)函數(shù)調(diào)用時(shí)，它的默認(rèn)指向監(jiān)聽器所在的元素。
Update： MDN的文檔中關(guān)于該問題有更權(quán)威的解釋 ?DOM事件處理函數(shù)中的 this 《權(quán)威指南》中文版455頁關(guān)于這個(gè)問題也有說明，并且提到：IE9之前的attachEvent()作為函數(shù)調(diào)用其this值是全局（window）對象。
當(dāng)時(shí)想這問題的時(shí)候沒去找文檔,書也沒看仔細(xì)??！
使用JS原型封裝對象的時(shí)候，綁定事件我有時(shí)會(huì)這樣寫：
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的值（毫無疑問地返回了一個(gè)綁定了obj對象的函數(shù)），但是如果沒用bind方法會(huì)是種什么情況？ 這里面的this指向是調(diào)用addEventListener方法的對象e呢還是obj（如果這樣那么我這bind白用了？）
馬上做個(gè)demo看下到底啥情況：
我是DEMO
（貌似demo設(shè)計(jì)得有點(diǎn)略傻？）
//定義一個(gè)可見的盒子用于綁定點(diǎn)擊事件
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值的時(shí)候， 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的值
}
其實(shí)這里面也涉及到了JS的基本概念， 也就是當(dāng)函數(shù)作為方法調(diào)用時(shí)，this指向調(diào)用該方法的對象， 當(dāng)函數(shù)作為嵌套函數(shù)調(diào)用時(shí)， this指向全局對象（非嚴(yán)格模式下）或者undefined（嚴(yán)格模式）而不是其外包函數(shù)的上下文， 如果對這個(gè)概念認(rèn)識(shí)清楚了，就可以發(fā)現(xiàn)addEventListener的中的事件函數(shù)默認(rèn)是作為調(diào)用addEventListener對象的方法，如果需要設(shè)置this的指向（比如上面的栗子中就使用bind設(shè)置this的指向?yàn)橥獍瘮?shù)的上下文），則可以使用bind()。
這種情況和內(nèi)聯(lián)函數(shù)中的this指向類似，當(dāng)this被內(nèi)聯(lián)函數(shù)調(diào)用時(shí)，它的this默認(rèn)指向監(jiān)聽器所在的DOM元素。這里直接用MDN文檔中的栗子：
//輸出button
在stackoverflow上也有類似問題的討論：
The value of “this” within the handler using addEventListener
關(guān)于this值的問題，要多看看MDN的文檔：
this
自己動(dòng)手，豐衣足食，吃早餐去了～
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/86145.html
摘要：深入理解事件機(jī)制一事件流事件就是當(dāng)用戶或者瀏覽器自身執(zhí)行的某種動(dòng)作，諸如等都是事件的名稱，那響應(yīng)個(gè)事件的函數(shù)就稱為事件處理程序事件處理函數(shù)事件句柄。 深入理解js Dom事件機(jī)制（一）——事件流 事件就是當(dāng)用戶或者瀏覽器自身執(zhí)行的某種動(dòng)作，諸如 click、mouseover等都是事件的名稱，那響應(yīng)個(gè)事件的函數(shù)就稱為事件處理程序（事件處理函數(shù)、事件句柄）。 事件處理程序的名字都是以on...
摘要：深入理解事件機(jī)制一事件流事件就是當(dāng)用戶或者瀏覽器自身執(zhí)行的某種動(dòng)作，諸如等都是事件的名稱，那響應(yīng)個(gè)事件的函數(shù)就稱為事件處理程序事件處理函數(shù)事件句柄。 深入理解js Dom事件機(jī)制（一）——事件流 事件就是當(dāng)用戶或者瀏覽器自身執(zhí)行的某種動(dòng)作，諸如 click、mouseover等都是事件的名稱，那響應(yīng)個(gè)事件的函數(shù)就稱為事件處理程序（事件處理函數(shù)、事件句柄）。 事件處理程序的名字都是以on...
摘要：推薦使用該方式進(jìn)行事件的注冊，可以對同一節(jié)點(diǎn)注冊多個(gè)事件處理函數(shù)。當(dāng)前冒泡流是被大多瀏覽器支持，因此大多賦為。阻斷事件的冒泡流或者事件捕獲流。資料推薦紅寶書阮一峰事件模型 一步，一步前進(jìn)の一步 showImg(https://segmentfault.com/img/bVbfVGO?w=830&h=328); 事件是文檔或者瀏覽器窗口中發(fā)生的一些交互瞬間。JS注冊事件處理程序來預(yù)訂事件...
摘要：目錄一理解指針意義二用解決指針指向問題三的使用場景與少用之處一理解指針意義讓我們先理解好指針的定義引用的是函數(shù)執(zhí)行的環(huán)境對象永遠(yuǎn)指向的是最后調(diào)用它的對象，也就是看它執(zhí)行的時(shí)候是誰調(diào)用的通俗地講，就是誰調(diào)用，就指向誰我們分類舉例舉例前先看下本 目錄 一.理解this指針意義二.用call(),apply(),bind()解決指針指向問題三.bind()的使用場景與少用之處 一.理解thi...
閱讀 2428·2021-11-25 09:43
閱讀 1259·2021-11-24 09:39
閱讀 760·2021-11-23 09:51
閱讀 2396·2021-09-07 10:18
閱讀 1888·2021-09-01 11:39
閱讀 2790·2019-08-30 15:52
閱讀 2604·2019-08-30 14:21
閱讀 2869·2019-08-29 16:57
