Javascript 事件监听器覆盖其他按钮？答案

【问题标题】：Javascript eventlisteners override other buttons?Javascript 事件监听器覆盖其他按钮？
【发布时间】：2015-07-11 02:45:05
【问题描述】：

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

现在我的初始按钮也将尝试执行“searchFriendAsync()”。

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

【问题讨论】：

标签： javascript

【解决方案1】：

这里有个问题：

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

我假设searchFriendsAsync 是您的代码中定义的一个函数，您希望在单击addbutton 时调用它，对吗？

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

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

【讨论】：

谢谢，现在可以了。不幸的是，我没有足够的“代表”来支持你的答案，但我会尽可能接受！ :-)

【解决方案2】：

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

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

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

【讨论】：