JavaScript Events


When a user interacts with a web page, an event takes place. Examples include when the user clicks a link or button, types text into a text box or input field, selects an option, presses a key on the keyboard, moves the mouse, submits a form, etc. Some events, like the page load and unload events, may even be started by the browser itself. Event are triggered when something happens on web page.

Some example of events are as following:

  • When a link or button is clicked
  • Moving a mouse over an element
  • Click mouse over an element
  • Selecting a radio button

The following events you can use in JavaScript.

1. Mouse events

Event Performed Event Handler Description
click onclick It will fire when mouse click on an element
mouseover onmouseover It will fire when the cursor of the mouse comes over the element
mouseout onmouseout It will fire when the cursor of the mouse leaves an element
mousedown onmousedown It will fire when the mouse button is pressed over the element
mouseup onmouseup It will fire when the mouse button is released over the element
mousemove onmousemove It will fire when the mouse movement takes place.

2. Keyboard events

Event Performed Event Handler Description
Keydown & Keyup onkeydown & onkeyup It will fire when the user press and then release the key

3. Form events

Event Performed Event Handler Description
focus onfocus It will fire when the user focuses on an element
submit onsubmit It will fire when the user submits the form
blur onblur It will fire when the focus is away from a form element
change onchange It will fire when the user modifies or changes the value of a form element

4. Window/Document events

Event Performed Event Handler Description
load onload It will fire when the browser finishes the loading of the page
unload onunload It will fire when the visitor leaves the current webpage, the browser unloads it
resize onresize It will fire when the visitor resizes the window of the browser

Next you must be defined what should happen when the event fires. You must pass a function to the event.

Example

The following section will give you the brief overview of some events as well as related JavaScript methods.

JavaScript OnClick() Method

The jQuery click() method attach an event handler function to the selected elements for "click" event. The attached function is executed when the user clicks on that element.

The following example will hide the <p> elements on a page when they are clicked.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>
Executing a Function on Click Event in
jQuery
</title>

<style>
button {
padding: 20px;
font: 20px sans-serif;
background: pink;
}
</style>
<script type="text/javascript">
function buttonchangeColor() {
document.querySelector("button").style.backgroundColor = "green"
document.querySelector("button").style.color = "white"; 
document.querySelector("p").innerHTML = "The button changed color from pink to green"
}
</script>
</head>
<body>
<p></p>
<button onclick="buttonchangeColor()">TutorialsTrend</button>

</body>
</html>

Output

Now run the code it will show button with Pink Color.

javascript Event

Now click on the button. Button color will changed. OnClick Event will fire.

javascript Event

jQuery Mouseover () Method

This method execute when move mouse over element. In the below example, The function is executed when the user place the mouse pointer over an element. Color will change.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>
Executing a Function on Click Event in
jQuery
</title>

<style>
button {
padding: 20px;
font: 20px sans-serif;
background: pink;
}
</style>
<script type="text/javascript">
function buttonchangeColor() {
document.querySelector("button").style.backgroundColor = "green"
document.querySelector("button").style.color = "white"; 
document.querySelector("p").innerHTML = "The button changed color from pink to red"
}
</script>
</head>
<body>
<p></p>
<button onmouseover="buttonchangeColor()">TutorialsTrend</button>

</body>
</html>

Output

javascript Event

Now point mouse over an element. Class change color will change the color the element.

javascript Event
Prev Next