1 / 43

DOM Events

DOM Events. 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. DOM Events. An event system that allows registration of event listeners

abbott
Download Presentation

DOM Events

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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 3345

  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 3345

  6. Event Example Example 1 <ahref="http://www.opera.com/"onclick="alert('Hello')">Say hello</a> Example 2 <scripttype="text/javascript"> varlink = documents.getElementsByTagName(“a”)[0]; link.addEventListener(“click”, function(event){ alert(“Hello”); }, false); </script> CSE 3345

  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. <a href="http://www.opera.com/" onclick="alert('Hello')">Say hello</a> CSE 3345

  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 3345

  9. Next step in event evolution • Apply events in blocks of javascript code. • Code can now be cached and is reusable. <scripttype="text/javascript"> document.getElementById("my-link").onclick=waveToAudience; functionwaveToAudience(){ alert("Waving like I've never waved before!"); } </script> <aid="my-link"href="http://www.opera.com/">My link</a> CSE 3345

  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){return1;} document.body.onclick=function(event){return2;}//overidding any previously set onclick values CSE 3345

  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 3345

  12. addEventListeners() Has three parameters • type • listener • useCapture document.body.addEvent(type, listener,useCapture); CSE 3345

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

  14. addEventListener() • For the typeparameter, 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 3345

  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 3345

  16. removeEventListener() example Has three parameters • type • listener • 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 3345

  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 3345

  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 3345

  19. Window load event example <scripttype="text/javascript"> 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); </script> CSE 3345

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

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

  22. interfaceEvent { // 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 shorteventPhase; readonly attribute boolean bubbles; readonly attribute boolean cancelable; readonly attribute DOMTimeStamptimeStamp; voidstopPropagation(); voidpreventDefault(); voidinitEvent(DOMStringeventTypeArg, booleancanBubbleArg, booleancancelableArg); // Introduced in DOM Level 3: voidstopImmediatePropagation(); readonly attribute booleandefaultPrevented; readonly attribute booleanisTrusted; }; CSE 3345

  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 3345

  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. W3C Event Model CSE 3345

  26. 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 3345

  27. Default Events Handler • Some elements have default event handlers: • <a> navigates to specified href/anchor • <input type=“submit”> submits a form for you • <labels> give focus to the corresponding input element CSE 3345

  28. 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 3345

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

  30. Stop the link varlinks =document.getElementsByTagName("a"); for(vari=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 3345

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

  32. 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 3345

  33. 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 3345

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

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

  36. Mouse Events • Mousedown • mouseup • click • dblclick • mousemove • mouseover • mouseout CSE 3345

  37. 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 dblclickmakes it almost impossible to figure out what the user did. CSE 3345

  38. 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 mousemovewhen you need it and remove it when you’re done. CSE 3345

  39. 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 3345

  40. Other Cool Mouse tricks • Figure out which mouse button was clicked: • Use the button property of an mouseevent: • 0 is the left button • 1 is the middle button • 2 is the right button CSE 3345

  41. Get mouse coordinate • On the mouse event you can use the following properties: • clientX – the horizontal coordinate relative to the viewport (browser window). • clientY – the vertical coordinate relative to the viewport (browser window). • screenX – the horizontal coordinate relative to the origin of the screen (your monitor). • screenY – the vertical coordinate relative to the origin of the screen (your monitor) CSE 3345

  42. 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 3345

  43. Event References • Handling events with javascript • QuirksMode DOM Events • W3C • Capture vs. Bubble Mode CSE 3345

More Related