1. Modern JavaScript Develop And Design Instructor’s Notes Chapter 8 – Event Handling Modern JavaScript Design And Develop Copyright © 2012 by Larry Ullman

2. 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

3. 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

4. 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

5. The Premise window.onload = init; document.getElementById('theForm').onsubmit = process;

6. Creating Event Handlers inline traditional W3C (DOM Level 2) IE

7. Inline Event Listeners Some Link

8. Traditional Event Handlers window.onload = init; window.onload = function() { // Do whatever. } if (typeof window.onload == 'function') { // Exists! window.onload = null;

9. W3C Event Handling window.addEventListener('load', process, false); window.addEventListener('load', calculate, false); object.addEventListener('event', functionName, false); window.removeEventListener('load', process, false);

10. IE Event Handling window.attachEvent('onload', process); object.attachEvent('onevent', functionName); window.detachEvent('onload', process);

11. 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);

12. Event Types Input Device Keyboard Browser Form Touch

13. Input Device Buttons click mousedown mouseup dblclick contextmenu

14. Input Device Movements mouseout mouseover mousemove

15. Keyboard Events keydown keyup keypress

16. 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); };

17. Browser Events load unload resize scroll copy cut paste

18. Form Events focus blur reset change select

19. Event Accessibility Keyboard focus blur Input Device mouseover mouseout Some Text // JavaScript: addEvent(document.getElementById('link'), 'mouseover', doSomething); addEvent(document.getElementById('link'), 'focus', doSomething);

20. Referencing the Event function someEventHandler(e) { if (typeof e == 'undefined') e = window.event; // Use e. }

21. 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.

22. Key Press var charCode = (typeof e.which == 'number') ? e.which : e.keyCode; String.fromCharCode(charCode);

23. Prevent Default Behavior if (typeof e == 'undefined') e = window.event; if (e.preventDefault) { e.preventDafault(); } else { e.returnValue = false; } return false;

24. Event Phases This is a Title This is a paragraph. This is a link.

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