Using jQuery $(this) with ES6 Arrow Functions (lexical this binding)

• jQuery的事件觸發大多使用on()來寫觸發後的操作內容，而如果要取得觸發事件本身的元素，大多會使用this撈取，在ES5中大多的寫法會變成下面這樣

$(document).on("change", "input", function(){
	$(this).val(); //輸出觸發事件元素的值
}

• 但如果將上面改寫成ES6的箭頭函式，如下面這樣，就會在this的地方報錯

$(document).on("change", "input", () => {
	$(this).val(); //輸出觸發事件元素的值<--------這裡會報錯
}

• 這是因為在ES6的箭頭函式語法中，如果要撈取jQuery內觸發的元素，則必須傳入一個變數值，並且用.target來正確取得該元素，通常這個變數會被宣告成e，也因此ES6的jQuery會改寫成下面這樣

<aside> 💡 一般而言，箭頭函式本體沒有自己的 this ，也因此函式內如果使用this，則會指向上一層

</aside>

$(document).on("change", "input", (e)=>{
	$(e.target).val(); //輸出觸發事件元素的值<--------可以正常使用了
}

• 而jQuery之所以提供.target或是.currentTarget的原因是，就算在ES5時期，jQuery也無法總是在回呼函式中使用this來取得元素，例如使用bind將該元素綁定到其他地方時

<aside> 💡 留意target和currentTarget的差異 target是觸發事件真正啟動事件的元素本體 currentTarget則是觸發事件所指定監聽的元素

</aside>

• 例如下面這樣的按鈕，按鈕裡面包覆著標籤i，如果設定監聽

<button type="button" id="XD" class="btn btn-primary">
	<i class="fas fa-share mr-2"></i>發布
</button>

• 如果設定監聽如下面這樣，則當點選i時，e.target會回傳i這個元素，e.currentTarget則會回傳事件真正監聽的id為XD的button這個元素

$(document).on('click', 'XD', (e) => {
	console.log($(e.target));
	console.log($(e.currentTarget));
}