CODEWITHSUNDEEP
javascriptevents
dust
dust

Reputation: 131

How to find out which event listener has fired

I have a bunch of input fields with event listeners attached using a for loop and class names. Is there a way I can get the id of the input field that fired? I've got about 40 input fields and I want to take the id from the input that triggered and pass it into the function as the variable.

HTML -

<input type="text" id="t11Text1" class="text1 input">
<input type="text2" id="t11Text2" class="text2 input">
<input type="text" id="t12Text1" class="text1 input">
<input type="text2" id="t12Text2" class="text2 input">

JS -

var onChange = document.querySelectorAll('.input');
var onChangeSelect = document.querySelectorAll('.select');

for (var i = 0; i < onChange.length; i++) {
        onChange[i].addEventListener("input", function() {
        myFunction();
    });
}

Upvotes: 3

Views: 724

Answers (3)

Tiberiu C.
Tiberiu C.

Reputation: 3513

In the event listener callback function you receive an event object that is populated with the element that triggered the event, on event.target

Look at the example bellow : 

var inputs = document.querySelectorAll('[id*=input]'); 
// in this case works also with `document.getElementsByTagName('input')`
var selects = document.querySelectorAll('[id*=select]'); 

// the definition of the event listener
var inputEventListener = function(event) {
  console.log(event.target.id);
  //event.target.style.background = '#FDFDFD';
  //event.target - is the actual element;
}

for (var i = 0, length = inputs.length; i < length; i++) {
  // here is added the event listener for the input elements
  inputs[i].addEventListener('input', inputEventListener);
}


for (var i = 0, length = selects.length; i < length; i++) {
  // here is added the event listener for the select elements
  selects[i].addEventListener('change', inputEventListener);
}
<!-- Ignore this, I'm too lazy to write 100 inputs -->
<!-- Adding 100 inputs to the page so we can run some test on them -->
<script>
  for (var i = 0; i < 100; i++) {
    document.write('<label for="input' + i + '">Input ' + i + '</label>&nbsp;<input id="input' + i + '"/><select id="select' + i + '"><option>1</option><option>2</option><option>3</option></select><br />');
  }
</script>

Upvotes: 1

laruiss
laruiss

Reputation: 3816

Though @Josh Crozier's answer is OK and answers precisely the question, I would avoid setting so many listeners and do something like this:

HTML:

<form class="myformclass">
    <input type="text" id="t11Text1" class="text1 input">
    <input type="text2" id="t11Text2" class="text2 input">
    <input type="text" id="t12Text1" class="text1 input">
    <input type="text2" id="t12Text2" class="text2 input">
    <select class="input">
       <option value="0">0</option>
       <option value="1">1</option>
    </select>
</form>

JS:

var myForm = document.querySelector('.myformclass');

myForm.addEventListener("input", function getInput(e) {
    var input = e.target;
    if (input.classList.contains("input")) {
       doWhateverWithTheInput(input);
    }
});

function doWhateverWithTheInput(elt) {
    console.log(elt);
}

Upvotes: 2

Josh Crozier
Josh Crozier

Reputation: 240868

You can access the event object within the anonymous function, and event.target.id will be the id of the element.

var onChange = document.querySelectorAll('.input');
var onChangeSelect = document.querySelectorAll('.select');

for (var i=0; i < onChange.length; i++){
   onChange[i].addEventListener("input", function (event) {
       // event.target.id
       myFunction();
   });
}

Upvotes: 9

Related Questions