JavaScript Events

Prev Next

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.

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

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>