Question

我使用eventlisteners和javascript遇到了问题（虽然onclick似乎具有相同的效果）。

我在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);

现在我的初始按钮将尝试执行＆＃39; searchFriendAsync（）＆＃39;同样。

我对javascript很缺乏经验，所以我确定它是我缺少的基本内容。然而谷歌上的搜索结果找到了关于将一个事件添加到多个按钮等的答案，这是......与我想要的相反。我需要具有不同事件的多个按钮 - 一些按钮是使用javascript生成的。（注意，当我将另一个eventlistener添加到第三个按钮时，第一个和第二个按钮都会搞乱）。

Answer 1

这里有一个问题：

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

我认为searchFriendsAsync是您在代码中定义的函数，您希望在点击addbutton时调用该函数，是吗？

这不是这段代码的作用。它立即调用searchFriendsAsync （因为括号）并将其返回值传递给addEventListener，这没有任何好处。只需删除括号即可传递对函数本身的引用，而不是调用它：

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

Answer 2

在JavaScript中，searchFriendsAsync和searchFriendsAsync()之间存在差异。第一个是给出必须执行的函数的引用。第二个实际上是调用函数。

onclick属性需要JavaScript代码。因此，您想要执行该功能。因此需要括号。但是，当您在JavaScript中指定按钮时，您只想告诉要执行的函数的名称/引用。没有括号。 addEventListener函数将确保执行引用。因此，您的代码就像这样

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

Javascript eventlisteners覆盖其他按钮？

2 个答案: