Home » JavaScript » JavaScript Events

What is JavaScript event?

JavaScript Event is an occurence of any user action in your system. For example, mouse click, sliding of cursor, keystroke, and so on. All these actions that result in some kind of change in the website are known as events.

Actually, events in wesbsites are called HTML events not JavaScript events because they are occuring on an HTML element, for eg., a button click. But JavaScript comes handy when we want to react to these events. JavaScript reacts to these events by using JavaScript Event Handlers. Let's break it down:

  • HTML Events: It is an occurring of event on an HTML element. For eg., a keystroke, mouse clicks.
  • JavaScript Event Handling: JavaScript Event Handling is reacting over the HTML events by using JavaScript. For eg., showing alert box after mouse click.
  • JavaScript Event Handlers: Event handler or event listener is a software subroutine that listens and handles the events. Each HTML event has an event handler associated with it. So, Javascript manages events by using event handlers. This process is called event handling.

Examples of JavaScript Event Handling

These are some samples of event handling on HTML elements. A button, input field, or a div are HTML elements. When you perform some specific events on these elements then the system will give you a response. This is event handling through JavaScript. Follow the instructions given to see the response.

Examples:

1. This Event shows the current time.

2. This Event shows the Alert Popup after changing the selection box.


Mouse Events in JS

Mouse events are most occurring events in a website because people use mouse to navigate through website. We will now see various events related to mouse actions. Actions like mouse click, page scroll using mouse, movement of cursor over an element are all mouse events. Let's explore them one by one:

Examples:

1. This Event shows the Alert Popup after removing the cursor from the button.



2. This Event shows the Alert Popup.




The onclick event

The onclick event is the most user friendly event, it occurs when user left clicks on any element. Use of this event can enhance website's attractiveness. For example: zooming image on mouse click or assisting user during form filling.

The onclick event handler is used to handle onclick event. This event handler is now embedded with HTML 5 as an attribute. So, without using script tags we can easily use the onclick event.

The following example will show you an alert message when you click on the elements.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> JavaScript OnClick Event </title>
</head>
<body>
<body>
<button type="button" onclick="alert('You have clicked a button!');"> Click Me </button>
<a href="#" onclick="alert('You have clicked a link!');"> Click Me </a>
</body>
</html>

Output

JavaScript OnClick Event Click Me

The oncontextmenu event

The oncontextmenu event occurs when user right clicks on an element. It is similar to onclick event just the mouse button is different. It can be used in a situation if right click is disabled on a website, but if user right clicks on an element then a warning message gets displayed.

The oncontextmenu event handler is used to handle this event.

The following example will show an alert message when you right-click on the elements.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> JavaScript OnContext Menu Event </title>
</head>
<body>
<button type="button" oncontextmenu="alert('You have right-clicked a button!');">Right Click on Me</button>
<a href="#" oncontextmenu="alert('You have right-clicked a link!');">Right Click on Me</a>
</body>
</html>

Output

JavaScript OnContext Menu Event Right Click on Me

The onmouseout event

The onmouseout event occurs when a user hovers mouse cursor over an element and then removes it. The onmouseout event handler is used to handle this event.

The following example will show you an alert message when the mouseout event occurs.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> JavaScript OnMouseOut Event </title>
</head>
<body>
<button type="button" onmouseout="alert('You have moved out of the button!');"> Place Mouse Inside Me and Move Out </button>
<a href="#" onmouseout="alert('You have moved out of the link!');"> Place Mouse Inside Me and Move Out </a>
</body>
</html>

Output

JavaScript OnMouseOut Event Place Mouse Inside Me and Move Out

The Mouseover Event (onmouseover)

The mouseover event occurs when user hovers the cursor over an element. The moment cursor gets over the element the onmouseover event handler gets triggered and execute task specified to it. You can display information as tooltip for the hovered element, or you can zoom an image.

The following example will show you an alert message when you place cursor over the button.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> JavaScript Handling the Mouseover Event </title>
</head>
<body>
<button type="button" onmouseover="alert('You have placed mouse pointer over a button!');">
Place Mouse Over Me </button>
<a href="#" onmouseover="alert('You have placed mouse pointer over a link!');"> Place Mouse Over Me </a>
</body>
</html>

Output

JavaScript Handling the Mouseover Event Place Mouse Over Me

JS Keyboard Events

JS Keyboard events are related to keyboard keys. These events gets triggered when any key is pressed or released.

Here are some most important keyboard events and their event handlers.

The onkeydown event

The onkeydown event occurs when user press down a key on the keyboard. The onkeydown event handler is used to handle this event.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> JavaScript OnKeydown Event </title>
</head>
<body>
<input type="text" onkeydown="alert('You have pressed a key inside text input!')">
<p><strong>Note:</strong> Try to enter some text inside input box.</p>
</body>
</html>

Output

JavaScript OnKeydown Event

Note: Try to enter some text inside input box.


The onkeyup event

The onkeyup event occurs when the user releases a key on the keyboard. The onkeyup handler is used to handle this event.

The following example will show you an alert message when the keyup event occurs.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript Handling the Keyup Event</title>
</head>
<body>
<input type="text" onkeyup="alert('You have released a key inside text input!')">
<hr>
<p><strong>Note:</strong> Try to enter some text inside input box.</p>
</body>
</html>

Output

JavaScript Handling the Keyup Event

Note: Try to enter some text inside input box.


The onkeypress event

The onkeypress event occurs when a user press a key on the keyboard that has a character value associated with it. Keys like Ctrl, Shift, Alt, Esc, Arrow keys, etc. will not generate a keypress event, but will generate a keydown and keyup event.

The onkeypress event handler is used to handle this event.

The following example will show you an alert message when the keypress event occurs.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript Handling the Keypress Event</title>
</head>
<body>
<input type="text" onkeypress="alert('You have pressed a key inside text input!')">
<p><strong>Note:</strong> Try to enter some text inside input box.</p>
</body>
</html>

Output

JavaScript Handling the Keypress Event

Note: Try to enter some text inside input box.