| When you load an XML document in a browser, the browser can keep track of the success or failure of the operation. When the user clicks a button in a Web page or uses the mouse, the browser keeps track of that, too. How does the browser inform your JavaScript code what's going on? It uses events. For example, when the user clicks a Web page, a mouseDown event occurs. To handle that event in your code, you can connect code to that event. Most HTML tags now support events using attributes such as onMouseDown that you use to connect events to JavaScript code. Here's an example. In this case, when the user clicks the Web page, a mouseDown event occurs. Using the onMouseDown attribute, I can execute JavaScript code to perform some action, such as turning the background of the Web page green. (This example works only in Internet Exploreryou have to add a little additional code to make it work in the Netscape Navigator, as we'll see at the end of this chapter.) Listing ch06_02.html <HTML> <HEAD> <TITLE> Using JavaScript Events </TITLE> </HEAD> <BODY onMouseDown="document.bgColor='green'"> <CENTER> <H1> Click anywhere to turn this page green! </H1> </CENTER> </BODY> </HTML> When the user clicks the Web page, the code document.bgColor='green' is executed, assigning a value of "green" to the document.bgColor property. You can see this page at work in Figure 6-2. Figure 6-2. Using an event in Internet Explorer.  This example is a very simple one because the JavaScript code is in the <BODY> element itself. For longer code, you'll usually store the code in the <SCRIPT> element instead and call that code from elements such as <BODY> . We'll see how that works in the section "Creating Functions in JavaScript," later in this chapter. A great number of events are available. Here's a starter list showing the commonly used ones (note that support for these attributes varies by browser and by HTML tag): -
onBlur Happens when an element loses the input focus. (The element with the focus is the one keystrokes are sent to.) -
onChange Happens when data in an HTML control changes. (HTML controls include text fields, buttons , lists, and so on.) -
onClick Happens when an element is clicked. -
onDblClick Happens when an element is double-clicked. -
onError Happens when an error occurs while executing your code. -
onFocus Happens when an element gets the focus. (The element with the focus is the one keystrokes are sent to.) -
onKeyDown Happens when a key is pressed. -
onKeyPress Happens when a key is pressed and the key code is available to be read in code. -
onKeyUp Happens when a key is released. -
onLoad Happens when the page first loads in the browser. -
onMouseDown Happens when a mouse button is pressed. -
onMouseMove Happens when the mouse moves. -
onMouseOut Happens when the mouse leaves a visible HTML element. -
onMouseOver Happens when the mouse cursor moves over an element. -
onMouseUp Happens when a mouse button is released. -
onMove Happens when an element is moved, either by code or by the user. -
onReset Happens when the user clicks the Reset button in an HTML form. -
onResize Happens when code or the user resizes an element or page. -
onSelect Happens when the user makes a selection. -
onSubmit Happens when the user clicks the Submit button in an HTML form. -
onUnload Happens when the browser unloads a page. You use events to handle user and browser actions in real time in your code, and dozens of events are available. These events are supported by the various HTML tags supported by the browser. You can see which HTML tags support what event attributes in Table 6-1 for Internet Explorer and Table 6-2 for the Netscape Navigator. Table 6-1. Events Supported by Internet Explorer | Element | Event Attributes | | A | onbeforecopy , onbeforecut , onbeforeeditfocus , onbeforefocusenter , onbeforefocusleave , onbeforepaste , onblur , onclick , oncontextmenu , oncontrolselect , oncopy , oncut , ondblclick , ondrag , ondragend , ondragenter , ondragleave , ondragover , ondragstart , ondrop , onfocus , onfocusenter , onfocusleave , onhelp , onkeydown , onkeypress , onkeyup , onlosecapture , onmousedown , onmouseenter , onmouseleave , onmousemove , onmouseout , onmouseover , onmouseup , onpaste , onpropertychange , onreadystatechange , onresize , onresizeend , onresizestart , onselectstart | | BODY | onafterprint , onbeforecut , onbeforefocusenter , onbeforefocusleave , onbeforepaste , onbeforeprint , onbeforeunload , onclick , oncontextmenu , oncontrolselect , oncut , ondblclick , ondrag , ondragend , ondragenter , ondragleave , ondragover , ondragstart , ondrop | | BUTTON | onbeforecut , onbeforeeditfocus , onbeforefocusenter , onbeforefocusleave , onbeforepaste , onblur , onclick , oncontextmenu , oncontrolselect , oncut , ondblclick , ondragenter , ondragleave , ondragover , ondrop , onfilterchange , onfocus , onfocusenter , onfocusleave , onhelp , onkeydown , onkeypress , onkeyup , onlosecapture , onmousedown , onmouseenter , onmouseleave , onmousemove , onmouseout , onmouseover , onmouseup , onpaste , onpropertychange , onreadystatechange , onresize , onresizeend , onresizestart , onselectstart | | DIV | onbeforecopy , onbeforecut , onbeforeeditfocus , onbeforefocusenter , onbeforefocusleave , onbeforepaste , onblur , onclick , oncontextmenu , oncontrolselect , oncopy , oncut , ondblclick , ondrag , ondragend , ondragenter , ondragleave , ondragover , ondragstart , ondrop , onfilterchange , onfocus , onfocusenter , onfocusleave , onhelp , onkeydown , onkeypress , onkeyup , onlayoutcomplete , onlosecapture , onmousedown , onmouseenter , onmouseleave , onmousemove , onmouseout , onmouseover , onmouseup , onpaste , onpropertychange , onreadystatechange , onresize , onresizeend , onresizestart , onscroll , onselectstart | | FORM | onbeforecopy , onbeforecut , onbeforefocusenter , onbeforefocusleave , onbeforepaste , onblur , onclick , oncontextmenu , oncontrolselect , oncopy , oncut , ondblclick , ondrag , ondragend , ondragenter , ondragleave , ondragover , ondragstart , ondrop , onfocus , onfocusenter , onfocusleave , onhelp , onkeydown , onkeypress , onkeyup , onlosecapture , onmousedown , onmouseenter , onmouseleave , onmousemove , onmouseout , onmouseover , onmouseup , onpaste , onpropertychange , onreadystatechange , onreset , onresize , onresizeend , onresizestart , onselectstart , onsubmit | | FRAME | onbeforefocusenter , onbeforefocusleave , onblur , oncontrolselect , onfocus , onfocusenter , onfocusleave , onresize , onresizeend , onresizestart | | IFRAME | onbeforefocusenter , onbeforefocusleave , onblur , oncontrolselect , onfocus , onfocusenter , onfocusleave , onresizeend , onresizestart | | IMG | onabort , onbeforecopy , onbeforecut , onbeforefocusenter , onbeforefocusleave , onbeforepaste , onblur , onclick , oncontextmenu , oncontrolselect , oncopy , oncut , ondblclick , ondrag , ondragend , ondragenter , ondragleave , ondragover , ondragstart , ondrop , onerror , onfilterchange , onfocus , onfocusenter , onfocusleave , onhelp , onload , onlosecapture , onmousedown , onmouseenter , onmouseleave , onmousemove , onmouseout , onmouseover , onmouseup , onpaste , onpropertychange , onreadystatechange , onresize , onresizeend , onresizestart , onselectstart | | INPUT (button) | onbeforecut , onbeforeeditfocus , onbeforefocusenter , onbeforefocusleave , onbeforepaste , onblur , onclick , oncontextmenu , oncontrolselect , oncut , ondblclick , ondrag , ondragend , ondragenter , ondragleave , ondragover , ondragstart , ondrop , onfilterchange , onfocus , onfocusenter , onfocusleave , onhelp , onkeydown , onkeypress , onkeyup , onlosecapture , onmousedown , onmouseenter , onmouseleave , onmousemove , onmouseout , onmouseover , onmouseup , onpaste , onpropertychange , onreadystatechange , onresize , onresizeend , onresizestart , onselectstart | | INPUT (check box) | onbeforecut , onbeforeeditfocus , onbeforefocusenteronbeforefocusleave , onbeforepaste , onblur , onclick , oncontextmenu , oncontrolselect , oncut , ondblclick , ondrag , ondragend , ondragenter , ondragleave , ondragover , ondragstart , ondrop , onfilterchange , onfocus , onfocusenter , onfocusleave , onhelp , onkeydown , onkeypress , onkeyup , onlosecapture , onmousedown , onmouseenter , onmouseleave , onmousemove , onmouseout , onmouseover , onmouseup , onpaste , onpropertychange , onreadystatechange , onresizeend , onresizestart , onselectstart | | INPUT (radio button) | onbeforecut , onbeforeeditfocus , onbeforefocusenter , onbeforefocusleave , onbeforepaste , onblur , onclick , oncontextmenu , oncontrolselect , oncut , ondblclick , ondrag , ondragend , ondragenter , ondragleave , ondragover , ondragstart , ondrop , onfilterchange , onfocus , onfocusenter , onfocusleave , onhelp , onkeydown , onkeypress , onkeyup , onlosecapture , onmousedown , onmouseenter , onmouseleave , onmousemove , onmouseout , onmouseover , onmouseup , onpaste , onpropertychange , onreadystatechange , onresizeend , onresizestart , onselectstart | | INPUT (submit button) | onbeforecut , onbeforeeditfocus , onbeforefocusenter , onbeforefocusleave , onbeforepaste , onblur , onclick , oncontextmenu , oncontrolselect , oncut , ondblclick , ondrag , ondragend , ondragenter , ondragleave , ondragover , ondragstart , ondrop , onfilterchange , onfocus , onfocusenter , onfocusleave , onhelp , onkeydown , onkeypress , onkeyup , onlosecapture , onmousedown , onmouseenter , onmouseleave , onmousemove , onmouseout , onmouseover , onmouseup , onpaste , onpropertychange , onreadystatechange , onresize , onresizeend , onresizestart , onselectstart | | INPUT (text field) | onafterupdate , onbeforecut , onbeforeeditfocus , onbeforefocusenter , onbeforefocusleave , onbeforepaste , onbeforeupdate , onblur , onchange , onclick , oncontextmenu , oncontrolselect , oncut , ondblclick , ondrag , ondragend , ondragenter , ondragleave , ondragover , ondragstart , ondrop , onerrorupdate , onfilterchange , onfocus , onfocusenter , onfocusleave , onhelp , onkeydown , onkeypress , onkeyup , onlosecapture , onmousedown , onmouseenter , onmouseleave , onmousemove , onmouseout , onmouseover , onmouseup , onpaste , onpropertychange , onreadystatechange , onresize , onresizeend , onresizestart , onselect , onselectstart | | LI | onbeforecopy , onbeforecut , onbeforefocusenter , onbeforefocusleave , onbeforepaste , onblur , onclick , oncontextmenu , oncontrolselect , oncopy , oncut , ondblclick , ondrag , ondragend , ondragenter , ondragleave , ondragover , ondragstart , ondrop , onfocus , onfocusenter , onfocusleave , onhelp , onkeydown , onkeypress , onkeyup , onlayoutcomplete , onlosecapture , onmousedown , onmouseenter , object , onmouseleave , onmousemove , onmouseout , onmouseover , onmouseup , onpaste , onpropertychange , onreadystatechange , onresize , onresizeend , onresizestart , onselectstart | | MARQUEE | onbeforecut , onbeforeeditfocus , onbeforefocusenter , onbeforefocusleave , onbeforepaste , onblur , onbounce , oncontextmenu , oncontrolselect , oncut , ondblclick , ondrag , ondragend , ondragenter , ondragleave , ondragover , ondragstart , ondrop , onfilterchange , onfinish , onfocus , onfocusenter , onfocusleave , onhelp , onkeydown , onkeypress , onkeyup , onlosecapture , onmousedown , onmouseenter , onmouseleave , onmousemove , onmouseout , onmouseover , onmouseup , onpaste , onpropertychange , onreadystatechange , onresize , onresizeend , onresizestart , onscroll , onselectstart , onstart | | OBJECT | onbeforeeditfocus , onbeforefocusenter , onbeforefocusleave , onblur , oncellchange , onclick , oncontrolselect , ondataavailable , ondatasetchanged , ondatasetcomplete , ondblclick , ondrag , ondragend , ondragenter , ondragleave , ondragover , ondragstart , ondrop , onerror , onfocus , onfocusenter , onfocusleave , onkeydown , onkeypress , onkeyup , onlosecapture , onpropertychange , onreadystatechange , onresize , onresizeend , onresizestart , onrowenter , onrowexit , onrowsdelete , onrowsinserted , onscroll , onselectstart | | P | onbeforecopy , onbeforecut , onbeforefocusenter , onbeforefocusleave , onbeforepaste , onblur , onclick , oncontextmenu , oncontrolselect , oncopy , oncut , ondblclick , ondrag , ondragend , ondragenter , ondragleave , ondragover , ondragstart | | PRE | onbeforecopy , onbeforecut , onbeforefocusenter , onbeforefocusleave , onbeforepaste , onblur , onclick , oncontextmenu , oncontrolselect , oncopy , oncut , ondblclick , ondrag , ondragend , ondragenter , ondragleave , ondragover , ondragstart , ondrop , onfocus , onfocusenter , onfocusleave , onhelp , onkeydown , onkeypress , onkeyup , onlosecapture , onmousedown , onmouseenter , onmouseleave , onmousemove , onmouseout , onmouseover , onmouseup , onpaste , onpropertychange , onreadystatechange , onresize , onresizeend , onresizestart , onselectstart | | SELECT | onbeforecut , onbeforeeditfocus , onbeforefocusenter , onbeforefocusleave , onbeforepaste , onblur , onchange , onclick , oncontextmenu , oncontrolselect , oncut , ondblclick , ondragenter , ondragleave , ondragover , ondrop , onfocus , onfocusenter , onfocusleave , onhelp , onkeydown , onkeypress , onkeyup , onlosecapture , onmousedown , onmouseenter , onmouseleave , onmousemove , onmouseout , onmouseover , onmouseup , onpaste , onpropertychange , onreadystatechange , onresize , onresizeend , onresizestart , onscroll , onselectstart | | SPAN | onbeforecopy , onbeforecut , onbeforeeditfocus , onbeforefocusenter , onbeforefocusleave , onbeforepaste , onblur , onclick , oncontextmenu , oncontrolselect , oncopy , oncut , ondblclick , ondrag , ondragend , ondragenter , ondragleave , ondragover , ondragstart , ondrop , onfilterchange , onfocus , onfocusenter , onfocusleave , onhelp , onkeydown , onkeypress , onkeyup , onlosecapture , onmousedown , onmouseenter , onmouseleave , onmousemove , onmouseout | | TABLE | onbeforecut , onbeforeeditfocus , onbeforefocusenter , onbeforefocusleave , onbeforepaste , onblur , onclick , oncontextmenu , oncontrolselect , oncut , ondblclick , ondrag , ondragend , ondragenter , ondragleave , ondragover , ondragstart , ondrop , onfilterchange , onfocus , onfocusenter , onfocusleave , onhelp , onkeydown , onkeypress , onkeyup , onlosecapture , onmousedown , onmouseenter , onmouseleave , onmousemove , onmouseout , onmouseover , onmouseup , onpaste , onpropertychange , onreadystatechange , onresize , onresizeend , onresizestart , onscroll , onselectstart | | TD | onbeforecopy , onbeforecut , onbeforeeditfocus , onbeforefocusenter , onbeforefocusleave , onbeforepaste , onblur , onclick , oncontextmenu , oncontrolselect , oncopy , oncut , ondblclick , ondrag , ondragend , ondragenter , ondragleave , ondragover , ondragstart , ondrop , onfilterchange , onfocus , onfocusenter , onfocusleave , onhelp , onkeydown , onkeypress , onkeyup , onlosecapture , onmousedown , onmouseenter , onmouseleave , onmousemove , onmouseout , onmouseover , onmouseup , onpaste , onpropertychange , onreadystatechange , onresizeend , onresizestart , onselectstart | | TEXTAREA | onafterupdate , onbeforecopy , onbeforecut , onbeforeeditfocus , onbeforefocusenter , onbeforefocusleave , onbeforepaste , onbeforeupdate , onblur , onchange , onclick , oncontextmenu , oncontrolselect , oncut , ondblclick , ondrag , operation , ondragend , ondragenter , ondragleave , ondragover , ondragstart , ondrop , onerrorupdate , onfilterchange , onfocus , onfocusenter , onfocusleave , onhelp , onkeydown , onkeypress , onkeyup , onlosecapture , onmousedown , onmouseenter , onmouseleave , onmousemove , onmouseout , onmouseover , onmouseup , onpaste , onpropertychange , onreadystatechange , onresize , onresizeend , onresizestart , onscroll , onselect , onselectstart | Table 6-2. Events Supported by Netscape Navigator | Element | Event Attributes | | A | onclick , onmouseout , onmouseover | | BODY | onload , onunload , onblur , onfocus | | DIV | None | | EMBED | None | | FORM | onreset , onsubmit | | FRAME | None | | ILAYER | None | | IMG | onabort , onerror , onload | | INPUT (button) | onclick | | INPUT (check box) | onclick | | INPUT (radio button) | onclick | | INPUT (submit button) | onclick | | INPUT (text field) | onblur , onchange , onfocus , onselect | | LAYER | onmouseover , onmouseout , onfocus , onblur , onload | | LI | None | | OBJECT | None | | P | None | | PRE | None | | SELECT | onblur , onchange , onclick , onfocus | | SPAN | None | | TABLE | None | | TD | None | | TEXTAREA | onblur , onchange , onfocus , onselect | This overview gives some indication of how powerful JavaScript is. It's time to turn to the details of writing code in JavaScript so we can put it to work in the next two chapters. |
