JavaScript Events
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.
<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
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.
<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
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.
<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
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.
<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
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.
<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
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.
<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
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.
<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
Note: Try to enter some text inside input box.
Color Picker
List of color names supported by all browser »
Character Code
List of character codes to display special character »
Language Code
List of all language supported by all browser »
Country Code
List of Country code supported by all browser »