Various events in JavaScript
Mouse Events
| Event | Description |
|---|---|
| onclick | Works when we left click on mouse |
| onmouseover | When the cursor of the mouse comes over the element |
| onmouseout | When the cursor of the mouse leaves an element |
| onmousedown | When the mouse button is pressed over the element |
| onmouseup | When the mouse button is released over the element |
| onmousemove | When the mouse movement takes place. |
onclick event
Example of onclick event
<html>
<head>
<title>Example of onclick event</title>
<script>
function demo_compuhelp()
{
alert("Welcome to compuhelp");
}
</script>
</head>
<body>
<input type="button" value="click" onClick="demo_compuhelp()">
</body>
</html>
onmouseover event
Example of onmouseover event
<html>
<head>
<title>Example of onmouseover event</title>
<script>
function demo_compuhelp()
{
alert("Welcome to compuhelp");
}
</script>
</head>
<body>
<input type="button" value="mouseover" onMouseOver="demo_compuhelp()">
</body>
</html>
onmouseout event
Example of onmouseout event
<html>
<head>
<title>Example of onmouseout event</title>
<script>
function demo_compuhelp()
{
alert("Welcome to compuhelp");
}
</script>
</head>
<body>
<input type="button" value="mouseout" onMouseOut="demo_compuhelp()">
</body>
</html>
onmousedown event
Example of onmousedown event
<html>
<head>
<title>Example of onmousedown event</title>
<script>
function demo_compuhelp()
{
alert("Welcome to compuhelp");
}
</script>
</head>
<body>
<input type="button" value="mousedown" onMouseDown="demo_compuhelp()">
</body>
</html>
onmouseup event
Example of onmouseup event
<html>
<head>
<title>Example of onmouseup event</title>
<script>
function demo_compuhelp()
{
alert("Welcome to compuhelp");
}
</script>
</head>
<body>
<input type="button" value="mouseup" onMouseUp="demo_compuhelp()">
</body>
</html>
onmousemove event
Example of onmousemove event
<html>
<head>
<title>Example of onmousemove event</title>
<script>
var count=0;
function demo_compuhelp()
{
count++;
document.getElementById("para").innerHTML=count;
}
</script>
</head>
<body>
<div style="width:200px; height:200px; border:groove;" onMouseMove="demo_compuhelp()"></div>
<p id="para"></p>
</body>
</html>
Keyboard events
| Event | Description |
|---|---|
| onkeypress | When the user press a key |
| onkeyup | When the user releases the key |
onkeypress event
Example of onkeypress event
<html>
<head>
<title>Example of onkeypress event</title>
<script>
function demo_compuhelp()
{
alert("Welcome to compuhelp");
}
</script>
</head>
<body>
<label>Enter something</label> <input type="text" onKeyPress="demo_compuhelp()"/>
</body>
</html>
onkeyup event
Example of onkeyup event
<html>
<head>
<title>Example of onkeyup event</title>
<script>
function demo_compuhelp()
{
alert("Welcome to compuhelp");
}
</script>
</head>
<body>
<label>Enter something</label> <input type="text" onKeyUp="demo_compuhelp()"/>
</body>
</html>
Form events
| Event Handler | Description |
|---|---|
| onfocus | When the user focuses on an element |
| onsubmit | When the user submits the form |
| onblur | When the focus gets away from a form element |
| onchange | When the user modifies changes the value of a form element |
onfocus event
Example of onfocus event
<html>
<head>
<title>Example of onfocus event</title>
<script>
function demo_compuhelp()
{
document.getElementById("txt").style.backgroundColor="red";
}
</script>
</head>
<body>
<h2>Focus on the textbox, the background color of the textbox changes.</h2>
<input type="text" onFocus="demo_compuhelp()" id="txt"/>
</body>
</html>
onsubmit event
</form>
Example of onsubmit event
<html>
<head>
<title>Example of onsubmit event</title>
<script>
function demo_compuhelp()
{
alert("form is submitted");
}
</script>
</head>
<body>
<form onSubmit="demo_compuhelp()">
<label>Enter name:</label> <input type="text">
<input type="submit">
</form>
</body>
</html>
onblur event
Example of onblur event
<html>
<head>
<title>Example of onblur event</title>
<script>
function demo_compuhelp()
{
alert("Welcome to Compuhelp");
}
</script>
</head>
<body>
<h2>First click on the button and then click outside button.</h2>
<input type="button" value="click" onBlur="demo_compuhelp()"/>
</body>
</html>
onchange event
Example of onchange event
<html>
<head>
<title>onchange Event</title>
<style>
form{background-color:#CCC; width:400px;}
label{font-size:18px;}
</style>
<script>
function demo_compuhelp()
{
alert("Welcome to Compuhelp");
}
</script>
</head>
<body>
<h2>First enter name in first text box, then change to password text box, the onchange event will occur.</h2>
<form>
<table>
<tr><td><label>Enter name</label></td><td><input type="text" id="txt_name" onChange="demo_compuhelp()"></td></tr>
<tr><td><label>Enter password</label></td><td><input type="password" id="txt_password"></td></tr>
<tr><td></td><td><input type="submit" style="height:40px; width:80px; font-size:18px;"></td></tr>
</table>
</form>
</body>
</html>
Window/Document events
| Event | Description |
|---|---|
| onload | When the browser finishes the loading of the page |
| onresize | When the visitor resizes the window of the browser |
onload event
</body>
Example of onload event
<html>
<head>
<title>Example of onload event</title>
<script>
function demo_compuhelp()
{
alert("Welcome to Compuhelp");
}
</script>
</head>
<body onLoad="demo_compuhelp()">
<h2>It will work when the page is loaded.</h2>
</body>
</html>
onresize event
</body>
Example of onresize event
<html>
<head>
<title>Example of onResize event</title>
<script>
function demoCompuhelp()
{
document.write("Window resized! Compuhelp");
}
</script>
</head>
<body onResize="demoCompuhelp()">
</body>
</html>