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