Tutorials Tonight's Logo

JAVASCRIPT EVENTS


What are the events in javascript?

Javascript events are the actions or occurrences that happen to the HTML elements in the webpage.

For example, page loading, button click, mouse move, keypress, and so on. Events provide a dynamic interface to the webpage.

An event may occur either by the browser or by the user.

Let us see an example of the click event, click the button below; it fires onclick event and alerts a message.

onclick event

onclick event is attached to the button that creates an alert box when clicked

Event Handling In Javascript

When an event occurs, then we want something to happen. Javascript interacts with HTML through events that occur when a user or the browser manipulates a webpage. Javascript can detect these events and can execute some code on specified events.

HTML has an event handler attribute to be added to HTML elements that define the type of event we want to get from the element. Here is the syntax of how to attach event handlers to the HTML.

<element event="javascript code">content...</element>

onload event:

Let's see an example of an onload event. onload event is triggered by the browser when the web page finishes loading.


Types of Events in Javascript

There are many different kinds of events in javascript. for example


Javascript window event

window events are the events that are generated when there is some change of any kind in the browser window.

Event Action Description
onload webpage loaded event is fired when page load is complete
unload closing page when user tried to close the page
resize resizing browser tab event is fired when page is resized

javascript onload event

javascript unload event

javascript onresize event


Javascript mouse events

Mouse events are the events that are triggered when there is any action taken by the mouse.

Event Action Description
mousedown/mouseup onmousedown/onmouseup mouse is clicked or released over an element
click onclick when mouse is clicked over an element
dbclick on double click when mouse is double clicked over an element
mousemove onmousemove when mouse is moved over an element

javascript mousedown and mouseup event

Output:

Click and release the mouse in the area below.


javascript click event

Output:

Click and release the mouse in the area below.


Javascript keyboard events

keyboard events are the events that are generated when the keyboard button is clicked or released.

Event Action Description
onkeydown Button Down event is fired when any keyboard button is down
onkeyup Button released event is fired when any keyboard button is released
onkeypress Button pressed event is fired when any keyboard button is pressed

javascript keyboard events

Output:

Click and release button in area below.


Javascript form events

form events are the events that are generated when any action is taken on form elements.

Event Action Description
submit onsubmit event is fired when form is submitted
blur Focus Removed event is fired when focus is removed from input section
focus onfocus event is fired when cursor is focused on form
change onchange event is fired when form is changes

let's see examples.

Output:

Click and change values in form.