JavaScript Events
The change in the state of an object is known as an Event. In html, there are various events which represents that some activity is performed by
the user or by the browser. When javascript code is included in HTML, js react over these events and allow the execution. This process of
reacting over the events is called Event Handling. Thus, js handles the HTML events via Event Handlers.
For example, when a user clicks over the browser, add js code, which will execute the task to be performed on the event.
Mouse events:
Event Performed Event Handler Description
click onclick When mouse click on an element
mouseover onmouseover When the cursor of the mouse comes over the element
mouseout onmouseout When the cursor of the mouse leaves an element
mousedown onmousedown When the mouse button is pressed over the element
mouseup onmouseup When the mouse button is released over the element
mousemove onmousemove When the mouse movement takes place.
Keyboard events:
Event Performed Event Handler Description
Keydown & Keyup onkeydown & onkeyup When the user press and then release the key
Form events:
Event Performed Event Description
Handler
focus onfocus When the user focuses on an element
submit onsubmit When the user submits the form
blur onblur When the focus is away from a form element
change onchange When the user modifies or changes the value of a form
element
Window/Document events
Event Event Description
Performed Handler
load onload When the browser finishes the loading of the page
unload onunload When the visitor leaves the current webpage, the browser
unloads it
resize onresize When the visitor resizes the window of the browser
ONCLICK EVENT:
<html>
<head>
<title>Javascript onclick event </title>
</head>
<body>
<script language="Javascript" type="text/Javascript">
function clickevent()
{
document.write("This onclick event");
}
</script>
<form>
<input type="button" onclick="clickevent()" value="Who's this?"/>
</form>
</body>
</html>
Onmouseover
<html>
<head>
<h1> Javascript onmouseover Events </h1>
</head>
<body>
<script language="Javascript" type="text/Javascript">
function mouseoverevent()
{
alert("This is onmouseoverevent");
}
</script>
<p onmouseover="mouseoverevent()"> Keep cursor over me</p>
</body>
</html>
Mouse Out-
<html>
<head>
<script>
<!--
function mouseout() {
alert("Mouse Out")
}
//-->
</script>
</head>
<body>
<p onmouseout = "mouseout()">This is demo text for mouse out event.</p>
</body>
</html>
Ondblclick event
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1 id = "heading" ondblclick = "fun()"> Hello world :):) </h1>
<h2> Double Click the text "Hello world" to see the effect. </h2>
<p> This is an example of using the <b> ondblclick </b> attribute. </p>
<script>
function fun()
document.getElementById("heading").innerHTML = " this is mouse dbclick event ";
</script>
</body>
</html>
Onsubmit Event :
<!DOCTYPE html>
<html>
<body>
<p>When you submit the form, a function is triggered which alerts some text.</p>
<form action="/action_page.php" onsubmit="myFunction()">
Enter name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
<script>
function myFunction()
{
alert("The form was submitted");
</script>
</body>
</html>
onreset
<!DOCTYPE html>
<html>
<body>
<p>When you reset the form, a function is triggered which alerts some text.</p>
<form onreset="myFunction()">
Enter name: <input type="text">
<input type="reset">
</form>
<script>
function myFunction() {
alert("The form was reset");
</script>
</body>
</html>
onfocus
<!DOCTYPE html>
<html>
<body>
Enter your name: <input type="text" onfocus="myFunction(this)">
<p>When the input field gets focus, a function is triggered which changes the background-
color.</p>
<script>
function myFunction(x)
{
x.style.background = "yellow";
}
</script>
</body>
</html>
Onselect
Definition and Usage
The onselect event occurs after some text has been selected in an element.
The onselect event is mostly used on <input type="text"> or <textarea> elements.
<!DOCTYPE html>
<html>
<body>
Select some of the text: <input type="text" value="Hello world!" onselect="myFunction()">
<script>
function myFunction() {
alert("You selected some text!");
}
</script>
</body>
</html>
onerror Event
Definition and Usage
The onerror event is triggered if an error occurs while loading an external file (e.g. a document
or an image).
<!DOCTYPE html>
<html>
<body>
<img src="image.gif" onerror="myFunction()">
<p>A function is triggered if an error occurs when loading the image. The function shows an
alert box with a text.
In this example we refer to an image that does not exist, therefore the onerror event occurs.</p>
<script>
function myFunction() {
alert('The image could not be loaded.');
}
</script>
</body>
</html>
The KeyboardEvent Object
Events that occur when user presses a key on the keyboard, belongs to the KeyboardEvent Object.
Event Types
These event types belongs to the KeyboardEvent Object:
Event Description
onkeydown The event occurs when the user is pressing a key
onkeypress The event occurs when the user presses a key
onkeyup The event occurs when the user releases a key
Onkeydown
The onkeydown event occurs when the user is pressing a key (on the keyboard).
<!DOCTYPE html>
<html>
<body>
<p>A function is triggered when the user is pressing a key in the input field.</p>
<input type="text" onkeydown="myFunction()">
<script>
function myFunction() {
alert("You pressed a key inside the input field");
</script>
</body>
</html>
onkeypres
<!DOCTYPE html>
<html>
<body>
<p>A function is triggered when the user is pressing a key in the input field.</p>
<input type="text" onkeypress="myFunction()">
<script>
function myFunction() {
alert("You pressed a key inside the input field");
</script>
</body>
</html>
onkeyup
!DOCTYPE html>
<html>
<body>
<p>A function is triggered when the user releases a key in the input field. The function transforms the
character to upper case.</p>
Enter your name: <input type="text" id="fname" onkeyup="myFunction()">
<script>
function myFunction() {
var x = document.getElementById("fname");
x.value = x.value.toUpperCase();
</script>
</body>
</html>
