事件綁定中的this（包含addEventListener）

HTML事件綁定

能夠直接經過 html 事件屬性來綁定 js 執行代碼，屬性由 "on" 後面跟着事件名組成。onclick、onchange、onload、onmouseover等。注意這些屬性名是區分大小寫的，全部都是小寫，即便事件類型是由多個詞組成。

定義的事件處理程序能夠包含要執行的具體動做，也能夠調用在頁面其餘地方定義的腳本。這段代碼應該是事件處理程序函數的主體，而非完整的函數聲明。也就是說，這段代碼不該該用大括號包圍且使用function關鍵字做爲前綴。

<button onclick="console.log(this)">click</button>
// 這裏的 this 是button元素

--------

<button onclick="say()">click</button>

function say() {
    console.log(this)
}
// 這裏的 this 是window
// html 事件綁定的函數在執行時，有權訪問全局做用域中的任何代碼。也即咱們能夠在 html 中能夠直接調用 script 標籤中定義的函數。

--------

<button onclick="obj.say()">click</button>

let obj = {
	say: function() {
		console.log(this)
	}
}
// 這裏的 this 是obj
複製代碼

總結：當綁定的函數是一個直接執行的語句（第一種），而且顯示的傳入一個this時，此時 this 指向該調用元素，若是是其餘狀況，根據 this 的定義肯定便可。

缺點：

• 不利於表現層和邏輯層代碼分離
• 用戶可能會在HTML元素一出如今頁面上就觸發相應的事件，但當時的事件處理程序有可能尚不具有執行條件。之前面的例子來講明，假設 showMessage() 函數是在按鈕下方、頁面的最底部定義的。若是用戶在頁面解析 showMessage() 函數以前就單擊了按鈕，就會引起錯誤。

DOM元素事件綁定

給 DOM 元素綁定事件至關因而從 attribute 改爲了 property，瀏覽器的兼容性異常優異，方法就是將這種屬性的值設置爲一個函數。

<button id="btn">click</button>

let oBtn = document.getElementById('btn');
oBtn.onclick = say; // 這裏的 this 是button元素
function say() {
    console.log(this)
}

--------

let obj = {
	say: function() {
		console.log(this)
	}
}
oBtn.onclick = obj.say;
// 這裏的 this 也是button元素

oBtn.onclick = null;  
// 刪除事件處理程序
// html 上綁定的事件也能夠經過這種方式來解綁
複製代碼

總結：綁定的事件處理程序被附值給了元素的方法，也即 this 指向該目標元素。

缺點：一個元素只能綁定一個處理函數

addEventListener 綁定函數

這裏不說使用方法了，很簡單

<button id="btn">click</button>

let oBtn = document.getElementById('btn');
oBtn.addEventListener('click', function(){
	console.log(this) // 這裏的 this 是button元素
}, false)

--------

oBtn.addEventListener('click', say, false)
function say() {
    console.log(this) // 這裏的 this 也是button元素
}

--------

let obj = {
	say: function() {
		console.log(this)
	}
}
oBtn.addEventListener('click', obj.say, false)
// 這裏的 this 也是button元素
複製代碼

總結：addEventListener 參數中回調函數的this指向目標元素。

經常使用的解決辦法：

oBtn.addEventListener('click', obj.say.bind(obj), false);
// 經過使用bind，爲回調函數綁定指定的 this
複製代碼