Java Script Events

Manish SawManish Saw
2 min read

What is Event

Can I know how you find and came to this blog. You might have gone to the browser and searched for hash node and then you searched for this topic and you found this blog and finally clicked on it.

But have you ever thought that how browser knew that you clicked on this blog not anywhere else. All of these Events like clicks or hover are listened or sensed by Event Listeners.


Event Listener in Java Script

And in Java Script, we have a function called “addEventListener”, which helps us to add Events. And it’s basic syntax looks like this:

let button = document.getElementById('button')
button.addEventListener('click',function(){
    console.log("Button is clicked")
})

In this event listener function, the first argument is the type of event we wanna to listen, like: click, hover, select etc. and then we write an function which will be executed when that event happens.


Event types

So let’s Understand types of Events we have in Java Script:

Event TypeWill work when
clickuser clicks on any element
dblclickuser double-clicks on any element
mousedownmouse button is pressed down on an element
mouseupmouse button is pressed up on an element
submitthe form is submitted
changevalue of any Input, select or text area element changes
focusthe input box gets focus or you clicked over them
blurthe input box loses focus
loadentire page has just finished loading and all resources loaded successfully.
unloaduser navigates away from that page.
dragany element is been dragged from its position
dropthat dragged element is dopped in any drop zone
playthe Media starts playing

Hope you learned Something and Found reading this blog Helpful. Make sure to hit on the like icon only if you found reading this blog helpful.

0
Subscribe to my newsletter

Read articles from Manish Saw directly inside your inbox. Subscribe to the newsletter, and don't miss out.

Written by

Manish Saw
Manish Saw