[分享] A15, 如何往事件監聽器裡傳參數 & 何謂監聽器事件「event」
寫作業碰到問題,
用的關鍵字方向不對, 查好久查不到解,
正想說放棄掙扎來問助教時, 腦中閃過另一個關鍵字時, 終於給我查到了!!
在這邊分享一下。
一組加入事件監聽器的code如下:
HTMLElement.addEventListener('click', function () {
console.log(event.target)
})
如果有兩三組以上相同的監聽事件, 想要加在不同的元件上時,
因為裡面匿名function的內容是幾乎一樣的, 自然會想把function單獨拉出來傳入參數。
function foo(param1) {
if ( event.target.matches('css選擇器') ) { // 報錯, typeError!!
console.log(param1)
}
}HTMLElement.addEventListener('click', foo(param1))
但是一改成上面那樣, event.target那邊就會報錯
TypeError: Cannot read property 'target' of undefined
我最開始以為問題是出在 .target 上面。
但看一看發現, 是出在event上頭。
如果用console.log檢測, 可以發現event是空的
function foo(param1) {
console.log(event) // undefined
if ( event.target.matches('css選擇器') ) { // 報錯, typeError!!
console.log(param1)
}
}HTMLElement.addEventListener('click', foo(param1))
這個很尷尬, 稍微研究之後發現,
VScode之類的編輯器, 會把event變色, 看到它顏色不一樣,
我們當然會把event理解成是一個指令之類的。
但如果直接在VScode的debugger call它,
它會出現錯誤, 未定義變數。
如果在Chrome的console裡面call, 則會出現 undefined。
也就是說, event 這個東西, 它應該是一個DOM API。
預設是一個尚未給值的空變數。
那為什麼在寫入事件監聽器時, event.target可以工作呢?
這就要來說說 addEventListener() 到底是怎麼工作的。
根據MDN上, 關於 addEventListener() 的工作方式說明,
它會將輸入的event作為參數, 傳至後方的函式中。
所以是類似這樣的概念
addEventListener('event', function (event) { code })
第一個參數給上了一個「事件」之後,
它會把這個「事件」存放到上面提到的空變數event裡面,
然後傳給第二個參數, 讓裡面的function調用event。
因此在後面的function上頭, 使用event.target是可以工作的。
也因為這樣, 才會規定要使用命名函式的話, 不能加上( ), 不然JS會錯亂。
function foo() {
console.log('hi')
}HTMLElement.addEventListener('click', foo) // foo不能加()
那如果我用於事件監聽器的function, 想要傳入自定義參數時, 可以怎麼做??
其實只要稍微逆轉一下思考就行了……
function foo(param) {
console.log('param')
}// NG
HTMLElement.addEventListener('click', foo(param))// OK
HTMLElement.addEventListener('click', function() {
foo(param)
})
參考,
Event — Web APIs | MDN
EventTarget.addEventListener() — Web APIs | MDN
晕了 addEventListener怎么往里面传参??-CSDN论坛