1. DOM Events

2. JS Events Outline About Events – Introduction – Registering events – Getting information from events Event order/phases – Preventing default action – Preventing bubble Events in detail – Click – Keyboard – Mouse

3. DOM Events An event system that allows registration of event listeners Describes event flow through a tree structure Provide a common subset of current event systems used in existing browsers.

4. What are events? Events occur when some type of interaction takes place in a web page. (Mouse click, mouse move, key press, etc) Events are also things that happen to the web browser. (Loading a page, window resize, scroll window) With javascript, developers can detect when certain events happen, and cause things to happen in response. CSE 33454

5. How events work Events can be registered to HTML elements, window, and document objects. When an event happens on an element, the web page checks to see if the element has any event handlers attached. If it does, the webpage will call registered event handlers with references and info for each event that occurred. Event handlers then act upon the event with whatever code is specified by the developer. CSE 33455

6. Event Example Example 1 Say hello Example 2 var link = documents.getElementsByTagName(“a”)[0]; link.addEventListener(“click”, function(event) { alert(“Hello”); }, false); CSE 33456

7. Evolution of Events In the early days, events use to be handled directly by HTML elements. Uses inline javascript which is very messy and didn’t allow reusability. Say hello CSE 33457

8. Inline Javascript events onclick ondblclick onmousedown onmousemove onmouseover onmouseout onmouseup onkeydown onkeypress onkeyup onabort onerror onload onresize onscroll onunload onblur onchange onfocus onreset onselect onsubmit CSE 33458

9. Next step in event evolution Apply events in blocks of javascript code. Code can now be cached and is reusable. document.getElementById("my-link").onclick = waveToAudience; function waveToAudience() { alert("Waving like I've never waved before!"); } My link CSE 33459

10. Inline Javascript events You can get/set events using DOM Each event has an associated node property Properties get overwritten when new values are given. document.body.onclick = function(event) {return 1;} document.body.onclick = function(event) {return 2;} //overidding any previously set onclick values CSE 334510

11. Later step in event evolution Introduced in DOM 2 Event spec Created addEventListener() and removeEventListener() Allows developers to register and remove listeners on elements CSE 334511

12. addEventListeners() Has three parameters 1.type 2.listener 3.useCapture document.body.addEvent(type, listener, useCapture); CSE 334512

13. addEventListener() example document.body.addEventListener('click', function (event) { console.log("hello"); }, false); document.body.addEventListener('click', function(event) { console.log("world");}, false); CSE 334513 type listener useCapture

14. addEventListener() For the type parameter, you don’t need to prepend the “on” for each event type. Using addEventListener(), event handlers AREN’T overwritten. – That means you can have multiple listeners on the same element. CSE 334514

15. Type values click dblclick mousedown mousemove mouseover mouseout mouseup keydown keypress keyup abort error load resize scroll unload blur change focus reset select submit CSE 334515

16. removeEventListener() example Has three parameters 1.type 2.listener 3.useCapture document.body.removeEventListener('click', function(event) { console.log("hello"); }, false); document.body.removeEventListener('click', function(event) { console.log("world");}, false); Calling removeEventListener() with arguments which do not identify any currently registered event handlers on a target has no effect. CSE 334516

17. Your turn! Add a click listener to an element so that each time the element is clicked, its top increases by 10px. document.body.style.top = "0px"; document.body.style.top;// "0px"; CSE 334517

18. Window load Event Javascript has a window object that represents an open window in a browser. The window’s load event is triggered when the complete document (DOM) is loaded. – This includes images and elements We should put all logic that deals with accessing the DOM in the window’s load event listener. CSE 334518

