Javascript Events

JavaScript Events are the techniques or ways used by a user to interact with a webpage, like mouse click, mouse over, key press, keyup, right click etc. Javascript handles Keyboard based events and mouse based events and Touch Based events. A fully Interactive website is not possible without JS Events.

Touch based events are also supported in javascript after ES5(2011).

click event in javascript using 3 methods.

 <button onclick="alert(this.textContent)">Button </button>
    <!--Obtrusive JavaScript, not recommended-->
 <!--add event to element, can assign single function only-->
 document.querySelector("button").addEventListener("click",function(){ alert(this.textContent) })
<!--recommended 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 event only.

List of Javascript Events

Here is a list of mouse and keyboard based events with example.

← Swipe to view more →

JS 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() function to add event, and removeEventListener() function to remove an event.

Advantage of using Event Listeners

  1. Can add multiple functions.
  2. Event can be removed using removeEventListener function.
  3. Event Propagation can be changed.
  4. Can use custom events.

Type of Event Listeners


addEventListener is the most preffered and recommended way to handle javascript events.

Inside addEventListener function, first parameter is event type string, like click, mouseover, mouseout, scroll etc and second parameter is function that will be called when event occurs. Second parameter can also be an anonymous function. Third parameter is boolean.

addEventListener with function

           // action is a function       


addEventListener with anonymous function


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", myFunction);
function myFunction(){ 


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(){

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>
                 alert("you clicked div");
                 alert("you clicked button");

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>
                 alert("you clicked div");
                 alert("you clicked button");