Page 216 - Web Applications (803) Class 12
P. 216
3.14 JAVASCRIPT EVENTS
The way that JavaScript interacts with HTML is through events that happen whenever a user or browser
modifies a page. A page load is referred to as an event. An event also occurs when a user hits a button. The
actions of pushing any key, closing a window, resizing a window, etc. are other instances.
Thus, an event is defined as a change in an object’s state. There are a number of events in HTML that show
when a user or browser performs a certain action. JavaScript responds to these events when JS code is
embedded in HTML and permits execution. The act of responding to events is known as event handling. As
a result, JavaScript uses event handlers to handle HTML events.
Developers can use these events to run JavaScript coded replies that, among other things, cause buttons to
close windows, users to see messages, data to be validated, and just about any other reaction imaginable.
Events are a component of the Document Object Model (DOM) Level 3 and are present in every HTML
element. These events can be used to execute JavaScript code. Some examples are as follows:
Event Performed Event Handler Description
click onclick When mouse clicks on an element
mouseover onmouseover When the mouse cursor approaches over the
element
mouseout onmouseout When the mouse cursor exits an element
mousemove onmousemove When any mouse movement takes place
load onload When the browser has finished loading the page
unload onunload The browser unloads the current webpage when
the visitor exits.
submit onsubmit The user submits the form
focus onfocus When an element gets selected or user
concentrates on that element
Let us see few examples of event handling through JavaScript code.
Example 1: The simplest and most widely used is the click event which occurs on the click of a button. In
this example, when the button is clicked, the event onclick is triggered. This calls the function display() which
displays the current date and time.
<html>
<script>
function display() {
var d=Date();
alert("The date & time is "+ d)
}
</script>
<body>
<input type="button" onclick=display() value="Click to know Date & Time">
214 Touchpad Web Applications-XII