19. Window load event example window.addEventListener('load', function(event) { //You should put all javascript logic that access nodes in the DOM inside //this event listener var element = document.getElementById("content"); element.style.color = "rgb(255,255,255); }, false); CSE 334519

20. Getting information from an event The Event interface provides basic contextual information about an event to all registered event handlers.event handlers Supply a parameter to your event handler or use the arguments method to access the Event interface. CSE 334520

21. Getting information from an event function clickHandler(event) { if (event !== undefined) { console.log(event.timeStamp); //1348409181352 console.log(event.type); //click console.log(event.target); // } document.body.addEventListener('click', clickHandler, false); CSE 334521 Event interface

22. CSE 334522 interface Event { // PhaseType const unsigned short NONE = 0; const unsigned short CAPTURING_PHASE = 1; const unsigned short AT_TARGET = 2; const unsigned short BUBBLING_PHASE = 3; readonly attribute DOMString type; readonly attribute EventTarget? target; readonly attribute EventTarget? currentTarget; readonly attribute unsigned short eventPhase; readonly attribute boolean bubbles; readonly attribute boolean cancelable; readonly attribute DOMTimeStamp timeStamp; void stopPropagation(); void preventDefault(); void initEvent(DOMString eventTypeArg, boolean canBubbleArg, boolean cancelableArg); // Introduced in DOM Level 3: void stopImmediatePropagation(); readonly attribute boolean defaultPrevented; readonly attribute boolean isTrusted; };

23. Important Event Interface variables type – the name of the event type (click, focus, blur, etc.) target – the object the event happened on currentTarget – the object associated with the event handler currently being handled. CSE 334523

24. JS Events Outline About Events – Introduction – Registering events – Getting information from events Event order/phases – Preventing default action – Preventing bubble Events in detail – Click – Keyboard – Mouse

25. Event Order There are 2 types of event orders: event capturing and event bubbling. CSE 334525

26. Event Capturing Event order starts with the outer most element in the DOM The webpage then begins working its way inward to the HTML element the event took place on. Event listeners registered for this phase must handle the event before it reaches its target. CSE 334526

27. Event Bubbling Works in the opposite manner of event capturing. A webpage starts looking for event handlers on the targeted html element (where the event occurred) and then bubbles up to the top of the document. Event listeners registered for this phase must handle the event after it has reached its target. CSE 334527

28. W3C Model Allows developers to decide how event order should be handled. Combines both event capturing and event bubbling. CSE 334528

29. CSE 334529 W3C Event Model

30. Target Phase Handling the event must happen when the event reaches the target.

31. Specifying which event order When using the addEventListener() method, you can specify the event order with the useCapture parameter. useCapture === true will specify the event order to be capture. useCapture === false will specify the event order to be bubble. CSE 334531

32. Event Order Demo http://jsfiddle.net/blinkmacalahan/jLb6d/5/ CSE 334532

33. Bubble is used more often than capture In practice people rarely use the capture phase, but there are still times when it might be useful. CSE 334533

34. Default Events Handler Some elements have default event handlers: – navigates to specified href/anchor – submits a form for you – give focus to the corresponding input element CSE 334534

35. What if I want to stop default handlers? It is possible to stop the default action of an element in your event handler. This might be useful for doing client side validation before submitting a form, preventing a user from navigating to a certain link, etc. CSE 334535

36. How to stop the default action Using the Event interface object, call the preventDefault() method. CSE 334536

37. Stop the link var links = document.getElementsByTagName("a"); for (var i=0; i<links.length; i++) { links[i].onclick = function (e) { alert("NOPE! I won't take you there!, I’m calling preventDefault()"); e.preventDefault(); }; } CSE 334537

38. What if I want to stop event bubbling? While handling an event, it is possible to prevent ancestor event handlers from receiving events by cancelling the bubble. Use the Event interface’s stopPropagation() method. CSE 334538

39. Stop bubbling example div.addEventListener('click', function(e) { console.log("I'm going to prevent this event from bubbling up!!!"); e.stopPropagation(); } }, false); CSE 334539

40. JS Events Outline About Events – Introduction – Registering events – Getting information from events Event order/phases – Preventing default action – Preventing bubble Events in detail – Click – Keyboard – Mouse

41. Quickfacts about click events A click event is fired only if a mousedown AND mouseup event happen on an element. That means if you press down on an element and then move your mouse off the element and release no click event will happen. If you press down outside an element and then move your mouse onto the element and release no click event will happen. CSE 334541

42. Keyboard events You can register events for keyboards and detect keydown, keypress, and keydown. keydown – fires when the user depresses a key. It repeats while the user keeps the key depressed. keypress – fires when an actual character is being inserted ($, %, ^). Repeats while key is depressed. keyup – fires when the user releases a key CSE 334542

43. Keyboard events Use the Event property which to determine which key was pressed. which returns a char code value, not a string. Use String.fromCharCode() to convert the which char code into a string.

44. Keyboard event example document.body.onkeydown = function(e) { console.log("key pressed on body is " + String.fromCharCode(e.which)); } CSE 334544

45. Mouse Events 1.Mousedown 2.mouseup 3.click 4.dblclick 5.mousemove 6.mouseover 7.mouseout CSE 334545

46. Dblclick This event is rarely used If you decide to use it, you should never register both a click and dblclick event handler on the same element. Using click and dblclick makes it almost impossible to figure out what the user did. CSE 334546

47. Mousemove mousemove is a great event, but care must be taken when using it. It takes system time to process all mousemove events, and this event is fired every time you move one pixel. Only registered mousemove when you need it and remove it when you’re done. CSE 334547

48. Mouseout and Mouseover These events can be confusing Events may fire at unexpected times with confusing values for the target property. My advice is to use jQuery to handle these events. CSE 334548

49. CSE 334549 After adding a mouseover event handler to the div with id=“ev3”, a mouseover event will fire when moving from ev3 to ev4 and then again from ev4 to span.

50. CSE 334550 This happens due to event bubbling, the mouseover event happens on ev4, but ev4 has no mouseover event so it bubbles up to ev3.

51. Misleading target value In the previous example, the target of the event was ev4. In the next example, the target will be ev4 as well.

52. CSE 334552 Moving from the span element into the ev4 element causes a mouseover event to happen with the target equal to ev4.

53. How do were determine where the mouse came from? W3C added the relatedTarget property to mouseover and mouseout events. This contains the element the mouse came from in case of mouseover, or the element it goes to in case of mouseout.

54. Finding the right layer for mouseout and mouseover Event bubbling causes event handlers to be fired at times when you haven’t actually left a layer. CSE 334554

55. Finding the right layer CSE 334555

56. Finding the right layer Using the target and relatedTarget properties of an event, you can determine when to correctly handle a mouseout event for a layer. CSE 334556

57. Finding the right layer example parent.onmouseout = function(e) { if (e.target.id != 'parent') return; var relTarget = e.relatedTarget; while (relTarget != null && relTarget != e.target && relTarget.nodeName != 'BODY') relTarget= relTarget.parentNode if (relTarget== e.target) return; console.log("we have moused out of the parent node element and no other layer, we found the right layer!!!"); } CSE 334557

58. Other Cool Mouse tricks Figure out which mouse button was clicked: – Use the button property of an mouse event : 0 is the left button 1 is the middle button 2 is the right button CSE 334558

59. Get mouse coordinate On the mouse event you can use the following properties: 1.clientX – the horizontal coordinate relative to the viewport (browser window). 2.clientY – the vertical coordinate relative to the viewport (browser window). 3.screenX – the horizontal coordinate relative to the origin of the screen (your monitor). 4.screenY – the vertical coordinate relative to the origin of the screen (your monitor) CSE 334559

60. Your turn! Create event handlers to allow dragging of an element across the screen. Don’t be wasteful and have a handler for mousemove when you don’t need one. CSE 334560

61. Event References Handling events with javascript QuirksMode DOM Events W3C Capture vs. Bubble Mode CSE 334561