2004 Prentice Hall, Inc. All rights reserved. Chapter 14 - Dynamic HTML: Event Model Outline 14.1 Introduction 14.2 Event onclick 14.3 Event onload 14.4 Error Handling with onerror 14.5 Tracking the Mouse with Event onmousemove 14.6 Rollovers with onmouseover and onmouseout 14.7 Form Processing with onfocus and onblur 14.8 More Form Processing with onsubmit and onreset 14.9 Event Bubbling 14.10 More DHTML Events 14.11 Web Resources
Chapter 14 - Dynamic HTML: Event Model. Outline 14.1 Introduction 14.2 Event onclick 14.3 Event onload 14.4 Error Handling with onerror 14.5 Tracking the Mouse with Event onmousemove 14.6 Rollovers with onmouseover and onmouseout - PowerPoint PPT Presentation
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
2004 Prentice Hall, Inc. All rights reserved.
Chapter 14 - Dynamic HTML: Event Model
Outline14.1 Introduction14.2 Event onclick14.3 Event onload14.4 Error Handling with onerror14.5 Tracking the Mouse with Event onmousemove14.6 Rollovers with onmouseover and onmouseout14.7 Form Processing with onfocus and onblur14.8 More Form Processing with onsubmit and onreset14.9 Event Bubbling14.10 More DHTML Events14.11 Web Resources
2004 Prentice Hall, Inc. All rights reserved.
Objectives
• In this lesson, you will learn:– To understand the notion of events, event handlers and event
bubbling.
– To be able to create event handlers that respond to mouse and keyboard events.
– To be able to use the event object to be made aware of and, ultimately, respond to user actions.
– To understand how to recognize and respond to the most popular events.
2004 Prentice Hall, Inc. All rights reserved.
14.1 Introduction
• Event model– Scripts can respond to user
– Content becomes more dynamic
– Interfaces become more intuitive
2004 Prentice Hall, Inc. All rights reserved.
14.2 Event onclick • onClick
– Invoked when user clicks the mouse on a specific item
2004 Prentice Hall, Inc.All rights reserved.
OutlineOutline
onclick.html(1 of 2)
1 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
• Two more events fired by mouse movements– onmouseover
• Mouse cursor moves over element
– Onmouseout• Mouse cursor leaves element
2004 Prentice Hall, Inc. All rights reserved.
14.6 Rollovers with onmouseover and onmouseout
Property of event Description altkey This value is true if Alt key was pressed when event fired.
button Returns which mouse button was pressed by user (1: left-mouse button, 2: right-mouse button, 3: left and right buttons, 4: middle button, 5: left and middle buttons, 6: right and middle buttons, 7: all three buttons).
cancelBubble Set to false to prevent this event from bubbling (see Section 14.9, “Event Bubbling”).
clientX / clientY The coordinates of the mouse cursor inside the client area (i.e., the active area where the Web page is displayed, excluding scrollbars, navigation buttons, etc.).
ctrlKey This value is true if Ctrl key was pressed when event fired. offsetX / offsetY The coordinates of the mouse cursor relative to the object that fired the event.
propertyName The name of the property that changed in this event. recordset A reference to a data field’s recordset (see Chapter 16, “Data Binding”). returnValue Set to false to cancel the default browser action. screenX / screenY The coordinates of the mouse cursor on the screen coordinate system. shiftKey This value is true if Shift key was pressed when event fired. srcElement A reference to the object that fired the event. type The name of the event that fired. x / y The coordinates of the mouse cursor relative to this element’s parent
element. Fig. 14.5 Some event object properties.
2004 Prentice Hall, Inc.All rights reserved.
OutlineOutline
onmouseoverout.html(1 of 4)
1 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
14.10 More DHTML EventsEvent Description Clipboard events
onbeforecut Fires before a selection is cut to the clipboard. onbeforecopy Fires before a selection is copied to the clipboard. onbeforepaste Fires before a selection is pasted from the clipboard. oncopy Fires when a selection is copied to the clipboard. oncut Fires when a selection is cut to the clipboard. onabort Fires if image transfer has been interrupted by user. onpaste Fires when a selection is pasted from the clipboard. Data binding events onafterupdate Fires immediately after a databound object has been updated. onbeforeupdate Fires before a data source is updated. oncellchange Fires when a data source has changed. ondataavailable Fires when new data from a data source become available. ondatasetchanged Fires when content at a data source has changed. ondatasetcomplete Fires when transfer of data from the data source has
completed. onerrorupdate Fires if an error occurs while updating a data field. onrowenter Fires when a new row of data from the data source is
available. onrowexit Fires when a row of data from the data source has just
finished. onrowsdelete Fires when a row of data from the data source is deleted. onrowsinserted Fires when a row of data from the data source is inserted. Fig. 14.10 Dynamic HTML events.
2004 Prentice Hall, Inc. All rights reserved.
14.10 More DHTML EventsEvent Description Keyboard events
onhelp Fires when the user initiates help (i.e., by pressing the F1 key). onkeydown Fires when the user pushes down a key. onkeypress Fires when the user presses a key. onkeyup Fires when the user ends a key press. Marquee events onbounce Fires when a scrolling marquee bounces back in the other
direction. onfinish Fires when a marquee finishes its scrolling. onstart Fires when a marquee begins a new loop. Mouse events oncontextmenu Fires when the context menu is shown (right-click). ondblclick Fires when the mouse is double clicked. ondrag Fires during a mouse drag. ondragend Fires when a mouse drag ends. ondragenter Fires when something is dragged onto an area. ondragleave Fires when something is dragged out of an area. ondragover Fires when a drag is held over an area. ondragstart Fires when a mouse drag begins.
ondrop Fires when a mouse button is released over a valid target during a drag.
onmousedown Fires when a mouse button is pressed down. Fig. 14.10 Dynamic HTML events.
2004 Prentice Hall, Inc. All rights reserved.
14.10 More DHTML EventsEvent Description onmouseup Fires when a mouse button is released. Miscellaneous events onafterprint Fires immediately after the document prints. onbeforeeditfocus Fires before an element gains focus for editing. onbeforeprint Fires before a document is printed. onbeforeunload Fires before a document is unloaded (i.e., the window was closed or a link was
clicked). onchange Fires when a new choice is made in a select element, or when a text input is
changed and the element loses focus. onfilterchange Fires when a filter changes properties or finishes a transition (see Chapter 15,
Dynamic HTML: Filters and Transitions). onlosecapture Fires when the releaseCapture method is invoked. onpropertychange Fires when the property of an object is changed. onreadystatechange Fires when the readyState property of an element
changes. onreset Fires when a form resets (i.e., the user clicks a reset button). onresize Fires when the size of an object changes (i.e., the user resizes a window or frame). onscroll Fires when a window or frame is scrolled. onselect Fires when a text selection begins (applies to input or
textarea). onselectstart Fires when the object is selected. onstop Fires when the user stops loading the object. onunload Fires when a page is about to unload.