Downloaded 84 times
![onfocusblur.html
(2 of 3)
26 "input field." ];
27
28 function helpText( messageNum )
29 {
30 myForm.helpBox.value = helpArray[ messageNum ];
31 }
32 // -->
33 </script>
34 </head>
35
36 <body>
37
38 <form id = "myForm" action = "">
39 Name: <input type = "text" name = "name"
40 onfocus = "helpText(0)" onblur = "helpText(6)" /><br />
41 Email: <input type = "text" name = "email"
42 onfocus = "helpText(1)" onblur = "helpText(6)" /><br />
43 Click here if you like this site
44 <input type = "checkbox" name = "like" onfocus =
45 "helpText(2)" onblur = "helpText(6)" /><br /><hr />
46
47 Any comments?<br />
48 <textarea name = "comments" rows = "5" cols = "45"
49 onfocus = "helpText(3)" onblur = "helpText(6)">
50 </textarea><br />](https://image.slidesharecdn.com/ch15dhtmleventmodel-150930234204-lva1-app6891/85/Dynamic-HTML-Event-Model-16-320.jpg)
![onsubmitreset.html
(2 of 4)
26 "help. Click on any input field or use the Tab " +
27 "key to get more information about " +
28 "the input field." ];
29
30 function helpText( messageNum )
31 {
32 myForm.helpBox.value = helpArray[ messageNum ];
33 }
34
35 function formSubmit() {
36 window.event.returnValue = false;
37
38 if ( confirm ( "Are you sure you want to submit?" ) )
39 window.event.returnValue = true;
40 }
41
42 function formReset() {
43 window.event.returnValue = false;
44
45 if ( confirm( "Are you sure you want to reset?" ) )
46 window.event.returnValue = true;
47 }
48 // -->
49 </script>
50 </head>](https://image.slidesharecdn.com/ch15dhtmleventmodel-150930234204-lva1-app6891/85/Dynamic-HTML-Event-Model-20-320.jpg)
![onfocusblur.html
(2 of 3)
26 "input field." ];
27
28 function helpText( messageNum )
29 {
30 myForm.helpBox.value = helpArray[ messageNum ];
31 }
32 // -->
33 </script>
34 </head>
35
36 <body>
37
38 <form id = "myForm" action = "">
39 Name: <input type = "text" name = "name"
40 onfocus = "helpText(0)" onblur = "helpText(6)" /><br />
41 Email: <input type = "text" name = "email"
42 onfocus = "helpText(1)" onblur = "helpText(6)" /><br />
43 Click here if you like this site
44 <input type = "checkbox" name = "like" onfocus =
45 "helpText(2)" onblur = "helpText(6)" /><br /><hr />
46
47 Any comments?<br />
48 <textarea name = "comments" rows = "5" cols = "45"
49 onfocus = "helpText(3)" onblur = "helpText(6)">
50 </textarea><br />](https://image.slidesharecdn.com/ch15dhtmleventmodel-150930234204-lva1-app6891/75/Dynamic-HTML-Event-Model-16-2048.jpg)
![onsubmitreset.html
(2 of 4)
26 "help. Click on any input field or use the Tab " +
27 "key to get more information about " +
28 "the input field." ];
29
30 function helpText( messageNum )
31 {
32 myForm.helpBox.value = helpArray[ messageNum ];
33 }
34
35 function formSubmit() {
36 window.event.returnValue = false;
37
38 if ( confirm ( "Are you sure you want to submit?" ) )
39 window.event.returnValue = true;
40 }
41
42 function formReset() {
43 window.event.returnValue = false;
44
45 if ( confirm( "Are you sure you want to reset?" ) )
46 window.event.returnValue = true;
47 }
48 // -->
49 </script>
50 </head>](https://image.slidesharecdn.com/ch15dhtmleventmodel-150930234204-lva1-app6891/75/Dynamic-HTML-Event-Model-20-2048.jpg)
Uploaded byReem Alattas
Dynamic HTML Event Model
This document discusses various dynamic HTML events including onclick, onload, onmousemove, onfocus, onblur, onsubmit, and onreset. It provides code examples to demonstrate how scripts can respond to different user-initiated events like clicking, loading, mouse movement, gaining/losing focus, submitting and resetting forms. The events allow making content more dynamic and interfaces more intuitive by triggering scripts in response to user actions.
More Related Content
Similar to Dynamic HTML Event Model
Dynamic HTML Event Model
- 1. IPA 1st Semester, 2007-2008 Internet 1 Ch.15 Dynamic HTML: Event Model attasr@ipa.edu.sa
- 2. 09/30/15 © ReemAl-Attas 2 Introduction Event model Scripts can respond to user Content becomes more dynamic Interfaces become more intuitive
- 3. 09/30/15 © ReemAl-Attas 3 Event onclick onClick Invoked when user clicks the mouse on a specific item
- 4. onclick.html (1 of 2) 1<?xml version = "1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4 5 <!-- Fig 14.1: onclick.html --> 6 <!-- Demonstrating the onclick event --> 7 8 <html xmlns = "http://www.w3.org/1999/xhtml"> 9 <head> 10 <title>DHTML Event Model - onclick</title> 11 12 <!-- The for attribute declares the script for --> 13 <!-- a certain element, and the event for a --> 14 <!-- certain event. --> 15 <script type = "text/javascript" for = "para" 16 event = "onclick"> 17 <!-- 18 alert( "Hi there" ); 19 // --> 20 </script> 21 </head> 22 23 <body> 24
- 5. 25 <!-- Theid attribute gives a unique identifier --> 26 <p id = "para">Click on this text!</p> 27 28 <!-- You can specify event handlers inline --> 29 <input type = "button" value = "Click Me!" 30 onclick = "alert( 'Hi again' )" /> 31 32 </body> 33 </html>
- 6. 09/30/15 © ReemAl-Attas 6
- 7. 09/30/15 © ReemAl-Attas 7 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
- 8. onload.html (1 of 2) 1<?xml version = "1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 4 5 <!-- Fig. 14.2: onload.html --> 6 <!-- Demonstrating the onload event --> 7 8 <html xmlns = "http://www.w3.org/1999/xhtml"> 9 <head> 10 <title>DHTML Event Model - onload</title> 11 <script type = "text/javascript"> 12 <!-- 13 var seconds = 0; 14 15 function startTimer() { 16 // 1000 milliseconds = 1 second 17 window.setInterval( "updateTime()", 1000 ); 18 } 19 20 function updateTime() { 21 seconds++; 22 soFar.innerText = seconds; 23 } 24 // --> 25 </script>
- 9. 26 </head> 27 28 <bodyonload = "startTimer()"> 29 30 <p>Seconds you have spent viewing this page so far: 31 <strong id = “soFar”>0</strong></p> 32 33 </body> 34 </html>
- 10. 09/30/15 © ReemAl-Attas 10 Tracking the Mouse with Event onmousemove onmousemove Fires repeatedly when the user moves the mouse over the Web page Gives position of the mouse
- 11. 1 <?xml version= "1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4 5 <!-- Fig. 14.4: onmousemove.html --> 6 <!-- Demonstrating the onmousemove event --> 7 8 <html xmlns = "http://www.w3.org/1999/xhtml"> 9 <head> 10 <title>DHTML Event Model - onmousemove event</title> 11 <script type = "text/javascript"> 12 <!-- 13 function updateMouseCoordinates() 14 { 15 coordinates.innerText = event.srcElement.tagName + 16 " (" + event.offsetX + ", " + event.offsetY + ")"; 17 } 18 // --> 19 </script> 20 </head> 21 22 <body style = "back-groundcolor: wheat" 23 onmousemove = "updateMouseCoordinates()"> 24
- 12. 25 <span id= "coordinates">(0, 0)</span><br /> 26 <img src = "deitel.gif" style = "position: absolute; 27 top: 100; left: 100" alt = "Deitel" /> 28 29 </body> 30 </html>
- 13. 09/30/15 © ReemAl-Attas 13 Rollovers with onmouseover and onmouseout Two more events fired by mouse movements onmouseover Mouse cursor moves over element Onmouseout Mouse cursor leaves element
- 14. 09/30/15 © ReemAl-Attas 14 Form Processing with onfocus and onblur onfocus event fires when element gains focus onblur event fires when element loses focus
- 15. onfocusblur.html (1 of 3) 1<?xml version = "1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4 5 <!-- Fig. 14.7: onfocusblur.html --> 6 <!-- Demonstrating the onfocus and onblur events --> 7 8 <html xmlns = "http://www.w3.org/1999/xhtml"> 9 <head> 10 <title>DHTML Event Model - onfocus and onblur</title> 11 <script type = "text/javascript"> 12 <!-- 13 var helpArray = 14 [ "Enter your name in this input box.", 15 "Enter your email address in this input box, " + 16 "in the format user@domain.", 17 "Check this box if you liked our site.", 18 "In this box, enter any comments you would " + 19 "like us to read.", 20 "This button submits the form to the " + 21 "server-side script", 22 "This button clears the form", 23 "This textarea provides context-sensitive " + 24 "help. Click on any input field or use the TAB " + 25 "key to get more information about the " +
- 16. onfocusblur.html (2 of 3) 26"input field." ]; 27 28 function helpText( messageNum ) 29 { 30 myForm.helpBox.value = helpArray[ messageNum ]; 31 } 32 // --> 33 </script> 34 </head> 35 36 <body> 37 38 <form id = "myForm" action = ""> 39 Name: <input type = "text" name = "name" 40 onfocus = "helpText(0)" onblur = "helpText(6)" /><br /> 41 Email: <input type = "text" name = "email" 42 onfocus = "helpText(1)" onblur = "helpText(6)" /><br /> 43 Click here if you like this site 44 <input type = "checkbox" name = "like" onfocus = 45 "helpText(2)" onblur = "helpText(6)" /><br /><hr /> 46 47 Any comments?<br /> 48 <textarea name = "comments" rows = "5" cols = "45" 49 onfocus = "helpText(3)" onblur = "helpText(6)"> 50 </textarea><br />
- 17. onfocusblur.html (3 of 3) 51<input type = "submit" value = "Submit" onfocus = 52 "helpText(4)" onblur = "helpText(6)" /> 53 <input type = "reset" value = "Reset" onfocus = 54 "helpText(5)" onblur = "helpText(6)" /> 55 56 <textarea name = "helpBox" style = "position: absolute; 57 right: 0; top: 0" readonly = “true” rows = "4" cols = "45"> 58 This textarea provides context-sensitive help. 59 Click on any input field or use the Tab key 60 to get more information about the input field.</textarea> 61 </form> 62 63 </body> 64 </html>
- 18. 09/30/15 © ReemAl-Attas 18 More Form Processing with onsubmit and onreset onsubmit and onreset are useful events for processing forms
- 19. onsubmitreset.html (1 of 4) 1<?xml version = "1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4 5 <!-- Fig 14.8: onsubmitreset.html --> 6 <!-- Demonstrating the onsubmit and onreset events --> 7 8 <html xmlns = "http://www.w3.org/1999/xhtml"> 9 <head> 10 <title> 11 DHTML Event Model - onsubmit and onreset events 12 </title> 13 <script type = "text/javascript"> 14 <!-- 15 var helpArray = 16 [ "Enter your name in this input box.", 17 "Enter your email address in this input box, " + 18 "in the format user@domain.", 19 "Check this box if you liked our site.", 20 "In this box, enter any comments you would " + 21 "like us to read.", 22 "This button submits the form to the " + 23 "server-side script", 24 "This button clears the form", 25 "This textarea provides context-sensitive " +
- 20. onsubmitreset.html (2 of 4) 26"help. Click on any input field or use the Tab " + 27 "key to get more information about " + 28 "the input field." ]; 29 30 function helpText( messageNum ) 31 { 32 myForm.helpBox.value = helpArray[ messageNum ]; 33 } 34 35 function formSubmit() { 36 window.event.returnValue = false; 37 38 if ( confirm ( "Are you sure you want to submit?" ) ) 39 window.event.returnValue = true; 40 } 41 42 function formReset() { 43 window.event.returnValue = false; 44 45 if ( confirm( "Are you sure you want to reset?" ) ) 46 window.event.returnValue = true; 47 } 48 // --> 49 </script> 50 </head>
- 21. onsubmitreset.html (3 of 4) 51 52<body> 53 54 <form id = "myForm" onsubmit = "formSubmit()" 55 onreset = "formReset()" action = ""> 56 Name: <input type = "text" name = "name" 57 onfocus = "helpText(0)" onblur = "helpText(6)" /><br /> 58 Email: <input type = "text" name = "email" 59 onfocus = "helpText(1)" onblur = "helpText(6)" /><br /> 60 Click here if you like this site 61 <input type = "checkbox" name = "like" onfocus = 62 "helpText(2)" onblur = "helpText(6)" /><hr /> 63 64 Any comments?<br /> 65 <textarea name = "comments" rows = "5" cols = "45" 66 onfocus = "helpText(3)" onblur = "helpText(6)"> 67 </textarea><br /> 68 <input type = "submit" value = "Submit" onfocus = 69 "helpText(4)" onblur = "helpText(6)" /> 70 <input type = "reset" value = "Reset" onfocus = 71 "helpText(5)" onblur = "helpText(6)" /> 72 73 <textarea name = "helpBox" style = "position: absolute; 74 right:0; top: 0" rows = "4" cols = "45"> 75 This textarea provides context-sensitive help. Click on
- 22. onsubmitreset.html (4 of 4) 76any input field or use the Tab key to get more 77 information about the input field.</textarea> 78 </form> 79 80 </body> 81 </html>
- 23. 09/30/15 © ReemAl-Attas 23 More DHTML Events Remaining DHTML events and their descriptions
- 24. 09/30/15 © ReemAl-Attas 24 More DHTML Events Event 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.
- 25. 09/30/15 © ReemAl-Attas 25 More DHTML Events Event 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.
- 26. 09/30/15 © ReemAl-Attas 26 More DHTML Events Event 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. Fig. 14.10 Dynamic HTML events.
- 27. 09/30/15 © ReemAl-Attas 27 Assignment 11 Use the events: onmouseover onmouseout to create dynamic rollover image effect. Due Date for A # 11: Next Monday before your lecture.