Dhtml Event Model
This document was uploaded by user and they confirmed that they have the permission to share it. If you are author or own the copyright of this book, please report to us by using this DMCA report form. Report DMCA
Overview
Download & View Dhtml Event Model as PDF for free.
More details
- Words: 3,543
- Pages: 40
Chapter 14 - Dynamic HTML: Event Model Outline 14.1 14.2 14.3 14.4 14.5 14.6 14.7 14.8 14.9 14.10 14.11
Introduction Event onclick Event onload Error Handling with onerror Tracking the Mouse with Event onmousemove Rollovers with onmouseover and onmouseout Form Processing with onfocus and onblur More Form Processing with onsubmit and onreset Event Bubbling More DHTML Events 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.
1
2
3
Outline
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4 5
onclick.html (1 of 2)
-->
7 8 9 10
DHTML Event Model - onclick
11 12
13
14
15
<script type = "text/javascript" for = "para"
16
event = "onclick">
17
20
21
22 23
24
2004 Prentice Hall, Inc. All rights reserved.
25
26
27 28
29
30
onclick = "alert( 'Hi again' )" />
Outline onclick.html (2 of 2)
31 32
33
2004 Prentice Hall, Inc. All rights reserved.
2004 Prentice Hall, Inc. All rights reserved.
14.3 Event onload • onload event – Fires when an element finishes loading – Used in the body element – Initiates a script after the page loads into the client
2004 Prentice Hall, Inc. All rights reserved.
1
2
3
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Outline
4 5
-->
onload.html (1 of 2)
7 8 9
10
DHTML Event Model - onload
11
<script type = "text/javascript">
12
25
2004 Prentice Hall, Inc. All rights reserved.
26
27 28
Outline
29 30
onload.html (2 of 2)
32 33
34
2004 Prentice Hall, Inc. All rights reserved.
14.4 Error Handling with onerror • onerror event – Execute specialized error-handling code
2004 Prentice Hall, Inc. All rights reserved.
1
2
3
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Outline
4 5
6
onerror.html (1 of 2)
7 8 9
10
DHTML Event Model - onerror
11
<script type = "text/javascript">
12
36
37
Outline onerror.html (2 of 2)
38 39
40 41
42
onclick = "doThis()" />
43 44
45
2004 Prentice Hall, Inc. All rights reserved.
14.5 Tracking the Mouse with Event onmousemove • onmousemove – Fires repeatedly when the user moves the mouse over the Web page – Gives position of the mouse
2004 Prentice Hall, Inc. All rights reserved.
1
2
3
Outline
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4 5
6
onmousemove.html (1 of 2)
7 8 9
10
DHTML Event Model - onmousemove event
11
<script type = "text/javascript">
12
19
20
21 22 23
24
2004 Prentice Hall, Inc. All rights reserved.
25
<span id = "coordinates">(0, 0)
26
Outline
28 29
30
onmousemove.html (2 of 2)
2004 Prentice Hall, Inc. All rights reserved.
14.6 Rollovers with onmouseover and onmouseout • 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). Set to false to prevent this event from bubbling (see Section 14.9, “Event Bubbling”). 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.). This value is true if Ctrl key was pressed when event fired. The coordinates of the mouse cursor relative to the object that fired the event.
cancelBubble clientX / clientY ctrlKey offsetX / offsetY propertyName recordset returnValue screenX / screenY shiftKey srcElement type x / y
Fig. 14.5
The name of the property that changed in this event. A reference to a data field’s recordset (see Chapter 16, “Data Binding”). Set to false to cancel the default browser action. The coordinates of the mouse cursor on the screen coordinate system. This value is true if Shift key was pressed when event fired. A reference to the object that fired the event. The name of the event that fired. The coordinates of the mouse cursor relative to this element’s parent element.
Some event object properties.
2004 Prentice Hall, Inc. All rights reserved.
1
2
3
Outline
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4 5
-->
7 8 9 10 11
onmouseoverout .html (1 of 4)
DHTML Event Model - onmouseover and onmouseout<br />
<br />
12<br />
<br />
13
<script type = "text/javascript">
14
50
2004 Prentice Hall, Inc. All rights reserved.
51
52 53
Outline
54 55
56 57
onmouseoverout .html (3 of 4)
62 63
Outline onmouseoverout .html (4 of 4)
97 98
99
2004 Prentice Hall, Inc. All rights reserved.
2004 Prentice Hall, Inc. All rights reserved.
14.7 Form Processing with onfocus and onblur • onfocus event fires when element gains focus • onblur event fires when element loses focus
2004 Prentice Hall, Inc. All rights reserved.
1
2
3
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Outline
4 5
6
onfocusblur.html (1 of 3)
7 8 9
10
DHTML Event Model - onfocus and onblur
11
<script type = "text/javascript">
12
33
34
Outline onfocusblur.html (2 of 3)
35 36
37 38
62 63
64
2004 Prentice Hall, Inc. All rights reserved.
14.8 More Form Processing with onsubmit and onreset • onsubmit and onreset are useful events for
processing forms
2004 Prentice Hall, Inc. All rights reserved.
1
2
3
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Outline
4 5
-->
onsubmitreset.html (1 of 4)
7 8 9 10 11
DHTML Event Model - onsubmit and onreset events<br />
<br />
12<br />
<br />
13
<script type = "text/javascript">
14
49
50
2004 Prentice Hall, Inc. All rights reserved.
51 52
Outline
53 54 55 56 57 58 59
Outline
79 80
81
onsubmitreset.html (4 of 4)
2004 Prentice Hall, Inc. All rights reserved.
14.9 Event Bubbling • Crucial part of the event model • Process whereby events fired in child elements “bubble” up to their parent elements
2004 Prentice Hall, Inc. All rights reserved.
1
2
3
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Outline
4 5
-->
bubbling.html (1 of 2)
7 8 9 10
DHTML Event Model - Event Bubbling
11 12
<script type = "text/javascript">
13
29
30
31 32
Outline bubbling.html (2 of 2)
33 34
35
36
37
2004 Prentice Hall, Inc. All rights reserved.
2004 Prentice Hall, Inc. All rights reserved.
14.10 More DHTML Events • Remaining DHTML events and their descriptions
2004 Prentice Hall, Inc. All rights reserved.
14.10 More DHTML Events Event
Description
Clipboard events onbeforecut onbeforecopy onbeforepaste oncopy oncut onabort onpaste Data binding events
Fires before a selection is cut to the clipboard. Fires before a selection is copied to the clipboard. Fires before a selection is pasted from the clipboard. Fires when a selection is copied to the clipboard. Fires when a selection is cut to the clipboard. Fires if image transfer has been interrupted by user. Fires when a selection is pasted from the clipboard.
onafterupdate onbeforeupdate oncellchange ondataavailable ondatasetchanged ondatasetcomplete
Fires immediately after a databound object has been updated. Fires before a data source is updated. Fires when a data source has changed. Fires when new data from a data source become available. Fires when content at a data source has changed. Fires when transfer of data from the data source has completed. Fires if an error occurs while updating a data field. onerrorupdate Fires when a new row of data from the data source is onrowenter available. Fires when a row of data from the data source has just onrowexit finished. Fires when a row of data from the data source is deleted. onrowsdelete Fires when a row of data from the data source is inserted. onrowsinserted Fig. 14.10 Dynamic HTML events.
2004 Prentice Hall, Inc. All rights reserved.
14.10 More DHTML Events Event
Description
Keyboard events onhelp onkeydown onkeypress onkeyup Marquee events
Fires when the user initiates help (i.e., by pressing the F1 key). Fires when the user pushes down a key. Fires when the user presses a key. Fires when the user ends a key press.
onbounce
Fires when a scrolling marquee bounces back in the other direction. Fires when a marquee finishes its scrolling. Fires when a marquee begins a new loop.
onfinish onstart Mouse events oncontextmenu ondblclick ondrag ondragend ondragenter ondragleave ondragover ondragstart
Fires when the context menu is shown (right-click). Fires when the mouse is double clicked. Fires during a mouse drag. Fires when a mouse drag ends. Fires when something is dragged onto an area. Fires when something is dragged out of an area. Fires when a drag is held over an area. Fires when a mouse drag begins. Fires when a mouse button is released over a valid target ondrop during a drag. Fires when a mouse button is pressed down. onmousedown Fig. 14.10 Dynamic HTML events.
2004 Prentice Hall, Inc. All rights reserved.
14.10 More DHTML Events Event onmouseup Miscellaneous events
Description Fires when a mouse button is released.
onafterprint onbeforeeditfocus onbeforeprint onbeforeunload
Fires immediately after the document prints. Fires before an element gains focus for editing. Fires before a document is printed. Fires before a document is unloaded (i.e., the window was closed or a link was clicked). Fires when a new choice is made in a select element, or when a text input is onchange changed and the element loses focus. Fires when a filter changes properties or finishes a transition (see Chapter 15, onfilterchange Dynamic HTML: Filters and Transitions). Fires when the releaseCapture method is invoked. onlosecapture Fires when the property of an object is changed. onpropertychange onreadystatechange Fires when the readyState property of an element changes. Fires when a form resets (i.e., the user clicks a reset button). onreset Fires when the size of an object changes (i.e., the user resizes a window or frame). onresize Fires when a window or frame is scrolled. onscroll Fires when a text selection begins (applies to input or onselect textarea). Fires when the object is selected. onselectstart Fires when the user stops loading the object. onstop Fires when a page is about to unload. onunload Fig. 14.10 Dynamic HTML events.
2004 Prentice Hall, Inc. All rights reserved.
Introduction Event onclick Event onload Error Handling with onerror Tracking the Mouse with Event onmousemove Rollovers with onmouseover and onmouseout Form Processing with onfocus and onblur More Form Processing with onsubmit and onreset Event Bubbling More DHTML Events 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.
1
2
3
Outline
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4 5
onclick.html (1 of 2)
-->
7 8 9 10
11 12
13
14
15
<script type = "text/javascript" for = "para"
16
event = "onclick">
17
20
21
22 23
24
2004 Prentice Hall, Inc. All rights reserved.
25
26
Click on this text!
27 28
29
30
onclick = "alert( 'Hi again' )" />
Outline onclick.html (2 of 2)
31 32
33
2004 Prentice Hall, Inc. All rights reserved.
2004 Prentice Hall, Inc. All rights reserved.
14.3 Event onload • onload event – Fires when an element finishes loading – Used in the body element – Initiates a script after the page loads into the client
2004 Prentice Hall, Inc. All rights reserved.
1
2
3
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Outline
4 5
-->
onload.html (1 of 2)
7 8 9
10
11
<script type = "text/javascript">
12
25
2004 Prentice Hall, Inc. All rights reserved.
26
27 28
Outline
29 30
Seconds you have spent viewing this page so far:
31
<strong id = “soFar”>0
onload.html (2 of 2)
32 33
34
2004 Prentice Hall, Inc. All rights reserved.
14.4 Error Handling with onerror • onerror event – Execute specialized error-handling code
2004 Prentice Hall, Inc. All rights reserved.
1
2
3
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Outline
4 5
6
onerror.html (1 of 2)
7 8 9
10
11
<script type = "text/javascript">
12
36
37
Outline onerror.html (2 of 2)
38 39
40 41
42
onclick = "doThis()" />
43 44
45
2004 Prentice Hall, Inc. All rights reserved.
14.5 Tracking the Mouse with Event onmousemove • onmousemove – Fires repeatedly when the user moves the mouse over the Web page – Gives position of the mouse
2004 Prentice Hall, Inc. All rights reserved.
1
2
3
Outline
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4 5
6
onmousemove.html (1 of 2)
7 8 9
10
11
<script type = "text/javascript">
12
19
20
21 22 23
24
2004 Prentice Hall, Inc. All rights reserved.
25
<span id = "coordinates">(0, 0)
26
Outline
28 29
30
onmousemove.html (2 of 2)
2004 Prentice Hall, Inc. All rights reserved.
14.6 Rollovers with onmouseover and onmouseout • 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). Set to false to prevent this event from bubbling (see Section 14.9, “Event Bubbling”). 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.). This value is true if Ctrl key was pressed when event fired. The coordinates of the mouse cursor relative to the object that fired the event.
cancelBubble clientX / clientY ctrlKey offsetX / offsetY propertyName recordset returnValue screenX / screenY shiftKey srcElement type x / y
Fig. 14.5
The name of the property that changed in this event. A reference to a data field’s recordset (see Chapter 16, “Data Binding”). Set to false to cancel the default browser action. The coordinates of the mouse cursor on the screen coordinate system. This value is true if Shift key was pressed when event fired. A reference to the object that fired the event. The name of the event that fired. The coordinates of the mouse cursor relative to this element’s parent element.
Some event object properties.
2004 Prentice Hall, Inc. All rights reserved.
1
2
3
Outline
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4 5
-->
7 8 9 10 11
onmouseoverout .html (1 of 4)
13
<script type = "text/javascript">
14
50
2004 Prentice Hall, Inc. All rights reserved.
51
52 53
Outline
54 55
Guess the Hex Code's Actual Color
56 57
Can you tell a color from its hexadecimal RGB code
58
value? Look at the hex code, guess the color. To see
59
what color it corresponds to, move the mouse over the
60
hex code. Moving the mouse out will display the color
61
name.
onmouseoverout .html (3 of 4)
62 63
| #000000 | #0000FF | #FF00FF | #808080 |
| #008000 | #00FF00 | #800000 | #000080 |
| #808000 | #800080 | #FF0000 | #C0C0C0 |
| #00FFFF | #008080 | #FFFF00 | #FFFFFF |
Outline onmouseoverout .html (4 of 4)
97 98
99
2004 Prentice Hall, Inc. All rights reserved.
2004 Prentice Hall, Inc. All rights reserved.
14.7 Form Processing with onfocus and onblur • onfocus event fires when element gains focus • onblur event fires when element loses focus
2004 Prentice Hall, Inc. All rights reserved.
1
2
3
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Outline
4 5
6
onfocusblur.html (1 of 3)
7 8 9
10
11
<script type = "text/javascript">
12
33
34
Outline onfocusblur.html (2 of 3)
35 36
37 38
62 63
64
2004 Prentice Hall, Inc. All rights reserved.
14.8 More Form Processing with onsubmit and onreset • onsubmit and onreset are useful events for
processing forms
2004 Prentice Hall, Inc. All rights reserved.
1
2
3
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Outline
4 5
-->
onsubmitreset.html (1 of 4)
7 8 9 10 11
13
<script type = "text/javascript">
14
49
50
2004 Prentice Hall, Inc. All rights reserved.
51 52
Outline
53 54 55 56 57 58 59
Outline
79 80
81
onsubmitreset.html (4 of 4)
2004 Prentice Hall, Inc. All rights reserved.
14.9 Event Bubbling • Crucial part of the event model • Process whereby events fired in child elements “bubble” up to their parent elements
2004 Prentice Hall, Inc. All rights reserved.
1
2
3
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Outline
4 5
-->
bubbling.html (1 of 2)
7 8 9 10
11 12
<script type = "text/javascript">
13
29
30
31 32
Outline bubbling.html (2 of 2)
33 34
Click here!
35
Click here, too!
36
37
2004 Prentice Hall, Inc. All rights reserved.
2004 Prentice Hall, Inc. All rights reserved.
14.10 More DHTML Events • Remaining DHTML events and their descriptions
2004 Prentice Hall, Inc. All rights reserved.
14.10 More DHTML Events Event
Description
Clipboard events onbeforecut onbeforecopy onbeforepaste oncopy oncut onabort onpaste Data binding events
Fires before a selection is cut to the clipboard. Fires before a selection is copied to the clipboard. Fires before a selection is pasted from the clipboard. Fires when a selection is copied to the clipboard. Fires when a selection is cut to the clipboard. Fires if image transfer has been interrupted by user. Fires when a selection is pasted from the clipboard.
onafterupdate onbeforeupdate oncellchange ondataavailable ondatasetchanged ondatasetcomplete
Fires immediately after a databound object has been updated. Fires before a data source is updated. Fires when a data source has changed. Fires when new data from a data source become available. Fires when content at a data source has changed. Fires when transfer of data from the data source has completed. Fires if an error occurs while updating a data field. onerrorupdate Fires when a new row of data from the data source is onrowenter available. Fires when a row of data from the data source has just onrowexit finished. Fires when a row of data from the data source is deleted. onrowsdelete Fires when a row of data from the data source is inserted. onrowsinserted Fig. 14.10 Dynamic HTML events.
2004 Prentice Hall, Inc. All rights reserved.
14.10 More DHTML Events Event
Description
Keyboard events onhelp onkeydown onkeypress onkeyup Marquee events
Fires when the user initiates help (i.e., by pressing the F1 key). Fires when the user pushes down a key. Fires when the user presses a key. Fires when the user ends a key press.
onbounce
Fires when a scrolling marquee bounces back in the other direction. Fires when a marquee finishes its scrolling. Fires when a marquee begins a new loop.
onfinish onstart Mouse events oncontextmenu ondblclick ondrag ondragend ondragenter ondragleave ondragover ondragstart
Fires when the context menu is shown (right-click). Fires when the mouse is double clicked. Fires during a mouse drag. Fires when a mouse drag ends. Fires when something is dragged onto an area. Fires when something is dragged out of an area. Fires when a drag is held over an area. Fires when a mouse drag begins. Fires when a mouse button is released over a valid target ondrop during a drag. Fires when a mouse button is pressed down. onmousedown Fig. 14.10 Dynamic HTML events.
2004 Prentice Hall, Inc. All rights reserved.
14.10 More DHTML Events Event onmouseup Miscellaneous events
Description Fires when a mouse button is released.
onafterprint onbeforeeditfocus onbeforeprint onbeforeunload
Fires immediately after the document prints. Fires before an element gains focus for editing. Fires before a document is printed. Fires before a document is unloaded (i.e., the window was closed or a link was clicked). Fires when a new choice is made in a select element, or when a text input is onchange changed and the element loses focus. Fires when a filter changes properties or finishes a transition (see Chapter 15, onfilterchange Dynamic HTML: Filters and Transitions). Fires when the releaseCapture method is invoked. onlosecapture Fires when the property of an object is changed. onpropertychange onreadystatechange Fires when the readyState property of an element changes. Fires when a form resets (i.e., the user clicks a reset button). onreset Fires when the size of an object changes (i.e., the user resizes a window or frame). onresize Fires when a window or frame is scrolled. onscroll Fires when a text selection begins (applies to input or onselect textarea). Fires when the object is selected. onselectstart Fires when the user stops loading the object. onstop Fires when a page is about to unload. onunload Fig. 14.10 Dynamic HTML events.
2004 Prentice Hall, Inc. All rights reserved.
Related Documents
Dhtml Event Model
November 2019 9
Dhtml Object Model And Collections
November 2019 6
Dhtml Tutorial
November 2019 11
Dhtml Tutorial
July 2020 8
Event
October 2019 57