Dynamic HTML Handling events from DOM objects SE2840
Dynamic HTML Handling events from DOM objects SE-2840 Dr. Mark L. Hornick 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? SE-2840 Dr. Mark L. Hornick 2
Javascript code hosted in a browser can be triggered to run in response to Events are triggered by l Browser actions l l Page load/unload Offline/Online …. many more User actions within a page l l l Button press Mouse-over/click Text entry Input focus/blur …many more See http: //www. w 3 schools. com/tags/ref_eventattributes. asp SE-2840 Dr. Mark L. Hornick 3
Some events associated with HTML elements See http: //www. w 3 schools. com/tags/ref_eventattributes. asp 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 SE-2840 Dr. Mark L. Hornick 4
There are several ways to add Java. Script to a button. Method A (BAD): onclick specified in HTML <input type="button" id=“go. Button” value="Push me!" onclick=“on. Click. Handler()”/> The onclick attribute specifies the Java. Script code that will be executed when the button is pressed. In this case, the code to be executed is the call to the on. Click. Handler() function. The on. Click. Handler() 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!!! cript… S a v a J d n a ML T H s e x i m s i h Note that t E S U T ’ N DO SE-2840 Dr. Mark L. Hornick 5
Method B: onclick specified in script <head> <script> //Code that executes after page loads: let button = get. Element. By. Id(“go. Button”); button. onclick = function(){myclass. on. Click. Handler(); }; // OR: button. onclick = () => myclass. on. Click. Handler(); </script> </head> ipt vascr a J d n a L M es HT t a r a p e s t i Preferred as <body> <input type="button" id=“go. Button” value="Push me!"/> The onclick attribute specifies the address of the Java. Script function that will be called when the button is pressed. If the function is a method of a class, wrap that function call within an anonymous function. 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 get. Element. By. Id must execute AFTER the page loads to make sure that the button element actually exists! SE-2840 Dr. Mark L. Hornick Thus, get. Element. By. Id is usually placed in the window. onload handler 6
- Slides: 6
