I need to have a listener for the event keypress of all inputs of my application, wanted to know the most correct way and performative to do this, it would be a behavior similar to $('input').on('keypress') of jQuery but I wanted to do in javascript pure.
I tried some alternatives as this link: Add event to multiple elements without being inside a for loop but it's not rolling.
Follow the solution with comments.
Add the code to the end of your HTML page. It is a good practice to add the code or the link to .js at the bottom of the page when it does not have to be executed before the content is rendered.
Read here , will help you understand what I wrote above.
//É importante que o seu código seja executada somente após a renderização de todos os inputs.
//Caso contrário, o script irá fazer referência a um elemento que
//não foi renderizado, por tanto não existe no momento.
//A técnica abaixo chama-se "self executing", ou seja
//automaticamente será executado o código.
(function() {
//Array com todos os elementos input.
//Cada indice do array "inputs" representa contém um objecto input
inputs = document.getElementsByTagName('input');
//É atribuído o evento "keypress" a cada objecto input
//Definimos também qual função será executa, no exemplo dei o nome de "minhaFuncao"
for (index = 0; index < inputs.length; ++index)
inputs[index].addEventListener("keypress", minhaFuncao);
})();
function minhaFuncao(event) {
console.log(event.target.id);
}
You could do this as follows:
/**
*
* @param el Object element a ser adicionado o evento
* @param func Function função a ser adicionada
*/
function addKeypress(el, func) {
if (el.addEventListener) {
el.addEventListener('keypress', func, false);
} else if (el.attachEvent) {//Internet Explorer antigos
el.attachEvent('onkeypress', func);
}
}
function yourFunc() {
alert('Teste');
}
(function(d) {
var inputs = d.getElementsByTagName('input');
for (var input in inputs) {
addKeypress(inputs[input], yourFunc);
}
})(document);input {
diplay: block;
width: 100%;
}<label for="txt_input1">Input 1:<input type="text" id="txt_input1" nome="txt_input1"></label>
<label for="txt_input2">Input 2:<input type="text" id="txt_input2" nome="txt_input2"></label>
<label for="txt_input3">Input 3:<input type="text" id="txt_input3" nome="txt_input3"></label>
<label for="txt_input4">Input 4:<input type="text" id="txt_input4" nome="txt_input4"></label>