JavaScript Tutorial
JS Overview
JS Introduction
How To Add JS
JS Output
JS Comments
JS Variable
JS Data Types
JS Operators
JS Events
JS Form Events
JavaScript Statements
JS If Statement
JS Switch
JavaScript Loop
JS for loop
JS while loop
JS do while Loop
JS for..in loop
Function
JS Function
JavaScript Objects
JS Object
JS Array
JS Array Sorting
JS String
JS String Method
JS Number
JS Boolean
JS Date
JS Math
JavaScript BOM
JS Window
JS location
JS History
JS Navigator
JS Screen
JS Dialog Boxes
JavaScript DOM
Document Object
JS Methods
JS innerHTML
JavaScript Validation
JS Form Validation
JavaScript Advanced
JS Cookies
JS Delete Cookies
JS Type Conversions
JS Event Listeners
JS Error Handling
JS Reserved Keywords
Reading Section
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.
Example
Try this code »
<!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>
<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. Theoncontextmenu event handler is used to handle this event.The following example will show an alert message when you right-click on the elements.
Example
Try this code »
<!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>
<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.
Example
Try this code »
<!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>
<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. Theonmouseover event handler is used to handle this event.The following example will show you an alert message when you place mouse over the elements.
Example
Try this code »
<!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>
<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. Theonkeydown event handler is used to handle this event.
Example
Try this code »
<!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>
<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. Theonkeyup handler is used to handle this event. The following example will show you an alert message when the keyup event occurs.
Example
Try this code »
<!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>
<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.
Example
Try this code »
<!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>
<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.
Recommended :
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 »