CH 13-1

University of Computer Studies
Web Technology JavaScript programming

Events[Part-I]
JavaScript Group
Department of Information Technology Supporting and Maintenance
Reference Book
• Professional JavaScript for Web Developers , Third Edition By Nicholas C. Zakas

General lecture Plan
• Section 1 • Section 4
What is JavaScript? Document Object Model(DOM) and
JavaScript in HTML DOM Extensions
• Section 5
Variables, Scope, and Memory
Events, Forms and Canvas
• Section 2 • Section 6
Language Basics Client-side Storage
Reference Types
• Section 3
Understanding Objects
Window Object
Outlines
• Events
• Event Flow
• Event Handlers
Events
• Events that occur when a user or browser handles a page are called events.
• 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.
DOM Event Flow
• Event flow describes the order in which events are received on the page.
• Events has three phases:

- the event capturing phase,
- at the target,
- the event bubbling phase.
DOM Event Flow
Figure: Event Flow Process

Event Bubbling
• In bubbling, the innermost element’s event is handled first and the outer. Consider the
following HTML page:
<!DOCTYPE html>
<html>
<head>
<title>Event Bubbling Example</title>
</head>
<body>
<div id=”myDiv”>Click Me</div>
</body>
</html>
• When you click the <div> element in the page, the click event occurs in the following
order:
1.<div>
2.<body>
3.<html>
4. document
Event Bubbling
<body>
<h1>Bubbling and Capturing phase</h1>
<div>
<button class="child">click me</button>
</div>
<script>
var parent = document.querySelector("div");
var child = document.querySelector(".child");
parent.addEventListener("click",function () {
alert("clicked parent");
});
child.addEventListener("click", function () {
alert("clicked child");
});
</script>
</body>
Event Capturing
• In capturing, The outermost element’s event is handled first and then the inner:
1. Document
2. <html>
3. <body>
4. <div>
Event Capturing
<body>
<h1>Bubbling and Capturing phase</h1>
<div>
<button class="child">click me</button>
</div>
<script>
var parent = document.querySelector("div");
var child = document.querySelector(".child");
parent.addEventListener("click",function () {
alert("clicked parent");
},true);
child.addEventListener("click", function () {
alert("clicked child");
});
</script>
</body>
Event Handlers
• Events are certain actions performed either by the user or by the browser itself.
• Events have names like click, load, and mouseover.
• A function that is called in response to an event is called an event handler (or an event
listener)
• Event handlers have names beginning with “on”.
• Assigning event handlers can be accomplished in a number of different ways.
HTML Event Handlers
• Element can be assigned using an HTML attribute with the name of the event handler.
• The value of the attribute should be some JavaScript code to execute.
• For example,
<input type=“button” value=“Click Me” onclick=“alert(‘Clicked’)” />
DOM Level 0 Event Handlers
• In the traditional model, event handlers can be added/removed by scripts.

• Each event can only have one event handler registered.
• The event is added by assigning the handler name to the event property of the element object.
• To remove an event handler, simply set the property to null:
<input type=“button” value=“Click Me” id=“myBtn”>

<script>
var btn = document.getElementById(“myBtn”);
btn.onclick = function(){
alert(“Clicked”);
};
</script>
DOM Level 2 Event Handlers
• DOM Level 2 Event handlers has two methods:

addEventListener()
removeEventListener()
• Three arguments:
-the event name
-the event handler function
-a Boolean value :the capture phase (true)
the bubble phase (false).
addEventListener()
Example:
<body>
<button id=“myBtn”>Welcome</button>
<script>
document.getElementById(“myBtn”).addEventListener(“click”, function(){
alert(“Welcome to JavaScript”);
}, false);
</script>
</body>
removeEventListener()
Example: function RespondMouseOver() {

<body> document.getElementById("effect").innerHTML +=
"mouseover Event !!" + "<br>";
<h3>Click this button to stop hovering effect !!</h3>
}
<button id="clickIt" onclick="RespondClick()">
function RespondClick() {
Click here</button>
heading.removeEventListener("mouseover",
<h1 id="hoverPara">Hover over this Text !</h1> RespondMouseOver);
<b id="effect"></b> }
<script> </script>
var heading = document.getElementById("hoverPara"); </body>
heading.addEventListener("mouseover",
RespondMouseOver);
Internet Explorer Event Handlers
• Internet Explorer Event Handlers has two methods:
- attachEvent()
- detachEvent().
• Two arguments:
- the event handler name
- the event handler function.
• Since Internet Explorer 8 and earlier support only event bubbling
• Event handlers added using attachEvent() are attached on the bubbling phase.
var btn = document.getElementById(“myBtn”);

btn.attachEvent(“onclick”, function(){
alert(“Clicked”);
});
Cross-Browser Event Handlers
• This method is attached to an object called EventUtil

• The first method to create is called addHandler().
• The addHandler() method accepts three arguments: the element to act on, the name of the
event, and the event handler function
• The second method to create is called removeHandler().
• By using removeHandler() which accepts the same three arguments, to remove a previously
added event handler
Cross-Browser Event Handlers (Cont’d)
var EventUtil = { removeHandler: function(element, type,

addHandler: function(element, type, handler){
handler){ if (element.removeEventListener){
if (element.addEventListener){ element.removeEventListener(type, handler,
element.addEventListener(type, handler, false);
false); }
} else if (element.detachEvent){
else if (element.attachEvent){ element.detachEvent(“on” + type, handler);
element.attachEvent(“on” + type, handler); } else {
} else { element[“on” + type] = null;
element[“on” + type] = handler; }
} }
}, };
Next Lecture Content
• The Event Object

• Event Type
University of Computer Studies
Thank you! 

CH 13-1

Uploaded by

CH 13-1

Uploaded by

University of Computer Studies

Web Technology JavaScript programming

• Professional JavaScript for Web Developers , Third Edition By Nicholas C. Zakas

• Events has three phases:

Figure: Event Flow Process

• In the traditional model, event handlers can be added/removed by scripts.

<input type=“button” value=“Click Me” id=“myBtn”>

• DOM Level 2 Event handlers has two methods:

Example: function RespondMouseOver() {

var btn = document.getElementById(“myBtn”);

• This method is attached to an object called EventUtil

var EventUtil = { removeHandler: function(element, type,

• The Event Object

You might also like