Scribd
Upload
22 views20 pages

Event Handler

The document provides an overview of JavaScript events and event listeners, explaining their role in event-driven programming and how they interact with HTML elements. It covers various event types, such as onclick, onsubmit, onmouseover, and onmouseout, along with examples of how to implement them. Additionally, it discusses methods like addEventListener and removeEventListener for managing event listeners in JavaScript.

Uploaded by

jayashree
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
22 views20 pages

Event Handler

The document provides an overview of JavaScript events and event listeners, explaining their role in event-driven programming and how they interact with HTML elements. It covers various event types, such as onclick, onsubmit, onmouseover, and onmouseout, along with examples of how to implement them. Additionally, it discusses methods like addEventListener and removeEventListener for managing event listeners in JavaScript.

Uploaded by

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

JAVA SCRIPT EVENTS AND EVENT

LISTENERS
Introduction
• Event-driven: code executed resulting to user or browser action.
• Event: a notification that something specific occurred -- by
browser or user.
• Event handler: a script implicitly executed in response to event
occurrence.
• Registration: the process of connecting event handler to event.
• Events are JavaScript objects --> names are case sensitive, all
use lowercase only.
(Method write should never be used in event handler. May
cause document to be written over.)
• JavaScript events associated with HTML tag attributes which
can be used to connect to event-handlers 3
• 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.

4
onclick Event Type
• This is the most frequently used event type which occurs when a
user clicks the left button of his mouse. You can put your validation,
warning etc., against this event type.
• One attribute can appear in several different tags:
e.g. onClick can be in <a> and <input>
• HTML element get focus:
1. When user puts mouse cursor over it and presses the left button
2. When user tabs to the element
3. By executing the focus method
4. Element get blurred when another element gets focus
5
• Event handlers can be specified two ways
1. Assigning the event handler script
to an event tag attribute
onClick = "alert('Mouse click!');"
onClick = "myHandler();
2. Assigning them to properties of
JavaScript object associated with
HTML elements.
• The load event: the completion of
loading of a document by browser
• The onload attribute of <body> used to
specify event handler:
• The unload event: used to clean up 6
<!DOCTYPE html>
Example:
<html>
<head>
<script type="text/javascript">
</script>
</head>
<body>
<p>Click the following button and see result</p>
<form>
<input type="button" onclick="sayHello()" value="Say Hello" />
</form>
</body>
</html>

7
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.
• The following Next slide 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.

8
<!DOCTYPE html> Example:
<html><head>
<script type="text/javascript">
</script>
</head><body>
<form method="POST" action="target.html" onsubmit="return validate()">
<input type="submit" value="Submit" />
</form>
</body>
</html>

9
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.

1
0
<!DOCTYPE html>
Example:
<html>
<head>
<script type="text/javascript">
</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>
Event List

1
Focus & Blur Event Example:
[fig.1 Before Click On
<!DOCTYPE html>
<html> That Button]
<head>
<title>Demo</title>
</head>
<body>
<h1>Hello How Are You...?</h1>
<form>
Click This Button<br/>
<input type="button" value="Click Me!"
onclick="myFun()"/><br/>
<input type="text" id="username" onfocus="this.blur()"/><
br/>
</form>
<script type="text/javascript">
function myFun()
{
document.getElementById("username").value="Dhruv";
} [fig.2 After Click On
</script> That Button]
</body>
</html>
addEventListener
• The Event Target method addEventListener() sets up a
function that will be called whenever the specified event
is delivered to the target.
• Common targets are Element, Document, and Window,
but the target may be any object that
supports events (such as XML Http Request).

• addEventListener() works by adding a function or an object that


implements Event Listener to the list of event listeners for the
specified event type on the Event Target on which it's called.

1
Syntax
target.addEventListener(type, listener[, options]);
target.addEventListener(type, listener[, useCapture]);
target.addEventListener(type, listener[, useCapture,
wantsUntrusted ]);
document.getElementById("myBtn").addEventListener("c
lick", displayDate);

1
removeEventListener
• The EventTarget.removeEventListener() method removes
from the EventTarget an event listener previously
registered with EventTarget.addEventListener().
• The event listener to be removed is identified using a
combination of the event type, the event listener function
itself, and various optional options that may affect the
matching process; see Matching event listeners for removal.

1
Syntax
target.removeEventListener(type, listener[, options]);
target.removeEventListener(type, listener[, useCapture]);

1
Other Example Of Events
<!DOCTYPE html>
<html>
<head><title>Display Page</title></head>
<body>
<hr color="orange" />
<center><h1 id="htag">Welcome To ADIT</h1></center>
<hr color="blue" />
<center><button type="button" onclick="Change()">Change</button>
<button type="button" onclick="Hide()">Hide</button>
<button type="button" onclick="Display()">Display</button>
<button type="button" onclick="ChangeColor()">Color Change</button></center>
<hr color="green" />
<script type="text/javascript"> function Change()
{ document.getElementById("htag").innerHTML="Welcome ABC"; } function Display()
{ document.getElementById("htag").style.display="block"; } function Hide()
{ document.getElementById("htag").style.display="none"; } function ChangeColor()
{ document.getElementById("htag").style.color="blue"; }
</script>
</body>
</html>

1
Output

[fig.3 Initial [fig.4 When Click On Change


Page] Or Display]

[fig.5 When Click [fig.6 When Click On


On Hide] Color Change]

1
2

You might also like