Question

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

例如：

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

JavaScript的：

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

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

只需一个注释。用户需要专注于输入字段以触发“输入”事件。

Answer 1

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

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

其中新功能测试用户是否按下Enter然后执行其他功能：

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

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

Answer 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

Answer 3

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

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

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

javascript中的多个事件监听器

3 个答案: