Modern JavaScript Develop And Design Instructors Notes Chapter 8 Event Handling Modern JavaScript...
-
Upload
solomon-edwards -
Category
Documents
-
view
226 -
download
0
description
Transcript of Modern JavaScript Develop And Design Instructors Notes Chapter 8 Event Handling Modern JavaScript...
Modern JavaScriptDevelop And Design
Instructor’s NotesChapter 8 – Event Handling
Modern JavaScript Design And DevelopCopyright © 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
window.addEventListener('load', process, false);window.addEventListener('load', calculate, false);
object.addEventListener('event', functionName, false);
window.removeEventListener('load', process, false);
IE Event Handling
window.attachEvent('onload', process);
object.attachEvent('onevent', functionName);
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 Charactersfunction 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 AccessibilityKeyboard• 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 Pressvar 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;};