Scribd
Upload
45 views

2 Event Model

JavaScript enables the user to respond to events. The onclick event occurs when the user clicks the mouse. The input element creates a button that displays an alert when clicked.

Uploaded by

R Vinob Chander
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
45 views

2 Event Model

JavaScript enables the user to respond to events. The onclick event occurs when the user clicks the mouse. The input element creates a button that displays an alert when clicked.

Uploaded by

R Vinob Chander
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 26

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

2001 Prentice Hall, Inc. All rights reserved.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

<?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!-- Fig 14.1: onclick.html --> <!-- Demonstrating the onclick event --> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>DHTML Event Model - onclick</title>

Outline
Onclick.html

The script element will display an alert dialog box if the onclick event occurs for the element whose id is para. JavaScript enables the user to respond to events. The onclick event occurs when the user clicks the mouse. The p element is assigned an id that can be used to reference it. The input element creates a button that displays an alert when clicked.

<!-- The for attribute declares the script for --> <!-- a certain element, and the event for a --> <!-- certain event. --> <script type = "text/javascript" for = "para" event = "onclick"> <!-alert( "Hi there" ); // --> </script> </head> <body> <!-- The id attribute gives a unique identifier --> <p id = "para">Click on this text!</p> <!-- You can specify event handlers inline --> <input type = "button" value = "Click Me!" onclick = "alert( 'Hi again' )" /> </body> </html>

2001 Prentice Hall, Inc.


All rights reserved.

Outline
Program Output Alert invoked by script (lines 15-20).

Button created by the input element (lines 29-30).

Alert invoked by the input element (lines 29-30).

2001 Prentice Hall, Inc.


All rights reserved.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34

<?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!-- Fig. 14.2: onload.html --> <!-- Demonstrating the onload event --> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>DHTML Event Model - onload</title> <script type = "text/javascript"> <!-var seconds = 0;

Outline
Onload.html

Function startTimer will call function updateTime every 1000 milliseconds.

function startTimer() { // 1000 milliseconds = 1 second window.setInterval( "updateTime()", 1000 ); } function updateTime() { seconds++; soFar.innerText = seconds; } // --> </script> </head> <body onload = "startTimer()">

Method window.setInterval is used to invoke function updateTime every second.

Function updateTime sets the innerText property of the element with soFar as an id to the number of seconds that have elapsed since loading.

<p>Seconds you have spent viewing this page so far: <a id = "soFar"><strong>0</strong></a></p> </body> </html>

The onload event executes when an element finishes loading.


2001 Prentice Hall, Inc.
All rights reserved.

Outline

Program Output

The page will dynamically update the number of seconds that have elapsed since the page has loaded every second.

2001 Prentice Hall, Inc.


All rights reserved.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35

<?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!-- Fig 14.3: onerror.html <!-- Demonstrating the onerror event --> -->

Outline
Onerror.html

<html xmlns = "http://www.w3.org/1999/xhtml"> The onerror event allows the developer <head> <title>DHTML Event Model - onerror</title> to handle errors more elegantly. <script type = "text/javascript"> <!-// Specify that if an onerror event is triggered If an onerror event in // in the window function handleError should execute window.onerror = handleError; triggered the function function doThis() { alrrt( "hi" ); // alert misspelled, creates an error } // The ONERROR event passes three values to the // function: the name of the error, the url of // the file, and the line number. function handleError( errType, errURL, errLineNum ) { // Writes to the status bar at the // bottom of the window. window.status = "Error: " + errType + " on line " + errLineNum; // Returning a value of true cancels the // browsers reaction. return true; } // -->

handleError will be invoked.

The call to display the alert dialog is purposely written incorrectly to invoke the onerror event.

Returning true indicates that the error has been handled successfully.

Function handleError will display the error type and the line that causes the error on the status bar of the browser.
2001 Prentice Hall, Inc.
All rights reserved.

36 37 38 39 40 41 42 43 44 45

</script> </head> <body> <input id = "mybutton" type = "button" value = "Click Me!" onclick = "doThis()" /> </body> </html>

Outline
Onerror.html

C ustom e rro r o utp ut

Program Output

The error created by trying to invoke function doThis is handled by the message in the status bar of the browser.
2001 Prentice Hall, Inc.
All rights reserved.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

<?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!-- Fig. 14.4: onmousemove.html <!-- Demonstrating the onmousemove event --> -->

Outline

Onmousemove.html The innerText property of the

<html xmlns = "http://www.w3.org/1999/xhtml"> coordinates element will be assigned <head> <title>DHTML Event Model - onmousemove event</title>a string containing the name of the <script type = "text/javascript"> element, and the coordinates of the <!-mouse position over the element. function updateMouseCoordinates() { coordinates.innerText = event.srcElement.tagName + " (" + event.offsetX + ", " + event.offsetY + ")"; } // --> </script> The offsetX and offsetY properties of the </head> <body style = "back-groundcolor: wheat" onmousemove = "updateMouseCoordinates()">

event object give the location of the mouse cursor relative to the top-left corner of the object on which the event was triggered.

<span id = "coordinates">(0, 0)</span><br /> <img src = "deitel.gif" style = "position: absolute; top: 100; left: 100" alt = "Deitel" /> </body> </html>

The onmousemove event is invoked every time the user moves the mouse.
2001 Prentice Hall, Inc.
All rights reserved.

Outline
Program Output

Up dated text (keep s chang ing as you move the mo use)

The mouse is over the body of the page as indicated by the text at the top right.

The mouse is over the image on the page as indicated by the text at the top right.
2001 Prentice Hall, Inc.
All rights reserved.

14.6 Rollovers with onmouseover and onmouseout


Property of

10

event

Description

altkey button cancelBubble clientX / clientY ctrlKey offsetX / offsetY propertyName recordset returnValue screenX / screenY shiftKey srcElement type x/y F 14.5 Some event ig.

This value is

true

if Alt key was pressed when event fired.

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 butto ns). Set to

