Javascript Events

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 (space and enter key only). See example

Using onclick

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

Using Event Listener

document.querySelector("button").addEventListener("click",function(){
    console.log("clicked");
});

Javascript oncontextmenu is a global event for right click event of mouse or pointing device. This event can happen on pointing devices like mouse only. See example

document.querySelector("button").addEventListener("contextmenu",function(){
    alert("right click");
})

To disable default right click menu, use e.preventDefault(). See example

var btn=document.querySelector("button");

btn.addEventListener('contextmenu',function(e){
    e.preventDefault();
    alert("right click");                    
})

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").addEventListener("focus",function(){
    this.value="";
})

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

document.querySelector("input").addEventListener("focus",function(){
    this.value="";
});
document.querySelector("input").addEventListener("blur",function(){
    this.value="Name";
});

oninput event is global event of input, textarea, and select which invokes when user input data in following controls.

document.querySelector('input').addEventListener("input",function(){
    document.querySelector('span').innerHTML=this.value;
})
        

    document.querySelector("input").addEventListener("input",function(){
        document.querySelector('span').innerHTML=this.value;
    });
            

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").addEventListener("change",function(){
    document.querySelector("span").textContent=this.value;
})

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

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

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

document.querySelector("div.box").addEventListener("mousemove",function(e){
   var x=e.clientX;
   var y=e.clientY;
   document.querySelector("span").textContent=`Cursor location is ${x} , ${y}`;
})

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

document.querySelector("div.box").addEventListener("mouseover",function(){
  this.innerHTML="mouse is in now";
});
document.querySelector("div.box").addEventListener("mouseout",function(){
  this.innerHTML="mouse is out now";
});

Javascript onmousedown 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

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

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

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

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").addEventListener("keypress",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").addEventListener("keypress",function(e){
     var x=e.which;    // keycode 
     
     if( e.shiftKey){
        document.querySelector("span").textContent="Shift key is pressed";
     }
     else{
        document.querySelector("span").textContent="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.

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

window.addEventListener("keydown","function(e){
    let x=e.which;
    document.querySelector('span').innerHTML=`keycode is ${x}.`;
})

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

document.querySelector("textarea").addEventListener("keyup","function(){
    let x=this.value.length;
    let y=160-x;
    this.nextElementSibling.innerHTML=`${y} characters left.`;
})

Javascript onsubmit is a global event happens when user submit form. This can be done by hitting the enter key or clicking submit button.

The onsubmit event act on click of submit button or enter key press only when its inside form. See example

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

<script>
document.contact.addEventListener("submit",function(e){
    const x=this.username.value;
   console.log(`thanks ${x}`);
       
   e.preventDefault();
   // to avoid url redirection after submit
});
<script>

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="contact">
    <input type="text" name="username">
    <button type="reset">Reset</button>
    <button>Submit</button>
</form>

<script>
document.contact.addEventListener("reset",function(e){
    const x=window.confirm("would you like to reset?");
    
    if( x==false){e.preventDefault() }          // form reset disabled
    
})
<script>

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").addEventListener("select","function(){
    this.nextElementSibling.innerHTML="You have selected";
});

Javascript oncopy is a global event for keyboard, mouse and touch interface. This event happen when user copy text from textbox or textarea.

The oncopy event is used only when selected text is copied.

document.querySelector("input").addEventListener("copy",function(){
    this.nextElementSibling.innerHTML="text copied";
});

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

The onpaste event is used only when selected text is pasted after copying.

document.querySelector("input").addEventListener("paste",function(){
    this.nextElementSibling.innerHTML="text pasted";
});

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.

window.addEventListener("scroll",function(){
    console.log(this.scrollY);  
})

DOMContentLoaded

Javascript DOMContentLoaded is a global event of document object. DOMContentLoaded event happened when all elements in DOM are loaded and parsed including defer scripts.

DOMContentLoaded happens when html tags closing is done as it is the end of webpage. But still images, iframes, ads, async scripts are not finished loading. Once they are finished loading, window.onload events happens.

        console.log("window loading");              // first 
        
    document.addEventListener("DOMContentLoaded",function(){
       console.log("DOM loaded and parsed");               // third
    });
        
        console.log("window still loading");       // second
    

onload

Javascript onload is a global event of window object. This event happen when all requests in a webpage are loaded on DOM.

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

    console.log("window loading");              // first 
    
window.addEventListener("load",function(){
   console.log("window loaded");               // third
});
    
    console.log("window still loading");       // second