MENU


Binding Event Handlers

There are several ways to bind an event.

Notice how the variable window.event is accessible everywhere.<br>To access the properties of the target element, an arrow function must not be used as the event handler because the variable 'this' won't be bound then.
RESETRUNFULL
<!DOCTYPE html><html><head>
   <title>Event Binding</title>
   <script
         src="https://code.jquery.com/jquery-3.4.1.min.js"
        integrity="sha256-CSXorXvZcTkaix6Yvo6Hppc…o="
        crossorigin="anonymous">
   </script><script>
      function count_characters(element){
          document.querySelector("span").innerHTML =
            event.type+":"+element.value.length+" characters.";
      }
   </script></head><body>
   <span></span><br/><br/><br/>
      Method 1: inline JavaScript<br/>
   <input type="text" onkeyup="count_characters(this)"/>
   <br/><br/>
   Method 2: element.addEventListener()<br/>
   <input type="text"/>
   <script>
      document.getElementsByTagName("input")[1].
         addEventListener("keyup",function(){
            count_characters(this);
         });
   </script>
   <br/><br/>
   Method 3: element.onX()<br/>
   <input type="text"/>
   <script>
     document.getElementsByTagName("input")[2].onkeyup
      =function(){count_characters(this);};
   </script>
   <br/><br/>
   Method 4: jQuery<br/>
   <input type="text"/>
   <script>
      $("input:last-of-type").on("keyup",
                                function(){count_characters(this) });
   </script>
   <br/><br/></body></html>