Multiple event listener in Javascript

Question

How to add multiple event listeners in the same initialization?

For example:

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

JavaScript:

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

This is working correctly however I would like to have another event listener for this input filed in the same call if that is possible, so when user clicks enter or presses the button it triggers the same event listener.

Just one note. User needs to be focused on the input field to trigger an "enter" event.

Answer 1

Just bind your function to 2 listeners, each one of the wished element:

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

where the new function test if the user pressed enter and then execute the other function :

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

Working jsFiddle : http://jsfiddle.net/cG7HW/

Answer 2

Try this:

 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');

UPDATE:

  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

I think the best way to do this is by using for loops.

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

The code above loops through every events inside an array and adds it to the button.