current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

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.

share|improve this question
    
the signature for addEventListener is ('click', myFunc) –  Neil Jun 13 '13 at 8:55
add comment

2 Answers

up vote 1 down vote accepted

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/

share|improve this answer
    
This keyCode is not being triggered...when I put alert() inside keyupFunc at the top alert is triggered...so basically it is going inside the function but not passing this if statement..any idea? –  user123_456 Jun 13 '13 at 9:19
    
got it! problem was in === and when I did == everything was ok –  user123_456 Jun 13 '13 at 9:24
    
@user123_456 : yes sorry, I initially thought keyCode was a string, but it was a number so evt.keyCode === 13should work. But you can use == it removes the check over the type... –  Samuel Caillerie Jun 13 '13 at 12:40
add comment
up vote 0 down vote

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

share|improve this answer
    
I am not sure to correctly understand the question, but I guess that the OP means that the enter event should be fired on the input element as though the click event will be fired by the button element... –  Samuel Caillerie Jun 13 '13 at 8:57
    
@SamuelCaillerie I need exactly what you said –  user123_456 Jun 13 '13 at 9:00
    
@SamuelCaillerie yup I misunderstood. updating.. –  Mr_Green Jun 13 '13 at 9:01
    
@SamuelCaillerie Updated. –  Mr_Green Jun 13 '13 at 9:22
    
@user123_456 I updated my post. check once. –  Mr_Green Jun 13 '13 at 9:23
show 2 more comments

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.