Tutorials Tonight's Logo
Follow Us

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.

<body onload="alert('Page finished loading!')">
    <h2>onload event is triggered when webpage finishes loading.</h2>
</body>
▶ Run the code

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

<body onload="alert('Page finished loading!')">
    <h2>onload event is triggered when webpage finishes loading.</h2>
</body>
▶ Run the code

javascript unload event

<body onunload="alert("Are you sure you want to close the tab?")">
    <h2>onunload event is triggered when webpage is tried to close.</h2>
</body>
▶ Run the code

javascript onresize event

<body onresize="alert("Window resized!")">
    <h2>onresize event is triggered when webpage is resized.</h2>
</body>
▶ Run the code

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

const element = document.getElementById("event-output");
function mousedown(){
  element.innerHTML += "mousedown";
}
function mouseup() {
  element.innerHTML += "mouseup";
}
▶ Run the code

Output:

Click and release the mouse in the area below.


javascript click event

const element = document.getElementById("event-output");
function singleClick() {
  element.innerHTML += "Single Click!";
}
function dblclick() {
  element.innerHTML += "Double Click! 2 single Click also counted.";
}
▶ Run the code

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

const element = document.getElementById("event-output");
function keydown() {
  element.innerHTML += "KeyDown!";
}
function keyup() {
  element.innerHTML += "KeyUp!";
}
function keypress() {
  element.innerHTML += "KeyPress!";
}
▶ Run the code

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.

let element = document.getElementById("event-output");
let input = document.getElementById("value");
function focused() {
  console.log("Focused");
  element.innerHTML += "Focused!";
  input.style.background = "steelblue";
}
function blured() {
  element.innerHTML += "Focus removed!";
  input.style.backgroundColor = "#ffffff";
}
function changed() {
  element.innerHTML += "Changed!";
}
function submited() {
  event.preventDefault();
  element.innerHTML += "Form Submitted";
  alert("Form Submitted!");
}
▶ Run the code

Output:

Click and change values in form.


More Learning

Want to learn more about programming and web development? We have a few recommendations for you.


Follow Us

Copyright © Tutorials Tonight. All Rights Are Reserved.