iT邦幫忙

1

javascript addEventListener 執行函式相關問題

dc88 2019-07-31 10:19:131350 瀏覽

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

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

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

疑惑的部分:

  1. 為什麼 addEventListener('click',functionName) 跟 addEventListener('click',functionName()) 產生的結果不一樣?
    (我知道後者應該是錯誤寫法 但好奇為何不會顯示錯誤 而是在讀取後就直接執行)
  2. 那如果我想要綁定帶有參數的 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
https://ithelp.ithome.com.tw/articles/10191970
dc88 iT邦新手 4 級 ‧ 2019-07-31 12:08:42 檢舉
謝謝兩位大大提供的建議!
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 個回答

3
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

看更多先前的回應...收起先前的回應...
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 /images/emoticon/emoticon01.gif

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

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

console.log(foo.Event)

.Event 這個用法要如何使用呢?(或是其實並沒有這樣的用法XD)
我在 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 之類的 /images/emoticon/emoticon01.gif

真要看的話

可以用 瀏覽器 f12 console 看

這個是我上面的 codepen 的結果
https://ithelp.ithome.com.tw/upload/images/20190731/20117259AQo7RgukeT.png

如果改成

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

右下角則會顯示空白

我想是因為 return undefined

也就等於沒綁定事件

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

原來如此!
謝謝大大精闢的解說
總算是跟 addEventListener 混熟一點了/images/emoticon/emoticon76.gif

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

/images/emoticon/emoticon12.gif

1
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.閉包

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

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

我要發表回答

立即登入回答