javascript addEventListener 執行函式相關問題

javascript js

dc88 2019-07-31 10:19:13 ‧ 1471 瀏覽

分享至

在製作針對輸入欄位資訊進行簡略的格式驗證時發現一些讓我很疑惑的點
上來向各位大神請教

正常執行的狀態
https://codepen.io/UHU/pen/bXqKvY

錯誤的狀態
(load 完就直接執行 checkFormat(mobileNumberVal, emailAddressVal) 這個函式而不是在點擊按鈕後才執行)
https://codepen.io/UHU/pen/NQpymz

疑惑的部分：

為什麼 addEventListener('click',functionName) 跟 addEventListener('click',functionName()) 產生的結果不一樣？
(我知道後者應該是錯誤寫法但好奇為何不會顯示錯誤而是在讀取後就直接執行)
那如果我想要綁定帶有參數的 function 在 addEventListener 上，要怎麼寫才正確呢？

ccutmis iT邦高手 2 級 ‧ 2019-07-31 10:32:50 檢舉

Re 2. :
https://stackoverflow.com/questions/256754/how-to-pass-arguments-to-addeventlistener-listener-function

listennn08 iT邦高手 5 級 ‧ 2019-07-31 10:56:09 檢舉

https://ithelp.ithome.com.tw/articles/10191970

dc88 iT邦新手 4 級 ‧ 2019-07-31 12:08:42 檢舉

謝謝兩位大大提供的建議！

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

2 個回答

dragonH

iT邦超人 5 級 ‧ 2019-07-31 11:07:46

最佳解答

1 .

因為

addEventListener('click', functionName())

等同於直接呼叫 functionName()

然後你的 functionName() 沒有 return 值

所以在 EventListener 那會得到 undefined

最後應該會變成

addEventListener('click', undefined)

2 .

可以用

checkFormatBtn.addEventListener('click', () => checkFormat(mobileNumber,emailAddress));

可是你的 mobileNumber, emailAddress

在最一開始就取值了

我想就算傳進去

應該也是空白

我會建議在 function 內取值就好

codepen

回應 6
分享
檢舉

看更多先前的回應...收起先前的回應...

dc88 iT邦新手 4 級 ‧ 2019-07-31 12:15:54 檢舉

題外話想請教大大回覆中codepen的片段

checkFormatBtn.addEventListener(
  "click",
   checkFormat
);

console.log(checkFormatBtn.Event)

在checkFormatBtn 上已綁定 checkFormat 這個 function
但為什麼 console.log(checkFormatBtn.Event) 仍會顯示undefined 呢？

dragonH iT邦超人 5 級 ‧ 2019-07-31 12:20:04 檢舉

因為...

那個是我測試忘記拿掉的

那個底下本來就沒有 Event

dc88 iT邦新手 4 級 ‧ 2019-07-31 14:32:58 檢舉

原來是這樣
那可以請教大大

console.log(foo.Event)

.Event 這個用法要如何使用呢？(或是其實並沒有這樣的用法ＸＤ)
我在 mdn 上只查到這個
https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/events/Event
但找不到搭配 console.log 使用的例子

dragonH iT邦超人 5 級 ‧ 2019-07-31 14:41:17 檢舉

對阿

沒有這用法XD

我只是想試試這樣有沒有可能拿到已註冊的 event 之類的

真要看的話

可以用瀏覽器 f12 console 看

這個是我上面的 codepen 的結果

如果改成

checkFormatBtn.addEventListener(
  "click",
   checkFormat()
);

右下角則會顯示空白

我想是因為 return undefined

也就等於沒綁定事件

dc88 iT邦新手 4 級 ‧ 2019-07-31 18:02:05 檢舉

原來如此！
謝謝大大精闢的解說
總算是跟 addEventListener 混熟一點了

dragonH iT邦超人 5 級 ‧ 2019-07-31 19:44:24 檢舉

登入發表回應

froce

iT邦大師 1 級 ‧ 2019-07-31 17:21:17

function Test(){
    return "test"
}

let a = Test
let b = Test()
console.log(typeof(a))  // function
console.log(typeof(b))  // string

1.因為 Test 叫 function，Test() 叫"test"這個字串...沒加刮號叫函式本身，加了叫函式執行結果。
2.閉包

回應 1
分享
檢舉

dc88 iT邦新手 4 級 ‧ 2019-07-31 18:05:55 檢舉

謝謝大大的回覆跟關鍵字
我再針對這部份找時間看一下相關資料

登入發表回應

我要發表回答

立即登入回答

參賽組數

1064 組

團體組數

40 組

累計文章數

22203 篇

完賽人數

602 人

15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js

IT邦幫忙