HTML, XHTML, and CSS, Sixth Edition

2017-07-07 02:10:07

Sometimes you won't want a script to run until the visitor does something to trigger it. For example, perhaps you want to run a script when the visitor mouses over a particular picture or link, or when a page is loaded. These actionsmousing over or loading a pageare called intrinsic events. There are currently 18 predefined intrinsic events. You can use them as triggers to determine when a script will run.

To trigger a script:

1.	Create the (X)HTML tag that the intrinsic event depends on (Figure 19.6). Figure 19.6. First, create the (X)HTML tag that the intrinsic event depends on. In this case, I want the script to occur when a visitor clicks the link. Therefore, I have to start with the link tag.

2.	Within the tag created in step 1, type `event`, where event is an intrinsic event as defined below (Figure 19.7). Unless otherwise noted, most events can be used with most (X)HTML tags. Figure 19.7. The event name and the script itself go right inside the (X)HTML tag. Make sure to enclose the script in double quotation marks. `onload` occurs when a browser loads a page or frameset. `onunload` occurs when it unloads. They can be used in the `body` or `frameset` tags. `onclick` occurs when the visitor clicks an element. `ondblclick` occurs when they double click it. `onmousedown` occurs when the visitor points at an (X)HTML element and presses the mouse button down. `onmouseup` occurs when they let go. `onmouseover` occurs when the visitor points at an element. `onmousemove` occurs when the visitor moves the pointer that is already over an element. `onmouseout` occurs when the visitor moves the pointer away from the element. `onselect` occurs when the visitor selects some text in a form element. `onfocus` occurs when the visitor selects or tabs to an element. `onblur` occurs when the visitor leaves an element that was "in focus". `onkeypress` occurs when the visitor types any character in a form element. `onkeydown` occurs even before the visitor lets go of the key and `onkeyup` waits until the visitor lets go of the key. As you might imagine, these only work with form elements that you can type in. `onsubmit` occurs when the visitor clicks the submit button in a form (see page 272). `onreset` occurs when the visitor resets the form (see page 274). `onchange` occurs when the visitor has changed the form element's value and has left that element (by tabbing out or selecting another).
3.	Next, type `="script"`, where script is the actual script that should run when the event occurs.

Figure 19.8. A triggered script doesn't run until the visitor completes the required action. In this case, they have to click the link.

Figure 19.9. Once the visitor clicks the link, the script runs. In this case, an alert appears, giving the current date and time.

Tips

If your script requires quotation marks, use single quotation marks so that they're not confused with the quotation marks that enclose the entire script (in step 3).

If you need to use quotes within text that is already enclosed in single quotation marks, you can backslash them. So, you could use onclick="alert('Here is today\'s date:' + Date())". Without the backslash, the apostrophe in today's would mess up the script.

For a complete listing of which intrinsic events work with which (X)HTML tags, consult the table on page 418.

Also see Setting the Default Scripting Language on page 320.

Figure 19.6. First, create the (X)HTML tag that the intrinsic event depends on. In this case, I want the script to occur when a visitor clicks the link. Therefore, I have to start with the link tag.

Figure 19.7. The event name and the script itself go right inside the (X)HTML tag. Make sure to enclose the script in double quotation marks.

Figure 19.8. A triggered script doesn't run until the visitor completes the required action. In this case, they have to click the link.

Figure 19.9. Once the visitor clicks the link, the script runs. In this case, an alert appears, giving the current date and time.

Категории