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?
