What are Javascript Events

Events are the techniques used by a user to interact with a webpage, like mouse click, mouse over, key press, keyup, right click etc. Javascript handles both Keyboard based events and mouse based events. Touch based events are also supported in javascript now.

click event in javascript using 3 methods.



 <button onclick="alert(this.textContent)">Button </button>
        <!--Obtrusive JavaScript, not recommended-->
 
 <script> 
 document.querySelector("button").onclick=function(){
 alert(this.textContent)
 }  
 </script>  // event handler property, can call single function only
 
 <script>
 document.querySelector("button").addEventListener("click",function(){ alert(this.textContent) })
     
  </script>    // recommended standard way of dealing with Javascript Events
    

This first method works in all browsers, but isn't recommended, as we are writing javascript code in html tag. Second one is neat and clean, but is restricted to single function only.



List of Javascript Events

Here is a list of mouse and keyboard based events.

Event Description Example
onclick script run when mouse left key is clicked.
oncontextmenu script run when mouse right key is clicked.
onmouseover script run when mouse pointer move over an element.
onmouseout script run when mouse pointer move out an element.
onmousmove script run when mouse pointer moves
onmousedown script run when mouse button is pressed
onmouseup script run when mouse button is released.
onsubmit script run when form data is submitted.
onreset script run when reset button is clicked inside form.
onchange script run when elements value or state change.
onselect script run when element is selected.

Select this paragraph

onfocus script run when element is focused
onblur script run when element loose focus.
onkeypress script run when keyboard key is pressed and released .
onkeydown script run when keyboard key is pressed.
onkeyup script run when keyboard key is released . 10 characters left.

Event Listeners

The most preferred and recommended way of dealing with javascript events is to use event listeners. These event listeners were introduced in ECMA 5. Thus all modern web browsers support them (Except I.E 8 and below). To use event listeners, we use addEventListener() method. Here is an example to show how to use event listener in javascript.


  document.body.addEventListener("click",action});       
        

In this example, we are using click event on body element. addEventListener use two parameters. First event type, and second is callback function, that is invoked when event occurs. Third parameter (Boolean value true or false) is option as it is used only when we change event propagation.


  document.querySelector("button").addEventListener("click",function(){ 
    //action
});
    or
document.querySelector("button").addEventListener("click", myFunction);
function myFunction(){ 
    //action
};
        

Removing Event Listener

Event listeners can be removed using removeEventListener() method. This is another advantage of using event listeners. Here is an example.


        var para=document.querySelector("p");
        para.addEventListener("click", remove);
        
        function remove(){
            console.log("Clicked");
            para.removeEventListener("click",remove)
        }
        

Event Propagation

Event Propagation is the order that the events fire. By default events propagates from child to parent node, also known as bubbling.

Two types of events propagations are

  • Bubbling
  • Capturing

Event Bubbling

Event Bubbling is when event fire on an elements and then bubbles up to parent Elements till it reach root node. By default all events are bubbling type. In example show, click events is used on both parent div, and child button. But button will call first.


    <div id="div1">
        <button id="button1">Button 1</button>
    </div>
    
    <script>
    document.querySelector("#div1").addEventListener("click",function(){
                 alert("you clicked div");
             });
    document.querySelector("#button1").addEventListener("click",function(){
                 alert("you clicked button");
             });
    </script>
        

Event capturing

Event capturing is when root node is fired first, and then poppagates downwards until it reach targeted element. Capturing is possible by using third boolean parameter (true) in event listener. Here is an example.


    <div id="div2">
        <button id="button2">Button 1</button>
    </div>
    <script>
    document.querySelector("#div2").addEventListener("click",function(){
                 alert("you clicked div");
             },true);
    document.querySelector("#button2").addEventListener("click",function(){
                 alert("you clicked button");
             },true);
    </script>