false

to prevent this event from bubbling (see Section 14.9, Event Bubbling). active area where the Web

The coordinates of the mouse cursor inside the client area (i.e., the 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 The name of the property that changed in this event. A reference to a data fields recordset (see Chapter 16, Data Binding). Set to false to cancel the default browser action. The coordinat es 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.

event.

The coordinates of the mouse cursor relative to this elements parent element. object properties.

2001 Prentice Hall, Inc. All rights reserved.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

<?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!-- Fig 14.6: onmouseoverout.html --> <!-- Events onmouseover and onmouseout --> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title> DHTML Event Model - onmouseover and onmouseout </title> <script type = "text/javascript"> <!-captionImage1 = new Image(); captionImage1.src = "caption1.gif"; captionImage2 = new Image(); captionImage2.src = "caption2.gif"; function mOver() { if ( event.srcElement.id == "tableCaption" ) { event.srcElement.src = captionImage2.src; return; } // If the element which triggered onmouseover has // an id, change its color to its id. if ( event.srcElement.id ) event.srcElement.style.color = event.srcElement.id; }

Outline

11

Onmouseoverout.html

The function mOver handles the onmouseover event for the image by setting its src attribute to the src property of the appropriate image.

2001 Prentice Hall, Inc.


All rights reserved.

34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66

function mOut() { if ( event.srcElement.id == "tableCaption" ) { event.srcElement.src = captionImage1.src; return; } // If it has an id, change the text inside to the // text of the id. if ( event.srcElement.id ) event.srcElement.innerText = event.srcElement.id; } document.onmouseover = mOver; document.onmouseout = mOut; // --> </script> </head> <body style = "background-color: wheat"> <h1>Guess the Hex Code's Actual Color</h1> <p>Can you tell a color from its hexadecimal RGB code value? Look at the hex code, guess the color. To see what color it corresponds to, move the mouse over the hex code. Moving the mouse out will display the color name.</p> <table style = "width: 50%; border-style: groove; text-align: center; font-family: monospace; font-weight: bold">

Outline

12

Onmouseoverout.html The function mOut handles the onmouseout event for the image. It works similarly to the mOver function.

This code tests if an id is specified, and if it is, the code changes the color of the element to match the color name in the id.

The onmouseover event occurs when the mouse cursor moves over an element. The onmouseout event occurs when the mouse cursor leaves the element.

2001 Prentice Hall, Inc.


All rights reserved.

67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99

<caption> <img src = "caption1.gif" id = "tableCaption" alt = "Table Caption" /> </caption> <tr> <td><a <td><a <td><a <td><a </tr> <tr> <td><a <td><a <td><a <td><a </tr> <tr> <td><a <td><a <td><a <td><a </tr> <tr> <td><a <td><a <td><a <td><a </tr> </table> </body> </html> id id id id id id id id id id id id id id id id = = = = = = = = = = = = = = = = "Black">#000000</a></td> "Blue">#0000FF</a></td> "Magenta">#FF00FF</a></td> "Gray">#808080</a></td> "Green">#008000</a></td> "Lime">#00FF00</a></td> "Maroon">#800000</a></td> "Navy">#000080</a></td> "Olive">#808000</a></td> "Purple">#800080</a></td> "Red">#FF0000</a></td> "Silver">#C0C0C0</a></td> "Cyan">#00FFFF</a></td> "Teal">#008080</a></td> "Yellow">#FFFF00</a></td> "White">#FFFFFF</a></td>

Outline

13

Onmouseoverout.html

2001 Prentice Hall, Inc.


All rights reserved.

Outline
Program Output

14

Onrollover the text will change to the color of the corresponding hex code.

2001 Prentice Hall, Inc.


All rights reserved.

Outline

15

Program Output

Onmouseout the hex value will be replaced by the color it represents.

2001 Prentice Hall, Inc.


All rights reserved.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35

<?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!-- Fig. 14.7: onfocusblur.html <!-- Demonstrating the onfocus and onblur events --> -->

Outline

16

Onfocusblur.html

<html xmlns = "http://www.w3.org/1999/xhtml"> The script changes the text inside <head> <title>DHTML Event Model - onfocus and onblur</title> the text box in the upper-right <script type = "text/javascript"> corner based on the messageNum <!-passed to helpText. var helpArray = [ "Enter your name in this input box.", "Enter your email address in this input box, " + "in the format user@domain.", "Check this box if you liked our site.", "In this box, enter any comments you would " + "like us to read.", "This button submits the form to the " + "server-side script", "This button clears the form", "This textarea provides context-sensitive " + "help. Click on any input field or use the TAB " + "key to get more information about the " + "input field." ]; function helpText( messageNum ) { myForm.helpBox.value = helpArray[ messageNum ]; } // --> </script> </head>

2001 Prentice Hall, Inc.


All rights reserved.

36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64

<body> <form id = "myForm" action = ""> Name: <input type = "text" name = "name" onfocus = "helpText(0)" onblur = "helpText(6)" /><br /> Email: <input type = "text" name = "email" onfocus = "helpText(1)" onblur = "helpText(6)" /><br /> Click here if you like this site <input type = "checkbox" name = "like" onfocus = "helpText(2)" onblur = "helpText(6)" /><br /><hr /> Any comments?<br /> <textarea name = "comments" rows = "5" cols = "45" onfocus = "helpText(3)" onblur = "helpText(6)"> </textarea><br /> <input type = "submit" value = "Submit" onfocus = "helpText(4)" onblur = "helpText(6)" /> <input type = "reset" value = "Reset" onfocus = "helpText(5)" onblur = "helpText(6)" />

Outline

17

Onfocusblur.html

The onfocus event fires when an element gains focus.

<textarea name = "helpBox" style = "position: absolute; right: 0; top: 0" rows = "4" cols = "45"> This textarea provides context-sensitive help. Click on any input field or use the Tab key to get more information about the input field.</textarea> </form> </body> </html>

The onblur event fires when an element loses focus, which occurs when another control gains the focus.

2001 Prentice Hall, Inc.


All rights reserved.

Outline

18

Program Output

The other elements are currently onblur.

The focus in this form is currently on the email text box as could be seen by the location of the mouse cursor.

2001 Prentice Hall, Inc.


All rights reserved.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34

<?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!-- Fig 14.8: onsubmitreset.html --> <!-- Demonstrating the onsubmit and onreset events --> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title> DHTML Event Model - onsubmit and onreset events </title> <script type = "text/javascript"> <!-var helpArray = [ "Enter your name in this input box.", "Enter your email address in this input box, " + "in the format user@domain.", "Check this box if you liked our site.", "In this box, enter any comments you would " + "like us to read.", "This button submits the form to the " + "server-side script", "This button clears the form", "This textarea provides context-sensitive " + "help. Click on any input field or use the Tab " + "key to get more information about " + "the input field." ]; function helpText( messageNum ) { myForm.helpBox.value = helpArray[ messageNum ]; }

Outline

19

Onsubmitreset.ht ml

2001 Prentice Hall, Inc.


All rights reserved.

35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69

function formSubmit() { window.event.returnValue = false; if ( confirm ( "Are you sure you want to submit?" ) ) window.event.returnValue = true; } function formReset() { window.event.returnValue = false; if ( confirm( "Are you sure you want to reset?" ) window.event.returnValue = true; } // --> </script> </head> <body>

Outline

20

Onsubmitreset.ht ml

The returnValue property is set to false and cancels ) the default action of the event on the element.

A dialog to ask the user to confirm the action is displayed, if the user confirms then the action is executed on the form.

<form id = "myForm" onsubmit = "formSubmit()" onreset = "formReset()" action = ""> Name: <input type = "text" name = "name" onfocus = "helpText(0)" onblur = "helpText(6)" /><br /> Email: <input type = "text" name = "email" onfocus = "helpText(1)" onblur = "helpText(6)" /><br /> Click here if you like this site <input type = "checkbox" name = "like" onfocus = "helpText(2)" onblur = "helpText(6)" /><hr /> Any comments?<br /> <textarea name = "comments" rows = "5" cols = "45" onfocus = "helpText(3)" onblur = "helpText(6)"> </textarea><br /> <input type = "submit" value = "Submit" onfocus = "helpText(4)" onblur = "helpText(6)" />

2001 Prentice Hall, Inc.


All rights reserved.

70 71 72 73 74 75 76 77 78 79 80 81

<input type = "reset" value = "Reset" onfocus = "helpText(5)" onblur = "helpText(6)" /> <textarea name = "helpBox" style = "position: absolute; right:0; top: 0" rows = "4" cols = "45"> This textarea provides context-sensitive help. Click on any input field or use the Tab key to get more information about the input field.</textarea> </form> </body> </html>

Outline

21

Onsubmitreset.ht ml

Program Output

When the user clicks on the Submit button, a dialog pops up asking the user to confirm the submission.

2001 Prentice Hall, Inc.


All rights reserved.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

<?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!-- Fig 14.9: bubbling.html --> <!-- Disabling event bubbling --> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>DHTML Event Model - Event Bubbling</title> <script type = "text/javascript"> <!-function documentClick() { alert( "You clicked in the document" ); } function paragraphClick( value ) { alert( "You clicked the text" ); if ( value ) event.cancelBubble = true; } document.onclick = documentClick; // --> </script> </head>

Outline
Bubbling.html

22

By setting the cancelBubble method to true, disables event bubbling.

2001 Prentice Hall, Inc.


All rights reserved.

32 33 34 35 36 37

<body> <p onclick = "paragraphClick( false )">Click here!</p> <p onclick = "paragraphClick( true )">Click here, too!</p> </body> </html>

Outline
Bubbling.html

23

Program Output Clicking on the first p element triggers line 27 because the onclick event has bubbled up to the document level.

T e vent has bubb led he up to the d ocument le vel

Clicking on the second p element passes a value of true to function paragraphClick, which will disable the event bubbling for this event.
T event ha s be en he cance led

2001 Prentice Hall, Inc.


All rights reserved.

24

14.10 More DHTML Events


E vent Des cription

Clipboard events onbeforecut onbeforecopy onbeforepaste oncopy oncut onabort onpaste Data binding events onafterupdate onbeforeupdate oncellchange ondataavailable ondatasetcha nged ondatasetcomplete onerrorupdate onrowenter onrowexit
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.

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 completed. Fires when available. Fires when finished. a a transfer of data from the data source has

Fires if an error occurs while updating a data field. new row row of of data data from from the the data source has data just source is

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 F 1 .1 ig. 4 0 Dynam H ML events ic T .

2001 Prentice Hall, Inc. All rights reserved.

25

14.10 More DHTML Events


E vent D cription es

Keyboard Events onhelp onkeydown onkeypress onkeyup marquee events onbounce onfinish onstart Mouse events oncontextmenu ondblclick ondrag ondragend ondragenter ondragleave ondragover ondragstart ondrop onmousedown onm ouseup F . 1 .1 ig 4 0
Fires when the user initiates help (i.e., by pressing the Fires when the user pushes down a key. Fires when the user presses a key. Fires when the user ends a key press. Fires when direction. Fires when a Fires when a a scrolling marquee bounces back in the other F1 key).

marquee finishes its scrolling. marquee begins a new loop.

Fires when the context menu Fires when the mouse is double Fires during a mouse drag. Fires when a mouse drag ends.

is shown (right -clicked.

-click).

Fires when something is dragged onto an area. Fires when something is dragged Fires when a drag is held over an area. Fires when a mouse drag begins. Fires when during a drag. a mouse button is released over a valid target out of an area.

Fires when a mouse button is pressed down. Fires when a mouse button is released. Dynam H ML events ic T .

2001 Prentice Hall, Inc. All rights reserved.

26

14.10 More DHTML Events


Event Des cription

Miscellaneous Events onafterprin t onbeforeeditfocus onbeforeprint onbeforeunload onchange onfilterchange onlosecapture onpropertychange onreadystatechange onreset onresize onscroll onselect

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 Fires when a new choice is made in a the element loses focus. was clicked).

select element, or when a text input is changed and

Fires when a filter changes properties or finishes a transition (see Chapter 15, Filters and Transiti ons). Fires when the Fires changes. when releaseCapture the method is invoked. property the of user an element clicks an Fires when the property of an object is changed. readyState resets (i.e.,

Fires when a form <input type = "reset" >).

Fires when the size of an object changes (i.e., the user resizes a window or frame). Fires when a window or frame is scrolled. Fires when textarea ). a text selection begins (applies to input or

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 F 1 .1 ig. 4 0 Dynamic HT events ML .

2001 Prentice Hall, Inc. All rights reserved.

You might also like