Triggering Scripts with Events - HTML

Most HTML tags include several event attributes that can be used to trigger scripts. lists these attributes and their use for triggering scripts.
Triggering Scripts with Events

Triggering Scripts with Events

Note Many of the event attribute triggers are dependent on the element(s) to which they apply being “in focus” at the time of the trigger. For example, in an HTML form an onmouseout event attached to one field will not trigger unless the same field has the focus.

Event triggers have a variety of uses, including the following:

✦ Form data verification
Using onfocus and onblur attributes, each field can be verified as it is edited. Using onsubmit and onreset, an entire form can be verified or reset when the appropriate button is clicked
✦ Image animation
Using onmouseover and onmouseout attributes, an image can be animated when the mouse pointer passes over it
✦ Mouse navigation
Using onclick and ondblclick attributes, you can trigger user agent navigation when a user clicks or double-clicks an element

For example, you can create images to use as buttons on your page.

Figure shows two images for use on a button. The image on the left is used for general display, while the image on the right is used when the mouse is over the button.

Tip Users appreciate visible feedback from elements on your page. As such, it is important to always provide visible changes to navigation elements—links should have a visibly different style when moused over, as should navigation buttons.

Two images for use as a button.

Two images for use as a button.

Combining onmouseover, onmouseout, and onclick events, you can easily create a button that reacts when the mouse is over it and navigate to a new page when clicked. Consider the following document that uses a few JavaScript scripts and events to create a navigation button.

When the document loads, the button is displayed in its inactive (off) state. When the mouse is placed over the button, the onmouseover event launches the JavaScript activate function and the button is displayed as active (on).

The button is initially displayed in its inactive (off) state.

The button is initially displayed in its inactive (off) state.

When the mouse leaves the button, the onmouseout event launches the deactivate function, returning the button display to its inactive state. When the button is clicked, the onclick event changes the location property of the user agent, effectively navigating to a new page (in this case home.html). Note that the

The button is changed to active (on) when the mouse is over it.

The button is changed to active (on) when the mouse is over it.

JavaScript code for the onclick attribute is contained directly in the value of the attribute—because the code is only one line a separate function is not necessary.

All rights reserved © 2020 Wisdom IT Services India Pvt. Ltd Protection Status

HTML Topics