Javascript Events

JavaScript Events are the techniques used by a user to interact with html elements, like mouse click, mouse over, key press, keyup, right click, touch etc. Javascript can handle Keyboard based events, 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-->
 
 <script> 
 document.querySelector("button").onclick=function(){
 alert(this.textContent)
 }  
 </script>  
 <!--add event to element, can assign single function only-->
 
 <script>
 document.querySelector("button").addEventListener("click",function(){ alert(this.textContent) })
     
  </script>   
<!--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, keyboard and touch based events in javascript with example.

← Swipe to view more →


onclick

🖱

Javascript click event is a global event for keyboard, mouse and touch interface. This event happen on mouse left click, tap on touch device, and keyboard click on focus (spacebar and enter key only). See example



document.querySelector("button").onclick=function(){
    alert("clicked");
}

oncontextmenu

🖱

Javascript oncontextmenu is a global event for right click of mouse. This event happen on mouse and touchbar only. See example



document.querySelector("button").oncontextmenu=function(){
    alert("right click");
}

To disable default right click menu, use return false in function. See example



document.querySelector("button").oncontext=function(){
    alert("right click");
    return false;
}

onfocus

🖱

Javascript onfocus is a global event for keyboard, mouse and touch interface. This event happen when user focus on form controls or hyperlink. See example



document.querySelector("input").onfocus=function(){
    this.value="";
}

onblur

🖱

Javascript onblur is a global event for keyboard, mouse and touch interface. This event happen when user loses focus from focusable element. See example




document.querySelector("input").onfocus=function(){
    this.value="";
}
document.querySelector("input").onblur=function(){
    this.value="Name";
}

onchange

🖱

Javascript onchange is a global event for keyboard, mouse and touch interface. This event happen when user change value of select dropdown. See example



document.querySelector("select").onchange=function(){
    alert(this.value);
}

onmouseover

🖱

Javascript onmouseover is a global event for mouse. This event happen when user mouse over on an html element. See example

Mouse over in this box

document.querySelector("div.box").onmouseover=function(){
  this.innerHTML="Mouse over event done";
  this.style.backgroundColor="#ccc";
}

onmousemove

🖱

Javascript onmousemove is a global event for mouse and touch interface. This event happen when user move mouse over an element. This will happen every time user move his pointer. See example

Mouse over here

document.querySelector("div.box").onmousemove=function(e){
   var x=e.clientX;
   var y=e.clientY;
console.log("Cursor location is "+ x + ", " + y);
}

onmouseout

🖱

Javascript onmouseout is a global event for mouse and touch interface. This event happen when user remove mouse pointer from an element.. See example

Insert mouse pointer

document.querySelector("div.box").onmouseover=function(){
  this.innerHTML="mouse is in now";
};
document.querySelector("div.box").onmouseout=function(){
  this.innerHTML="mouse is out now";
}

onmousedown

🖱

Javascript onmousdown is a global event for mouse. This event happen when user starts pressing mouse left click. Event will occur as soon as user initiate pressing mouse left key. See example

click here

document.querySelector("div.box").onmousdown=function(){
  this.innerHTML="mouse left key is pressed";
}

onmouseup

🖱

Javascript onmouseup is a global event for mouse. This event happen when user remove mouse left key. It is happening every time user is releasing left key. See example

mouse is out now

document.querySelector("div.box").onmouseup=function(){
  this.innerHTML="mouse left key is released";
}

onkeypress


Javascript onkeypress is a global event for keyboard and touch interface. This event happen when user press any keyboard key.

To check keycode, e.which is used where e is parameter in keypress function. To check which key is pressed, String.fromCharCode(e.which) is used. See example


document.querySelector("input").onkeypress=function(e){
     var x=e.which;    // keycode 
     var y=String.fromCharCode(x);
  this.nextElementSibling.innerHTML="you pressed "+ y+  "key and keycode is "+ x;
}

Check Shift key

To check whether Shift key is press with keypress, use e.shiftKey.


document.querySelector("input").onkeypress=function(e){
     var x=e.which;    // keycode 
     
     if( e.shiftKey){
        console.log("Shift key is pressed")
     }
     else{
        console.log("Shift key was not pressed")
     }
}

Check Alt key

To check alt key , use e.altKey.


Check Ctrl key

To check Ctrl key , use e.ctrlKey.


Check Cmd key in mac

To check Cmd key , use e.metaKey.



onkeydown


Javascript onkeydown is a global event for keyboard and touch interface. This event happen when user start pressing any keyboard key.

Javascript onkeydown event is used in gaming and canvas based applications. See example

Press any key

window.onkeydown=function(e){
    var x=e.which;
    this.nextElementSibling.innerHTML="keycode is "+ x + ".";
}

onkeyup


Javascript onkeyup is a global event for keyboard and touch interface. This event happen when user release any keyboard key.

The onkeyup event is used to calculate no of characters in textbox or textarea. See example

160 characters left.


document.querySelector("textarea").onkeyup=function(){
    var x=this.value.length;
    var y=160-x;
    this.nextElementSibling.innerHTML=y+ " characters left.";
}

onsubmit

🖱

Javascript onsubmit is a global event for keyboard, mouse and touch interface. This event happen when user submit form data.

The onsubmit event act on click of submit button or enter key press. See example




<form name="contact">
    <input type="text" name="username">
    <button>Submit</button>
</form>

<script>
document.contact.onsubmit=function(){
    var x=this.username.value;
   alert("thanks " + x);
   return false;            // to avoid url redirection after submit
}
<script>

onreset

🖱

Javascript onreset is a global event for keyboard, mouse and touch interface. This event happen when user reset form data using reset button.

If reset button is pressed by mistake, all form data will be erased. To avoid this, use window.confirm() on onreset event . See example




<form name="contact1">
    <input type="text" name="username">
    <button type="reset">Submit</button>
    <button>Submit</button>
</form>

<script>
document.contact.onreset=function(){
    var x=window.confirm("would you like to reset?");
    
    if( x==false){
    return false;        // avoid reseting form 
    }
    
}
<script>

onselect

🖱

Javascript onselect is a global event for keyboard, mouse and touch interface. This event happen when user select text in textbox or textarea.

The onselect event is used only when selection is done inside input and textarea element.




document.querySelector("input").onselect=function(){
    this.nextElementSibling.innerHTML="You have selected";
}

onscroll

🖱

Javascript onscroll is a global event for keyboard, mouse and touch interface. This event happen when user scroll window using mouse, keyboard or touch interface.

The onscroll event is used in many scroll based effects like parallax scrolling, smooth scroll etc.

Scroll window


window.onscroll=function(){
    console.log(this.scrollY);
    
}

onload

🖱

Javascript onload is a global event for keyboard, mouse and touch interface. This event happen when all requests in a webpage are loaded on DOM.

Onload event is helpful if we want toload DOM content first and then add javascript after DOM Elements are loaded .


    console.log("window loading");            // first 
    
window.onload=function(){
   console.log("window loaded");               // third
}
    
    console.log("window still loading");       // second