CHAPTER 6 EVENTS

2. CHAPTER 6EVENTS

3. WHAT IS AN EVENT?

4. Events are the browser’s way of saying, “Hey, this just happened.”

5. When an event fires, your script can then react by running code (e.g. a function).

6. By running code when an event fires, your website responds to the user’s actions. It becomes interactive.

7. DIFFERENT EVENT TYPES

8. loadunloaderrorresizescroll USER INTERFACE EVENTS

9. keydownkeyupkeypress KEYBOARD EVENTS

10. clickdblclickmousedownmouseupmouseovermouseout MOUSE EVENTS

11. focus / focusinblur / focusout FOCUS EVENTS

12. inputchangesubmitresetcutcopypasteselect FORM EVENTS

13. HOW EVENTS TRIGGER JAVASCRIPT CODE

14. 1

15. 1 Select the element node(s) the script should respond to

16. 2 1 Select the element node(s) the script should respond to

17. 2 1 Select the element node(s) the script should respond to Indicate the event on the selected node(s) that will trigger a response

18. 3 1 2 Select the element node(s) the script should respond to Indicate the event on the selected node(s) that will trigger a response

19. 1 2 3 Select the element node(s) the script should respond to Indicate the event on the selected node(s) that will trigger a response State the code you want to run when the event occurs

20. BINDING AN EVENT TO AN ELEMENT

21. There are three ways to bind an event to an element:HTML event handler attributesTraditional DOM event handlersDOM Level 2 event listeners

22. The following examples show a blur event on an element stored in a variable called el that triggers a function called checkUsername().

23. <input type=“text” id=“username” onblur=“checkUsername()”> HTML EVENT HANDLER ATTRIBUTES(DO NOT USE)

24. ELEMENT <input type=“text” id=“username” onblur=“checkUsername()”> HTML EVENT HANDLER ATTRIBUTES(DO NOT USE)

25. <input type=“text” id=“username” onblur=“checkUsername()”> HTML EVENT HANDLER ATTRIBUTES(DO NOT USE) EVENT

26. <input type=“text” id=“username” onblur=“checkUsername()”> HTML EVENT HANDLER ATTRIBUTES(DO NOT USE) FUNCTION

27. el.onblur = checkUsername(); TRADITIONAL DOM EVENT HANDLERS

28. el.onblur = checkUsername(); TRADITIONAL DOM EVENT HANDLERS ELEMENT

29. el.onblur = checkUsername(); TRADITIONAL DOM EVENT HANDLERS EVENT

30. el.onblur = checkUsername(); TRADITIONAL DOM EVENT HANDLERS FUNCTION

31. EVENT LISTENERS el.addEventListener(‘blur’, checkUsername, false);

32. EVENT LISTENERS el.addEventListener(‘blur’, checkUsername, false); ELEMENT

33. EVENT LISTENERS el.addEventListener(‘blur’, checkUsername, false); EVENT

34. EVENT LISTENERS el.addEventListener(‘blur’, checkUsername, false); FUNCTION

35. EVENT LISTENERS el.addEventListener(‘blur’, checkUsername, false); BOOLEAN (OPTIONAL)

36. Because you cannot have parentheses after the function names in event handlers or listeners, passing arguments requires a workaround.

37. el.addEventListener(‘blur’, function() { checkUsername(5); }, false); PARAMETERS WITH EVENT LISTENERS

38. el.addEventListener(‘blur’, function() { checkUsername(5); }, false); PARAMETERS WITH EVENT LISTENERS An anonymous function is used as the second argument.

39. el.addEventListener(‘blur’, function() { checkUsername(5); }, false); PARAMETERS WITH EVENT LISTENERS Inside the anonymous function, a named function is called.

40. IE5 - 8 had a different event model and did not support addEventListener() but you can provide fallback code to make event listeners work with older versions of IE.

41. if (el.addEventListener) { el.addEventListener(‘blur’, function() { checkUsername(5); }, false); } else { el.attachEvent(‘onblur’, function() { checkUsername(5); }); } SUPPORTING OLDER VERSIONS OF IE

42. if (el.addEventListener) { el.addEventListener(‘blur’, function() { checkUsername(5); }, false); } else { el.attachEvent(‘onblur’, function() { checkUsername(5); }); } SUPPORTING OLDER VERSIONS OF IE

43. EVENT FLOW

44. HTML elements nest inside other elements. If you hover or click on a link, you will also be hovering or clicking on its parent elements.

45. EVENT BUBBLING

46. EVENT CAPTURING

47. THE EVENT OBJECT

48. When an event occurs,the event object can tell you information about it and which element it happened upon.

49. targettypecancelable PROPERTIES METHODS preventDefault() stopPropagation()

50. 1: EVENT LISTENER CALLS FUNCTION function checkUsername(e) { var target = e.target; } var el = document.getElementById(‘username’); el.addEventListener(‘blur’, checkUsername, false); ELEMENT AN EVENT OCCURRED ON