Scribd
Upload
43 views

Event Handling

This document discusses JavaScript events and event handling. It covers the following key points: 1. Events are actions that occur within a web page, like clicks or keyboard presses. JavaScript uses asynchronous callbacks to handle events. 2. There are two phases to event propagation - capturing and bubbling. Event handlers can be defined using addEventListener() or attachEvent() depending on the browser. 3. The Event Object provides contextual information about the event and is available within event handler functions. Methods like stopPropagation() can control event propagation.

Uploaded by

meghan arora
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
43 views

Event Handling

This document discusses JavaScript events and event handling. It covers the following key points: 1. Events are actions that occur within a web page, like clicks or keyboard presses. JavaScript uses asynchronous callbacks to handle events. 2. There are two phases to event propagation - capturing and bubbling. Event handlers can be defined using addEventListener() or attachEvent() depending on the browser. 3. The Event Object provides contextual information about the event and is available within event handler functions. Methods like stopPropagation() can control event propagation.

Uploaded by

meghan arora
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/ 19

JavaScript:

Events and Events Handling

Yuriy Bezgachnyuk
August, 2014
Special Thanks
to John Resig
Agenda

▪Events
– What is event
– Phases of event
– How to handle events
– Event Object
– Keyboard and mouse events
▪Exception handling
Events

▪Event – an action that is fired (initiated)


within a web page.
▪JavaScript is Single Thread
▪JavaScript uses asynchronous callback
Phases of Event

▪Phase #1 – Capturing
▪Phase #2 – Bubbling
Defining Event Handler

▪Old way
window.onload = function() {};
▪New way (add event)
window.addEventListener(”load”,func,false)
window.attachEvent(”onload”,func); // IE < 9
▪We can define event handler only for
objects!!!
The Event Object

▪Contains contextual information about the


current event
▪An object that’s provided, or is available,
inside of every event handler function
▪W3C Standard Browser: e
▪Internet Explorer: window.event
Cancel Bubbling

▪Since you know how event


capturing/bubbling works, let’s explore
how you can take control it.
▪W3C
– e.stopPropagation()
▪IE
– window.event.cancelBubble
▪Live Example (Thanks for J. Resig )
Cancel Bubbling (Scheme)
Cancel Bubbling (Code + Live)
function stopBuuble(e) {
if (e && e.stopPropagation) {
e.stopPropagation();
}
else {
window.event.cancelBubble = true;
}
} var all = document.getElementsByTagName("*");
for (var i = 0;i < all.length;i++) {
all[i].onmouseover = function(e) {
this.style.border = "1px solid red";
stopBuuble(e);
};
all[i].onmouseout = function(e) {
this.style.border = "0px";
stopBuuble(e);
};
}
Overriding Browser Default Event

▪For most events that take place, the


browser has some default action that will
always occur.
– For example, clicking an <a> element will take
you to its associated web page; this is a default
action in the browser. This action will always
occur after both the capturing and the
bubbling event phases
Overriding {code: true, live:true}
function stopDefault(e) {
if (e && e.preventDefault) {
e.preventDefault();
}
else {
window.event.returnValue = false;
}
}
var iframe = document.getElementById("iframe");
var a = document.getElementsByTagName("a");
for (var i = 0;i < a.length;i++) {
a[i].onclick = function(e) {
iframe.src = this.href;
return stopDefault(e);
};
}
Keyboard and Mouse Events
▪ Mouse Events ▪ Keyboard Events
– onMouseDown – onKeyDown
– onMouseMove – onKeyPress
– onMouseOut – onKeyUp
– onMouseOver
– onMouseUp
– onClick
– onDblClick
– onDragDrop
Practice: Handling Mouse events

▪Task: <div> container must change


bg-color after some mouse event
– hover => yellow;
– click => red;
– dblclick =>blue;
– out =>white;
Code
<body>
<div id="container">
</div>
<script type="text/javascript">
var div_c = document.getElementById("container");
div_c.addEventListener("mouseover", a, false);
div_c.addEventListener("mouseout", b, false);
div_c.addEventListener("click", c, false);
div_c.addEventListener("dblclick", d, false);
</script>
</body>
...
function a()
{
div_c.style.backgroundColor = "yellow";
}
Keyboard Events Handling

▪Let’s investigate little part of code


<script type="text/javascript">
window.addEventListener("keydown", handleEvent, false);
window.addEventListener("keypress", handleEvent, false);
window.addEventListener("keyup", handleEvent, false);
</script>

<script type="text/javascript">
function handleEvent(e) {
var e = e || window.event;
console.log(e);
}
</script>
And so what we have…?

▪After investigation previous slide we can


see next features of KB events:
– keydown  keypress  keyup (sequence of
KB events!!!)
– Some KB events have value (not 0) of property
charCode (keypress event only).
– keydown and keyup events generate scan-
code only (keyCode property) which always
similar and don’t depends on KB layout!!!
References and sources

1. John Resig Pro JavaScript Techniques


2. David Flenagan JavaScript
3. Christian Wenz JavaScript Phrasebook
4. https://developer.mozilla.org/
Questions?

You might also like