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('on event ', 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);
};

• load
• unload
• resize
• scroll
• copy
• cut
• paste
Browser Events

• focus
• blur
• reset
• change
• select
Form Events

Keyboard
• focus
• blur
Event Accessibility
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;
};