Advertisement

Advertisement


Mouse Events

These are the events which are related to different mouse operations. These events triggered when the user click some element, move the mouse pointer over an element, etc.


The Click Event (onclick)

This event occurs when any elementon the webpage is clicked. The onclick event handler is used to handle this 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 Contextmenu Event (oncontextmenu)

This event occurs when the right mouse button is clicked on an element to open the context menu. 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 Mouseout Event (onmouseout)

This event occurs when a user first moves the mouse pointer over an element and then remove 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 a user moves the mouse pointer over an element. The onmouseover event handler is used to handle this event.

The following example will show you an alert message when you place mouse over the elements.


<!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

Keyboard Events

These events are related to keyboard's keys. These events gets triggered when any key is pressed or released. Here're some most important keyboard events and their event handler.

The Keydown Event (onkeydown)

The keydown event occurs when the 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 Keyup Event (onkeyup)

The keyup 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 Keypress Event (onkeypress)

This event occurs when a user presses down 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.










Become a Patron!

Note: If the updated content is not visible to you please refresh the cookies by pressing CTRL + Shift + R.