1. SE-2840 Dr. Mark L. Hornick 1 Dynamic HTML Handling events from DOM objects

2. Dynamic HTML is about scripting the DOM to change a web page document after it is loaded into a browser SE-2840 Dr. Mark L. Hornick 2 But how do you know when the browser has finished loading the document?

3. SE-2840 Dr. Mark L. Hornick 3 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 See http://www.w3schools.com/tags/ref_eventattributes.asp

4. SE-2840 Dr. Mark L. Hornick 4 Some events associated with HTML elements Window events (valid only in 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 See http://www.w3schools.com/tags/ref_eventattributes.asp

5. SE-2840 Dr. Mark L. Hornick 5 There are several ways to add JavaScript to a button. Method A: onclick specified in HTML The onclick attribute specifies the JavaScript code that will be executed when the button is pressed. In this case, the code to be executed is the call to the onClickHandler() function. The onClickHandler() method must have been defined or linked to from within the section of the page. Note the ( ) following the method name! These are required!!!

6. SE-2840 Dr. Mark L. Hornick 6 Method B: onclick specified in script The onclick attribute specifies the address of the JavaScript function that will be called when the button is pressed. Be sure not to supply ( ) after the function – otherwise, the result of calling the function, rather than the function address, will be used. 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 //Code that executes after page loads: var button = getElementById(“goButton”); button.onclick = onClickHandler; // omit () !!!

7. What if we only wanted a single event handler to handle multiple events, or even multiple events from multiple sources? SE-2840 Dr. Mark L. Hornick 7 The window.event object can be passed as an argument to an event handler

8. Properties of the event object type – a string containing the name of the event The onclick event type is “click”, onmouseover is “mouseover”, etc. target – a reference to the element that caused the event CS-422 Dr. Mark L. Hornick 8