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 Some Link

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 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 Some Text // 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 This is a Title This is a paragraph. This is a link.

Delegating Event Handling window.onload = function() { var theForm = document.getElementById('theForm'); theForm.onchange = validateForm; };