Dynamic HTML • Handling (non-apocalyptic) events from DOM objects Jay Urbain, Ph.D. 1
Dynamic HTML is about scripting the DOM to change a web page document after it is loaded into a browser But how do you know when the browser has finished loading the document? 2
JavaScript code hosted in a browser can be triggered to run in response to Events Events are triggered by • Browser actions – Page load/unload – Offline/online – ….many more • User actions within a page – Button press – Mouse-over/click – Text entry – Input focus/blur – …many more 3
Some events associated with HTML elements Window events (valid only in <body> elements) • onload – generated when browser navigates to the page • onunload – …when browser navigates away Input element events • onblur – …when an element loses keyboard focus • onchange – …when a [text] element changes • onfocus – …when an element gains keyboard focus • onreset – …when � reset � -type pushbutton pressed • onsubmit – …when � submit � -type pushbutton pressed Mouse Events (validity restricted to certain elements) • onmouseover – …when cursor passes onto an element • onmouseout – …when cursor passes off an element • onclick – …when a button (or other element) is pressed Keyboard Events (validity restricted to certain elements) • onkeydown – …when a key is pressed • onkeyup – …when a key is released • onkeypress – …after a key is pressed and then released https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Event_handlers http://www.w3schools.com/tags/ref_eventattributes.asp 4
There are several ways to add JavaScript to a button Method A: onclick specified in HTML <input type="button" id= � goButton � value="Push me!" onclick= � onClickHandler() � /> The onclick attribute specifies the JavaScript function that will be called when the button is pressed. The onClickHandler() method must have been defined or linked to from within the <head> section of the page. Note the ( ) following the method name! These are required!!! 5
Method B: onclick specified in script <head> <script> //Code that executes after page loads: var button = getElementById( � goButton � ); button.onclick = onClickHandler; // no () !!! </script> </head> <body> <input type="button" id= � goButton � value="Push me!"/> The onclick attribute specifies the address of the JavaScript function that will be called when the button is pressed. Be sure to not supply “( )” after the function – otherwise, the result will be calling the function, rather assigning the function address. The script that calls getElementById must execute AFTER the page loads to make sure that the button element actually exists! Thus, getElementById is usually placed in the window.onload handler 6
What if we only wanted a single event handler to handle multiple events, or even multiple events from multiple sources? <input type="button" name="b1" value="Create � onclick= � handleEvent(event);" onmouseover= � handleEvent(event); � > <input type="button" name="b2" value= � Modify � onclick= � handleEvent(event);" onmouseover= � handleEvent(event); � > The window.event object can be passed as an argument to an event handler 7
Properties of the event object • type – a string containing the name of the event – The onclick event type is � click � , onmouseover it’s � mouseover � , etc. • target – a reference to the element that caused the event 8
Pass event or element itself var type = event.type; // works for both IE and FF parElement.innerHTML = "Type: " + type + " "; var eventSource; // Event sources have to be retrieved differently for IE and FF if ( event.srcElement ) {// works for IE & Chrome eventSource = event.srcElement; parElement.innerHTML += "IE: "; } else { // works for FF eventSource = event.target; parElement.innerHTML += "FF: "; } Run demo3/ Eventsdemo.html in se2840/demo3 project in WebStorm! 9
Pass event or element itself http://jsfiddle.net/pSS68/ 10
Recommend
More recommend
