Javascript中的多个事件监听器答案

【问题标题】：Multiple event listener in JavascriptJavascript中的多个事件监听器
【发布时间】：2021-04-02 16:23:47
【问题描述】：

如何在同一个初始化中添加多个事件监听器？

例如：

<input type="text" id="text">
<button id="button_click">Search</button>

JavaScript：

var myElement = document.getElementById('button_click');
myElement.addEventListener('click', myFunc());

这工作正常，但是如果可能的话，我希望在同一个调用中为此输入文件设置另一个事件侦听器，因此当用户单击 Enter 或按下按钮时，它会触发相同的事件侦听器。

只有一个音符。用户需要专注于输入字段才能触发“输入”事件。

【问题讨论】：

addEventListener 的签名是 ('click', myFunc)

标签： javascript dom-events

【解决方案1】：

只需将您的函数绑定到 2 个侦听器，每个侦听器都是希望的元素：

document.getElementById('button_click').addEventListener('click', myFunc);
document.getElementById('text').addEventListener('keyup', keyupFunc);

新功能测试用户是否按下回车然后执行另一个功能：

function keyupFunc(evt) {
    if(evt.keyCode === 13) // keycode for return
        myFunc();
}

工作 jsFiddle：http://jsfiddle.net/cG7HW/

【讨论】：

这个keyCode没有被触发......当我把alert（）放在keyupFunc的顶部时，警报被触发......所以基本上它在函数内部但没有传递这个if语句..有什么想法吗？
知道了！问题出在===，当我这样做时== 一切正常
@user123_456 ：是的，抱歉，我最初认为keyCode 是一个字符串，但它是一个数字，所以evt.keyCode === 13 应该可以工作。但是您可以使用== 它删除了对类型的检查...

【解决方案2】：

试试这个：

 function addMultipleEvents(elements, events){
      var tokens = events.split(" ");
      if(tokens.length == elements.length){
          for(var i = 0; i< tokens.length; i++){
              elements[i].addEventListener(tokens[i], (e.which == 13 || e.which == 48)?myFunc:); //not myFunc()
          }
      }
 }

 var textObj = document.getElementById("textId");
 var btnObj = document.getElementById("btnId");
 addMultipleEvents([textObj,btnObj], 'click keyup');

更新：

  function addMultipleEvents(elements, events) {
      var tokens = events.split(" ");
      if (tokens.length == elements.length) {
          for (var i = 0; i < tokens.length; i++) {
              elements[i].addEventListener(tokens[i], myFunc); //not myFunc()
          }
      }
  }

  var textObj = document.getElementById("textId");
  var btnObj = document.getElementById("btnId");
  addMultipleEvents([btnObj, textObj], 'click keyup');

  function myFunc(e) {
      if (e.which == 13 || e.which == 1) {
          alert("hello");
      }
  }

Working Fiddle

【讨论】：

我不确定是否正确理解了这个问题，但我猜 OP 的意思是应该在 input 元素上触发 enter 事件，就像将触发 click 事件一样由button 元素...
@SamuelCaillerie 我需要你所说的
向按钮添加keyup 事件似乎有点奇怪，不是吗？我认为 2 个处理程序的解耦（但调用单个函数）更好......
@SamuelCaillerie 我没有将keyup 事件添加到按钮。我将事件并行添加到对象数组中。 OP 正在寻求调用相同的函数。所以，我做到了。 :)。我的意思是将if 条件保留在myFunc 中，而不是将其排除在外。总的来说，它看起来很奇怪，但确实有效。 ")

【解决方案3】：

我认为最好的方法是使用 for 循环。

const events = ["click", "mouseover"]
for (i in events) {
   document.getElementById("button_click").addEventListener(events[i], () => myFunc())
}

上面的代码循环遍历数组中的每个事件并将其添加到按钮中。

【讨论】：