6.3.1. HTML Events
Not all events are significant to a program. We can simplify situations to determine which events are significant, and which events we can leave out. As we know, HTML provides elements to allow us to create web documents. We can fill these elements with our own data and display unique web documents. We can position the elements with careful planning, and create aesthetic web sites. This is the object-orientated part of web documents. DHTML or Dynamic HTML supplies the even-driven side of things. To begin using DHTML, and therefore event-driven HTML, we need to look at what events happen to our web document.
There are over 50 events in all. Some can happen to a lot of HTML elements, some only happen to specific HTML elements. For example, moving the mouse pointer and clicking the mouse buttons create the following events:
The event happens to the object. So, if the mouse pointer is over an image, say Image1, and we click it, we create an (object, event) pair, in this case (Image1, onClick). If we move the mouse into a select box, Select1, we create (Select1, onMouseOver), and so on. We need technical definitions of the events to be able to appreciate what is actually happening
|onMouseDown||A mouse button has been pressed|
|onMouseMove||The mouse pointer has been move|
|onMouseOut||The mouse pointer has left an element|
|onMouseOver||The mouse pointer has entered an element|
|onMouseUp||A mouse button has been released|
|onClick||A mouse button has been clicked|
|onDbClick||A mouse button has been double-clicked (clicked twice rapidly)|
The idea behind this is to represent all the possibilities we may encounter in computer events. This doesn’t allow for events like the mouse is dirty, or the mouse is upside-down – these are not relevant. You may also notice that some actions will fire two events. Moving the mouse into or out of an element will fire both a mousemove event and a mouseover (or mouseout) event. Clicking a mouse button fires a mousedown, click and mouseup events.
The other user – type event is generated by the keyboard.
|onkeyDown||A key has been pressed|
|onkeyPress||Onkey down followed by onkeyup|
|onkeyUp||A key has been released|
Remaining events have a more conceptual taste. There are a few too many to list here, but they are well documented. Commonly used events include:
|onBlur||An element loses focus|
|onError||An error occurs|
|onFocus||An element gains focus|
|onLoad||The document has completely loaded|
|onReset||A form reset command is issued|
|onScroll||The document is scrolled|
|onSelect||The selection of element has changed|
|onSubmit||A form submit command is issued|
We also have other types of events which are form events, image events, imagemap events, link events, and window events. Form events are associated with HTML forms. The definitions of the events described below are as follows.
Blur – the input focus was lost
Change – an element lost the focus, since it was changed
Focus – the input focus was obtained
Reset – the user resets the object, usually a form
Select – some text is selected
Submit – the user subjitted an object, usually a form
The other events are listed in the following tab;e: