2. CHAPTER 6 EVENTS

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
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. load unload error resize scroll
USER INTERFACE EVENTS
load unload error resize scroll

9. keydown keyup keypress
KEYBOARD EVENTS
keydown keyup keypress

10. click dblclick mousedown mouseup mouseover mouseout
MOUSE EVENTS
click dblclick mousedown mouseup mouseover mouseout

11. focus / focusin blur / focusout
FOCUS EVENTS
focus / focusin blur / focusout

12. input change submit reset cut copy paste select
FORM EVENTS
input change submit reset cut copy paste select

13. HOW EVENTS TRIGGER JAVASCRIPT CODE

14. 1

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

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

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

18. Select the element node(s) the script should respond to3 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 attributes Traditional DOM event handlers DOM 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. HTML EVENT HANDLER ATTRIBUTES (DO NOT USE)
<input type=“text” id=“username”
onblur=“checkUsername()”>

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

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

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

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

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

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

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

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

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

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

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

35. el.addEventListener(‘blur’, checkUsername, false);
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. PARAMETERS WITH EVENT LISTENERS
el.addEventListener(‘blur’, function() {
checkUsername(5);
}, false);

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

39. PARAMETERS WITH EVENT LISTENERS
el.addEventListener(‘blur’, function() {
checkUsername(5);
}, false);
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. SUPPORTING OLDER VERSIONS OF IE
if (el.addEventListener) {
el.addEventListener(‘blur’, function() {
checkUsername(5);
}, false);
} else {
el.attachEvent(‘onblur’, function() {
}); }

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

43. EVENT FLOW

44. HTML elements nest inside other elements
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. target type cancelable
PROPERTIES
target type cancelable
METHODS
preventDefault()
stopPropagation()

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

51. ELEMENT AN EVENT OCCURRED ON
2: EVENT OBJECT PASSED TO FUNCTION
function checkUsername(e) {
var target = e.target; }
var el = document.getElementById(‘username’);
el.addEventListener(‘blur’, checkUsername, false);

52. ELEMENT AN EVENT OCCURRED ON
3: ELEMENT THAT EVENT HAPPENED ON
function checkUsername(e) {
var target = e.target; }
var el = document.getElementById(‘username’);
el.addEventListener(‘blur’, checkUsername, false);

53. EVENT DELEGATION

54. Creating event listeners for a lot of elements can slow down a page, but event flow allows you to listen for an event on a parent element.

55. Placing an event listener on a container element: Works with new elements Solves limitations with the this keyword Simplifies code