JavaScript and HTMLJavaScript and DOMEventsA simple event handlerCapitalizationCommon eventsExample: Simple rolloverEvents and event handlers IEvents and event handlers IIEvents and event handlers IIIEvents and event handlers IVEvents and event handlers VEvents and event handlers VIBack to the DOMThe DOM hierarchyFields of window, IFields of window, IIMethods of window, IMethods of window, IIFields of document, IFields of document, IIFields of document, IIIFields of the form objectThe EndJan 13, 2019JavaScript and HTMLSimple Event Handling2JavaScript and DOMJavaScript relies on a Document Object Model (DOM) that describes the structure of the web pageThis is not the same as the XML DOMYou can do a lot with a just a little understanding of the DOMYou use the DOM to access elements on the web pageYou can capture events without knowing the DOM at allYou need the DOM to make any changes to the web page3EventsSome (but not all) elements on the web page respond to user interactivity (keystrokes, mouse clicks) by creating eventsDifferent kinds of elements produce different eventsBrowsers are not all alike in what events are producedWe will concentrate on events from HTML form elements and commonly recognized eventsYou can put handlers on HTML form elementsIf the event isn’t generated, the handler does nothingA handler should be very shortMost handlers call a function to do their work4A 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 itThe tag is input with attribute type="button"The name can be used by other JavaScript codeThe value is what appears on the buttononclick is the name of the event being handledThe value of the onclick element is the JavaScript code to executealert pops up an alert box with the given text5CapitalizationJavaScript is case sensitiveHTML is not case sensitiveonclick="alert('You clicked the button!');"The red underlined parts are HTMLThe quoted string is JavaScriptYou will frequently see onclick capitalized as onClickThe Java naming convention is easier to readThis is fine in HTML, but an error if it occurs in JavaScriptAlso note: Since we have a quoted string inside another quoted string, we need both single and double quotes6Common eventsMost HTML elements produce the following events:onClick -- the form element is clickedonDblClick -- the form element is clicked twice in close successiononMouseDown -- the mouse button is pressed while over the form elementonMouseOver -- the mouse is moved over the form element onMouseOut -- the mouse is moved away from the form elementonMouseUp -- the mouse button is released while over the form elementonMouseMove -- the mouse is movedIn JavaScript, these should be spelled in all lowercase7Example: Simple rolloverThe 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';">8Events and event handlers IThe following tables are taken from:http://developer.netscape.com/docs/manuals/js/client/ jsguide/index.htmEvent Applies to Occurs when HandlerLoadDocument body User loads the page in a browseronLoadUnloadDocument body User exits the pageonUnloadErrorImages, window Error on loading an image or a windowonErrorAbortImages User aborts the loading of an imageonAbort9Events and event handlers IIEvent Applies to Occurs when HandlerKeyDownDocuments, images, links, text areasUser depresses a keyonKeyDownKeyUpDocuments, images, links, text areasUser releases a keyonKeyUpKeyPressDocuments, images, links, text areasUser presses or holds down a keyonKeyPressChangeText fields, text areas, select listsUser changes the value of an elementonChange10Events and event handlers IIIEvent Applies to Occurs when HandlerMouseDownDocuments, buttons, linksUser depresses a mouse buttononMouseDownMouseUpDocuments, buttons, linksUser releases a mouse buttononMouseUpClickButtons, radio buttons, checkboxes, submit buttons, reset buttons, linksUser clicks a form element or linkonClick11Events and event handlers IVEvent Applies to Occurs when HandlerMouseOverLinks User moves cursor over a linkonMouseOverMouseOutAreas, links User moves cursor out of an image map or linkonMouseOutSelectText fields, text areasUser selects form element’s input fieldonSelect12Events and event handlers VEvent Applies to Occurs when HandlerMoveWindows User or script moves a windowonMoveResizeWindows User or script resizes a windowonResizeDragDropWindows User drops an object onto the browser windowonDragDrop13Events and event handlers VIEvent Applies to Occurs when HandlerFocusWindows and all form elementsUser gives element input focusonFocusBlurWindows and all form elementsUser moves focus to some other elementonBlurResetForms User clicks a Reset buttononResetSubmitForms User clicks a Submit buttononSubmit14Back to the DOMYou can attach event handlers to HTML elements with very little knowledge of the DOMHowever, to change what is displayed on the page requires knowledge of how to refer to the various elementsThe basic DOM is a W3C standard and is consistent across various browsersMore complex features are browser-dependentThe highest level element (for the current page) is window, and everything else descends from thatEvery JavaScript variable is a field of some objectIn the DOM, all variables are assumed to start with “window.”All other elements can be reached by working down from there15The DOM hierarchySource: http://sislands.com/coin70/week1/dom.htm16Fields of window, Iwindow The current window (not usually needed). self Same as window. parent If in a frame, the immediately enclosing window. top If in a frame, the outermost enclosing window. frames[ ] An array of frames (if any) within the current window. Frames are themselves windows.length The number of frames contained in this window.17Fields of window, IIdocument The HTML
View Full Document
Unlocking...