Scribd
Upload
58 views

Events

1. HTML DOM events allow JavaScript code to run in response to user interactions and other browser events like loading. 2. Events are handled by assigning JavaScript functions to HTML elements using event handler properties or addEventListener(). 3. Common events include onclick, onmouseover, onsubmit, and various keyboard and form events. Event handler functions are used to execute code in response to events occurring.

Uploaded by

Sreeprada V
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
58 views

Events

1. HTML DOM events allow JavaScript code to run in response to user interactions and other browser events like loading. 2. Events are handled by assigning JavaScript functions to HTML elements using event handler properties or addEventListener(). 3. Common events include onclick, onmouseover, onsubmit, and various keyboard and form events. Event handler functions are used to execute code in response to events occurring.

Uploaded by

Sreeprada V
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

166

UNIT – 4
JAVASCRIPT EVENTS AND EVENT HANDLING

HTML DOM Events

Events are certain actions performed either by the end user or by the web browser itself. It can
be triggered on any part of a document, whether by a user's interaction or by the
browser. Events are normally used in combination with functions, and the function will not be
executed before the event occurs. In order to make a web page more interactive, the script
needs to be able to access the contents of the document and know when the user is interacting
with it.

DOM Event Handlers

The Document Object Model event is a way of handling events and providing information
about these events to the script. It provides a set of instructions for a standard way of
determining what generated an event, what type of event it was, and when and where the event
occurred in the document. Two common styles are: the generalized addEventListener() and a
set of specific on-event handlers. The on-event handlers are a group of properties offered by
DOM elements to help manage how that element reacts to events. These Event handlers have
names starting with "on", so an event handler for the click event is called "onclick" and an
event handler for the focus event is called "onfocus".

It is important to note that each object can have only one on-event handler for a given event.
This is why addEventListener() is often the better way to get notified of events, especially
when wishing to apply various event handlers independently from each other, even for the same
event and/or to the same element.

Inline HTML Attributes

There are several ways you can attach an eventhandler . Adding specific attributes to a tag is
the easiest way. Inline events are bound to an element by their attribute name, which starts with
the "on" prefix. Not all event types may be bound to all elements. Here is a list of some
common HTML events:

▪ onchange: An HTML element has been changed.

▪ onclick: The user clicks an HTML element.

▪ onmouseover: The user hovers the mouse over an HTML element.

▪ onmouseout: The user moves the mouse away from an HTML element.

▪ onkeydown: The user pushes a keyboard key down.

▪ onload: The browser has finished loading the page.


167

For example, in order to execute some JavaScript when a heading(h1) is clicked, you can use
the following:

Event
JavaScript's interaction with HTML is handled through events that occur when the user or the
browser manipulates a page.
When the page loads, it is called an event. When the user clicks a button, that click too is an
event. Other examples include events like pressing any key, closing a window, resizing a
window, etc.
Developers can use these events to execute JavaScript coded responses, which cause buttons
to close windows, messages to be displayed to users, data to be validated, and virtually any
other type of response imaginable.
Events are a part of the Document Object Model (DOM) Level 3 and every HTML element
contains a set of events which can trigger JavaScript Code.
<!DOCTYPE html>
<html>
<body>
<h1 id="Heading" onclick="alert('You Clicked...!!')">Click Here</h1>
</body>
</html>

When the user clicks on "Heading" text on webpage, you can see the click event fires and the
string of JavaScript code contained in the onclick attribute is executed.

Function Call

When the events occur, if you want to execute a bunch of code, you can put all codes together
in a function and call for the execution.

<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
168

function findSquare(i) {
alert("Square of a given number is : " + (i*i));
}
</script>
<input type="button" value="Click Me" onclick="findSquare (5)" />
</body>
</html>

Event Listener

A function that is called in response to an event is called an event handler . You can then attach
an event handler to an element for a specific event. When the user interacts with an element,
the browser detects whether an event handler is registered for that event type on that element.
Mouse events like click and mousemove are triggered on the majority of browsers and devices.
However, in most smartphones, the mouseover event isn't triggered at all, because they can't
detect a finger hovering over the phone. Some smartphones are adding sensors for that though,
so more smartphones will detect mouseover in the future. The following program demonstrates
how to capture different event types in Javascript .

<!DOCTYPE html>
<html>
<body>
<h1 id="h4" onmouseover="handle(event)">Mouse Over Here !!</h1>
<h1 id="h2" onclick="handle(event)">Click Here !!</h1>
<h1 id="h3" ondblclick="handle(event)">Double Click Here !!</h1>
<script type="text/javascript">
function handle(e) {
alert(e.type);
}
</script>
</body>
</html>
169

More Event Models

The Document Object Model standard provides a large number of events and they can be
grouped into six major categories:

▪ MouseEvents : click, mousedown, mouseup, mousemove, etc.

▪ KeyboardEvents : keypress, keydown, and keyup.

▪ HTMLEvents : load, error, resize, scroll, etc.

▪ Form events : select, change, submit, reset, focus, etc.

▪ UIEvents : focusin and focusout.

▪ MutationEvents : DOMNodeInserted, DOMAttrModified, etc.

onclick Event Type


This is the most frequently used event type which occurs when a user clicks the left button of
his mouse.
Example
<html>
<head>
<script type = "text/javascript">
<!--
function sayHello() {
170

alert("Hello World")
}
//-->
</script>
</head>

<body>
<p>Click the following button and see result</p>
<form>
<input type = "button" onclick = "sayHello()" value = "Say Hello" />
</form>
</body>
</html>
Output
onsubmit Event Type
onsubmit is an event that occurs when you try to submit a form. You can put your form
validation against this event type.
Example
The following example shows how to use onsubmit. Here we are calling a validate() function
before submitting a form data to the webserver. If validate() function returns true, the form
will be submitted, otherwise it will not submit the data.
<html>
<head>
<script type = "text/javascript">
<!--
function validation() {
all validation goes here
.........
return either true or false
}
//-->
171

</script>
</head>
<body>
<form method = "POST" action = "t.cgi" onsubmit = "return validate()">
.......
<input type = "submit" value = "Submit" />
</form>
</body>
</html>
onmouseover and onmouseout
These two event types will help you create nice effects with images or even with text as well.
The onmouseover event triggers when you bring your mouse over any element and
the onmouseout triggers when you move your mouse out from that element. Try the
following example.
<html>
<head>
<script type = "text/javascript">
<!--
function over() {
document.write ("Mouse Over");
}
function out() {
document.write ("Mouse Out");
}
</script>
</head>
<body>
<p>Bring your mouse inside the division to see the result:</p>
<div onmouseover = "over()" onmouseout = "out()">
<h2> This is inside the division </h2>
</div> </body> </html>

You might also like