Learn Modern JavaScript - Visitor Triggered Events

Learn Modern JavaScript

Visitor Triggered Events

So far in looking at events, we have looked at how we can unobtrusively attach events to elements within our web page. What we haven't considered is what types of events that we can attach and where we can attach them to.

Most of the events that we need to deal with in our web page will be those that are triggered by actions performed by the visitors to our site. There are two different ways that our visitors interact with our web page - using the keyboard and using their mouse. Any other devices that they might have attached to their computer will be treated by our page as either keyboard or mouse input in so far as the events our page can process are concerned.

Some events can be triggered by both the mouse and the keyboard. the click event is probably the most useful of these since it can be applied to any part of your web page. Thefocus and blur events can also be triggered from both the keyboard and mouse but can only be applied to <a> tags and form fields (some browsers accept one or both of these events on other elements but cross browser results are inconsistent).

Mouse only events are fairly obvious because most of them contain the word mouse in their event name. Some examples of mouse only events are mousedown, mouseup,mouseover, mouseout, and mousemove. One mouse only event supported by most browsers that does not include the word mouse in the event name is dblclick. One thing to watch for in handling mouse events is that any mouse activity that your visitor performs will trigger multiple mouse events. Double clicking their mouse for example will generate the following series of events - mousedown, mouseup, click, mousedown, mouseup, click, dblclick. If you attach multiple event handlers to the same element then you need to cater for multiple handlers being triggered by the same action.

There are fewer events associated with the keyboard since there are fewer things your visitors can do with the keys on their keyboard than the sorts of things that they can do with their mouse. The main keyboard events are keydown, keypress, and keyup. These events are triggered whenever your visotr types something on their keyboard. Once you have detected that they have typed something JavaScript can then find out what was typed (we'll look at how to do that later).

When you have a form within your web page then there are additional events that your visitor can trigger with respect to the form. The change event is triggered when the value of a field is changed and is the most useful way of determining when a selection has been made from a selection list. The submit event is triggered when the form is submitted and can be used to provide feedback to your visitor on whether their input is valid or not before the form content is submitted to the server. The reset event is not used much any more as few forms these days have a reset button.

Some of the elements in the web page to which event handlers can be attached also have a default action that will be performed even when JavaScript is disabled or not available in your visitor's browser. If we wish to suppress this default action from being performed by adding return false to the end of the function that we have attached to the event handler.

The portion of the page to which a particular event handler can be applied also varies. The events related to forms need to be applied either to the form element or elements within the form (depending on the particular event). Most other mouse and keyboard events can be applied either to specific elements that only take up a small part of your page or can be applied to elements that fill a larger portion of the page and have many elements within them. They can even be applied to the entire window. There is one problem though if you start applying the same event handler to elements at different levels within your page as event handlers do not provide a mechanism to control the order in which the processing at those different levels will be performed. Event listeners (and the Internet Explorer equivalent) are needed if you require that level of control.