DOM Event Listeners

HTML DOM events are widely used in JavaScript code. The JavaScript's interaction with HTML is handled through events that occur when the user or the browser manipulates a page. HTML DOM allows JavaScript to react to HTML events.

A JavaScript can be executed when an event occurs, like when a user clicks on an HTML element. Now generally to execute code we need to add javascript code on the attribute field of an HTML element within the html like onclick, onload etc,
  <button onclick="alert('hello world')">Click Here</button>
But within the eventListeners we can define the javascript code for the particular event at anywhere in the code. The eventListeners are nothing but the function or procedure, which waits for an event to occur, and then execute code associated with that particular events.
  element.addEventListener(event, function, useCapture);
Where the event is the event which will occurs, and the function is which we want to call when the event occurs and the third parameter useCapture is a boolean value (true/false) which specify weather to use event bubbling or event capturing, it's an optional parameter. Now lets see some examples :

Example 1 :
<html>
<body>
  <button id="btnx">Click Here</button>
  <p id="demo"></p>
  <script>
    document.getElementById("btnx").addEventListener("click", myFunc);
    function myFunc() {
      document.getElementById("demo").innerText = "Hello world, This is Test paragraph.";
    }
  </script>
</body>
</html>
Output :



Example 2 :
<html>
<body>
  <button id="btnctrl">Click Here</button>
  <script>
    document.getElementById("btnctrl").addEventListener("click", function(){alert("Hello world!");});
  </script>
</body>
</html>
Output :


Example 3 :
<html>
<body>
  <p id="demo1">This is Test Paragraph for the Javascript Evelent Listener function</p>
  <script>
    document.getElementById('demo1').addEventListener('mouseenter', myFunc1);
    document.getElementById('demo1').addEventListener('mouseleave', myFunc2);

    function myFunc1() {
      document.getElementById('demo1').style.backgroundColor = "orange";
      document.getElementById('demo1').style.fontWeight = "bold";
    }

    function myFunc2() {
      document.getElementById('demo1').style.backgroundColor = "transparent";
      document.getElementById('demo1').style.fontWeight = "normal";
    }
  </script>
</body>
</html>
Output :

This is Test Paragraph for the Javascript Evelent Listener function


Passing Arguments to functions :

To pass arguments in EventListeners we need to use "anonymous functions" that calls the specified function with the parameters. Lets see an Example :
<html>
<body>
  <input type="text" id="num1" value=10 maxlength="2" style="width:25px;"> +
  <input type="text" id="num2" value=20 maxlength="2" style="width:25px;">
  <button id="myButton">Click Here</button>
  <p id="demo2"></p>
  <script>
    document.getElementById('myButton').addEventListener('click', function() {
      a = parseInt(document.getElementById('num1').value);
      b = parseInt(document.getElementById('num2').value);
      addNum(a, b);
    });
  
    function addNum(a, b) {
      var result = a + b;
      document.getElementById('demo2').innerText = result;
    }
  </script>
</body>
</html>
Output :

+


Next Topic :