How to find out which event listener has started
I have a bunch of input fields with event listeners attached using for and class names. Is there a way to get the ID of the input field that was run? I have about 40 input fields and I want to take the ID from the input I entered and pass it to the function as a 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();
});
}
source to share
You can access the event
object in an anonymous function as there event.target.id
will be an id
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();
});
}
source to share
While @ Josh Crozier's answer is fine and answers exactly this question, I would avoid setting so many listeners and doing 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);
}
source to share
In the event listener callback function, you get an event object that is populated with the element that raised the event, on event.target
Take a look at the example below:
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> <input id="input' + i + '"/><select id="select' + i + '"><option>1</option><option>2</option><option>3</option></select><br />');
}
</script>
source to share