1

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

例如：

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

JavaScript：

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

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

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

4

3 回答 3

2

只需将您的函数绑定到 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/

于 2013-06-13T09:04:40.683 回答
0

尝试这个：

 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");
      }
  }

工作小提琴

于 2013-06-13T08:55:10.437 回答
0

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

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

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

于 2021-04-02T05:58:09.237 回答