Event In JavaScript

JAVA SCRIPT EVENTS AND EVENT LISTENERS
A. D. PATEL INSTITUTE OF TECHNOLOGY
WEB TECHNOLOGY(2160708) : A.Y. 2018-19
GUIDED BY:
PROF. HEMANSHU A. PATEL
(DEPT OF IT, ADIT)
PREPARED BY:
KUNAL KATHE
E.R.NO.:160010116021
SHAH DHRUV
E.R NO.:160010116053
CHINTAN SUDANI
E.R.NO.:160010116056
PATEL RUSHIL
E.R.NO.:170014116001
B.E. (IT) SEM - VI
DEPARTMENT OF INFORMATION TECHNOLOGY
A D PATEL INSTITUTE OF TECHNOLOGY (ADIT)
NEW VALLABH VIDYANAGAR, ANAND, GUJARAT

2
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 things before a document is unloaded.

6
Example:
<!DOCTYPE html>
<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
Example:
<!DOCTYPE html>
<html>
<head>
</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.

10
Example:
<!DOCTYPE html>
<html>
<head>
</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>

12
Focus & Blur Event Example:
<!DOCTYPE html>
<html>
<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>
function myFun()
{
document.getElementById("username").value="Dhruv";
}
</script>
</body>
</html>
[fig.1 Before Click On That Button]
[fig.2 After Click On That Button]

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

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

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

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

17
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" />
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>

18
Output
[fig.3 Initial Page] [fig.4 When Click On Change Or Display]
[fig.5 When Click On Hide] [fig.6 When Click On Color Change]

Event In JavaScript

More Related Content

What's hot

Similar to Event In JavaScript

More from ShahDhruv21

Recently uploaded

Event In JavaScript