[英]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. 我有一堆输入字段,其中使用for循环和类名称附加事件侦听器。 Is there a way I can get the id of the input field that fired?
有没有办法可以获取触发的输入字段的ID? 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.
我有大约40个输入字段,我想从触发的输入中获取id并将其作为变量传递给函数。
HTML - 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 - 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();
});
}
You can access the event
object within the anonymous function, and event.target.id
will be the id
of the element. 您可以在匿名函数中访问
event
对象 , event.target.id
将是元素的id
。
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();
});
}
Though @Josh Crozier's answer is OK and answers precisely the question, I would avoid setting so many listeners and do something like this: 虽然@Josh Crozier的回答是正确的,并且恰好回答了这个问题,但我会避免设置这么多听众并做这样的事情:
HTML: 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: 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);
}
In the event listener callback function you receive an event object that is populated with the element that triggered the event, on event.target
在事件侦听器回调函数中,您将
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> <input id="input' + i + '"/><select id="select' + i + '"><option>1</option><option>2</option><option>3</option></select><br />'); } </script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.