TA貢獻1946條經驗 獲得超3個贊
我創建這個示例是為了幫助演示這些差異。這主要取決于您訪問this元素的方式。使用箭頭函數，您必須提供 ，event以便可以使用 訪問該元素e.target。使用標準函數時，您不需要事件，而是可以依賴于this引用綁定到EventListener.
true如果元素匹配，該示例將打印。使用箭頭函數，您會注意到結果是false因為this上下文中不存在。標準函數將返回，true因為this確實存在于上下文中。
箭頭功能完全相同。我只是展示這一點e并(e)代表同一件事。查看箭頭函數的文檔以了解更多信息。
document.getElementById("btn0").addEventListener('click', e => {
console.log(e.target==this);
});
document.getElementById("btn1").addEventListener('click', (e) => {
console.log(e.target==this);
});
document.getElementById("btn2").addEventListener('click', function() {
// event is not passed
console.log(this==this);
});
document.getElementById("btn3").addEventListener('click', function(e) {
console.log(e.target==this);
});
<button id="btn0" type="button">Arrow Function 1</button>
<button id="btn1" type="button">Arrow Function 2</button>
<button id="btn2" type="button">Function 1</button>
<button id="btn3" type="button">Function 2</button>
TA貢獻1712條經驗 獲得超3個贊
在你的第一個例子中
document.addEventListener('submit', e => {
}您將事件傳遞給以箭頭函數的形式處理該事件的函數。這可以更明確地寫成這樣。
document.addEventListener('submit', (e) => {
}如果要傳遞多個參數，則必須按照上面所示的方式使用括號。
箭頭函數將始終在全局 this 的上下文中執行，而不是在調用它的范圍內執行。
另一方面你的第二個例子
document.addEventListener('submit', function() {
}正在使用一個經典函數。這將始終在調用它的范圍內執行。
當您需要該信息（例如：到底單擊了什么以及對單擊事件的該元素的引用）或阻止默認行為時，您傾向于將事件傳遞給處理程序。您顯示的示例都是提交事件。默認情況下提交會重新加載頁面。這通常不是一個理想的行為，所以你傾向于這樣做
submitEventHandler(event){
event.preventDefault();
}舉報