JavaScript的eventlistener覆蓋其他按鈕？

我遇到了一個問題，使用eventlisteners和JavaScript（雖然onclick似乎有相同的效果）。JavaScript的eventlistener覆蓋其他按鈕？

我在HTML

<input id="srch" type="button" value="Zoek gebruikers!" onclick="searchButton()">

有這樣的現在，這個最初工作得很好，並執行預期的JavaScript代碼。但是，當我添加另一個JavaScript函數

var addbutton = document.createElement("input"); 
addbutton.setAttribute("id","openAddMenu"); 
addbutton.type = "button"; 
addbutton.value = "search"; 
addbutton.innerHTML = "Zoek"; 
addbutton.addEventListener('click',searchFriendsAsync(),false);

現在我的初始按鈕將嘗試執行'searchFriendAsync（）'以及。

我對JavaScript並不熟悉，所以我確信這是我最想要的東西。然而谷歌的搜索結果找到答案，關於添加一個事件到多個按鈕等，這是關於我想要的相反。我需要多個不同事件的按鈕 - 一些按鈕是使用javascript生成的。（注意，當我添加另一個eventlistener到第三個按鈕時，第一個和第二個按鈕都會搞砸）。

來源

2015-07-11 Insanity

的一個問題是在這裏：

addbutton.addEventListener('click', searchFriendsAsync(), false);

我認爲searchFriendsAsync是在你的代碼，你想點擊addbutton時調用定義的函數，是這樣嗎？

這不是這個代碼的作用。它呼叫searchFriendsAsync立即（由於括號）並將其返回值傳遞給addEventListener，這沒有任何好處。簡單地去掉括號傳遞給函數自身的引用而不是調用它：

addbutton.addEventListener('click', searchFriendsAsync, false);

來源

2015-07-11 02:48:13

謝謝，現在的作品。不幸的是，我沒有足夠的「代表」來提高您的答案，但我會盡可能地接受它！ :-) – Insanity

在JavaScript中，有searchFriendsAsync和searchFriendsAsync()之間的差異。第一個只是給出了必須執行的函數的引用。第二個實際上是調用該函數。

onclick屬性需要JavaScript代碼。因此你想執行該功能。因此需要括號。但是，當您在JavaScript中指定按鈕時，您只想告訴要執行的函數的名稱/引用I.e.沒有括號。 addEventListener函數將確保引用被執行。因此，你的代碼會是這樣

addbutton.addEventListener('click', searchFriendsAsync, false);

來源

2015-07-11 02:52:25

JavaScript的eventlistener覆蓋其他按鈕？

回答

相關問題