Associar evento para vários input pela class

<< Click to Display Table of Contents >>

Navigation:  Miscelânea >

Associar evento para vários input pela class

Previous pageReturn to chapter overviewNext page

Esse exemplo associa 3 eventos (keyup, keydown e change) em 4 inputs de uma vez usando o class para localizar as inputs:

 

<!DOCTYPE html>
<html>
<body>
<input type="text" id="ed1" class="eu"><br/>
<input type="text" id="ed2" class="eu"><br/>
<input type="text" id="ed3" class="eu"><br/>
<input type="text" id="ed4" class="eu"><br/>
<script>
    var elements = document.getElementsByClassName("eu");
    // jeito antigo
    //for (var i = 0; i < elements.length; i++) {
    //  elements[i].addEventListener('keydown', myFunction, false);
    //}
    Array.from(elements).forEach(function(element) {
      element.addEventListener('keydown', edKeyDown);
     element.addEventListener('keyup', edKeyUp);
     element.addEventListener('change', edChange);
    });
 
function edKeyDown(e) {
  console.log("edKeyDown - id: " + this.id + "  key: " + e.keyCode);
}
function edKeyUp(e) {
  console.log("edKeyUp - id: " + this.id + "  key: " + e.keyCode);
}
function edChange() {
  console.log("edChange - id: " + this.id);
}
</script>
</body>
</html>