JavaScript and HTML Simple Event Handling Jan 14 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 method tells how to send the form data action tells where to send it The tag is input with attribute 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 red 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 Load Applies to Occurs when 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 n n links text areas a key KeyUp Documents images User releases a onKeyUp links text areas key KeyPres Documents images User presses onKeyPres s links text areas or holds down s a key Change Text fields text User changes onChange areas select lists the value of an element 9 Events and event handlers III Event Applies to Occurs when Handler MouseDo wn Documents buttons links onMouseDo wn MouseUp Documents buttons links Click Buttons radio buttons checkboxes submit buttons reset buttons links User depresses a mouse button User releases a mouse button User clicks a form element or link onMouseUp onClick 10 Events and event handlers IV Event Applies to MouseOve Links r MouseOut Areas links Select Text fields text areas Occurs when Handler User moves cursor over a link User moves cursor out of an image map or link User selects form element s input field onMouseOv er onMouseOu t onSelect 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 Focus Applies to Occurs when Windows and all form elements Blur Windows and all form elements Reset Forms User gives element input focus User moves focus to some other element User clicks a Reset button Submit Forms Handler onFocus onBlur onReset 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
View Full Document
Unlocking...