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;};