450 likes | 825 Views
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
E N D
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 • Describes event flow through a tree structure • Provide a common subset of current event systems used in existing browsers.
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
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
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
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
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
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
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
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
addEventListeners() Has three parameters • type • listener • useCapture document.body.addEvent(type, listener,useCapture); CSE 3345
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
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
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
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
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
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
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
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
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
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
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
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
W3C Event Model CSE 3345
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
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
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
How to stop the default action Using the Event interface object, call the preventDefault()method. CSE 3345
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
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
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
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
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.
Keyboard event example document.body.onkeydown=function(e){ console.log("key pressed on body is "+String.fromCharCode(e.which)); } CSE 3345
Mouse Events • Mousedown • mouseup • click • dblclick • mousemove • mouseover • mouseout CSE 3345
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
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
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
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
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
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
Event References • Handling events with javascript • QuirksMode DOM Events • W3C • Capture vs. Bubble Mode CSE 3345