JavaScript and HTML Simple Event Handling Jan 13 2019 JavaScript and DOM JavaScript relies on a Document Object Model DOM that describes the structure of the web page This is not the same as the XML DOM You can do a lot with a just a little understanding of the DOM You use the DOM to access elements on the web page You can capture events without knowing the DOM at all You need the DOM to make any changes to the web page 2 Events Some but not all elements on the web page respond to user interactivity keystrokes mouse clicks by creating events Different kinds of elements produce different events Browsers are not all alike in what events are produced We will concentrate on events from HTML form elements and commonly recognized events You can put handlers on HTML form elements If the event isn t generated the handler does nothing A handler should be very short Most handlers call a function to do their work 3 A simple event handler form method post action input type button name myButton value Click me onclick alert You clicked the button form The button is enclosed in a form The tag is input type button The name can be used by other JavaScript code The value is what appears on the button onclick is the name of the event being handled The value of the onclick element is the JavaScript code to execute alert pops up an alert box with the given text 4 Capitalization JavaScript is case sensitive HTML is not case sensitive onclick alert You clicked the button The underlined parts are HTML The quoted string is JavaScript You will frequently see onclick capitalized as onClick The Java naming convention is easier to read This is fine in HTML but an error if it occurs in JavaScript Also note Since we have a quoted string inside another quoted string we need both single and double quotes 5 Common events Most HTML elements produce the following events onClick the form element is clicked onDblClick the form element is clicked twice in close succession onMouseDown the mouse button is pressed while over the form element onMouseOver the mouse is moved over the form element onMouseOut the mouse is moved away from the form element onMouseUp the mouse button is released while over the form element onMouseMove the mouse is moved In JavaScript these should be spelled in all lowercase 6 Example Simple rollover The following code will make the text Hello red when the mouse moves over it and blue when the mouse moves away h1 onMouseOver style color red onMouseOut style color blue Hello h1 Image rollovers are just as easy img src Images duke gif width 55 height 68 onMouseOver src Images duke wave gif onMouseOut src Images duke gif 7 Events and event handlers I The following tables are taken from http developer netscape com docs manuals js client jsguide index htm Event Applies to Occurs when Load Document body User loads the page in a browser Unload Document body User exits the page Handler onLoad onUnload Error Images window Error on loading an image or a window onError Abort Images onAbort User aborts the loading of an image 8 Events and event handlers II Event Applies to Occurs when Handler KeyDow Documents images User depresses onKeyDow links text areas a key n n KeyUp Documents images User releases a onKeyUp links text areas key KeyPres Documents images User presses onKeyPres links text areas or holds down s s a key Change Text fields text areas select lists User changes onChange the value of an element 9 Events and event handlers III Event Applies to Occurs when Handler MouseDo wn Documents buttons links User onMouseDo depresses a wn mouse button MouseUp Documents buttons links User releases a mouse button Click Buttons radio User clicks a onClick buttons form element checkboxes or link submit buttons reset buttons links onMouseUp 10 Events and event handlers IV Event Occurs when Handler MouseOve Links r User moves cursor over a link onMouseOv er MouseOut Areas links User moves onMouseOu cursor out of an t image map or link Select Applies to Text fields text areas User selects onSelect form element s input field 11 Events and event handlers V Event Applies to Occurs when Handler Move Windows User or script moves a window onMove Resize Windows User or script resizes a window onResize DragDrop Windows User drops an object onto the browser window onDragDr op 12 Events and event handlers VI Event Applies to Occurs when Handler Focus Windows and all form elements User gives element input focus onFocus Blur Windows and all form elements User moves focus to some other element onBlur Reset Forms User clicks a Reset button onReset Submit Forms User clicks a onSubmit Submit button 13 Back to the DOM You can attach event handlers to HTML elements with very little knowledge of the DOM However to change what is displayed on the page requires knowledge of how to refer to the various elements The basic DOM is a W3C standard and is consistent across various browsers More complex features are browser dependent The highest level element for the current page is window and everything else descends from that Every JavaScript variable is a field of some object In the DOM all variables are assumed to start with window All other elements can be reached by working down from there 14 The DOM hierarchy Source http sislands com coin70 week1 dom ht 15 Fields of window I window self If in a frame the outermost enclosing window frames If in a frame the immediately enclosing window top Same as window parent The current window not usually needed An array of frames if any within the current window Frames are themselves windows length The number of frames contained in this window 16 Fields of window II document location The HTML document being displayed in this window The URL of the document being displayed in this window If you set this property to a new URL that URL will be loaded into this window Calling location reload will refresh the window navigator A reference to the Navigator browser object Some properties of Navigator are appName the name of the browser such as Netscape platform the computer running the browser such as Win32 status A read write string displayed in the status area of the browser window Can be changed with a simple assignment statement 17 Methods of window I alert string confirm string Displays an alert dialog box containing the string and an OK button Displays a confirmation box containing the string along with Cancel and OK buttons Returns true if OK is pressed false if Cancel is pressed prompt string
View Full Document
Unlocking...