Transcript ModernJSDD_CH08

Modern JavaScript
Develop And Design
Instructor’s Notes
Chapter 8 – Event Handling
Modern JavaScript Design And Develop
Copyright © 2012 by Larry Ullman
Objectives
• Create event handlers using the
traditional approach
• Create event handlers using the W3C
approach
• Create event handlers for older versions
of IE
• Recognize bad, outdated ways of
creating event handlers
More Objectives
• Define a function to reliably create event
handlers for all browsers
• Identify the most common events and
event types
• Reference the event itself in JavaScript
code
• Access useful event properties
More Objectives
• Know what key was touched or
character was typed
• Prevent the default browser behavior for
an event
• Comprehend event phases
• Delegate event handling
The Premise
window.onload = init;
document.getElementById('theForm').onsubmit =
process;
Creating Event Handlers
•
•
•
•
inline
traditional
W3C (DOM Level 2)
IE
Inline Event Listeners
<form action="#" method="post" onsubmit="validateForm();">
<a href="somepage.html" onclick="doSomething();">Some
Link</a>
Traditional Event Handlers
window.onload = init;
window.onload = function() {
// Do whatever.
}
if (typeof window.onload == 'function') { // Exists!
window.onload = null;
W3C Event Handling
object.addEventListener('event', functionName, false);
window.addEventListener('load', process, false);
window.addEventListener('load', calculate, false);
window.removeEventListener('load', process, false);
IE Event Handling
object.attachEvent('onevent', functionName);
window.attachEvent('onload', process);
window.detachEvent('onload', process);
Reliable Event Handling
function addEvent(obj, type, fn) {
if (obj && obj.addEventListener) { // W3C
obj.addEventListener(type, fn, false);
} else if (obj && obj.attachEvent) { // Older IE
obj.attachEvent('on' + type, fn);
}
}
addEvent(window, 'load', init);
var theForm = document.getElementById('theForm');
addEvent(theForm, 'submit', process);
Event Types
•
•
•
•
•
Input Device
Keyboard
Browser
Form
Touch
Input Device Buttons
•
•
•
•
•
click
mousedown
mouseup
dblclick
contextmenu
Input Device Movements
• mouseout
• mouseover
• mousemove
Keyboard Events
• keydown
• keyup
• keypress
Counting Characters
function limitText() {
var comments = document.getElementById('comments');
var count = comments.value.length;
document.getElementById('count').value = count;
if (count > 100) {
comments.value = comments.value.slice(0,100);
}
} // End of limitText() function.
window.onload = function() {
addEvent(document.getElementById('comments')('comments'
), 'keyup', limitText);
};
Browser Events
•
•
•
•
•
•
•
load
unload
resize
scroll
copy
cut
paste
Form Events
•
•
•
•
•
focus
blur
reset
change
select
Event Accessibility
Keyboard
• focus
• blur
Input Device
• mouseover
• mouseout
<a href="somepage.html" id="link">Some Text</a>
// JavaScript:
addEvent(document.getElementById('link'), 'mouseover',
doSomething);
addEvent(document.getElementById('link'), 'focus',
doSomething);
Referencing the Event
function someEventHandler(e) {
if (typeof e == 'undefined') e = window.event;
// Use e.
}
Event Properties
• target/srcElement
• type
function reportEvent(e) {
if (typeof e == 'undefined') e = window.event;
var target = e.target || e.srcElement;
var msg = target.nodeName + ': ' + e.type + '\n';
document.getElementById('output').value += msg;
} // End of reportEvent() function.
Key Press
var charCode = (typeof e.which == 'number') ?
e.which : e.keyCode;
String.fromCharCode(charCode);
Prevent Default Behavior
if (typeof e == 'undefined') e = window.event;
if (e.preventDefault) {
e.preventDafault();
} else {
e.returnValue = false;
}
return false;
Event Phases
<div><h1>This is a Title</h1>
<p>This is a paragraph.
<a href="#" id="link">This is a link.</a></p>
</div>
Delegating Event Handling
window.onload = function() {
var theForm = document.getElementById('theForm');
theForm.onchange = validateForm;
};