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:

  • OnMouseDown
  • onMouseMove
  • onMouseOut
  • onNouseOver
  • onMouseUp
  • onClick
  • onDblClick

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

Mouse Event Description
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.

Keyboard Event Description
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:

Event Description
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.

Form event

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:

Image Image Map Link Window
Abort Mouseout Click Blur
Error Mouse over Mouseout Error
load Mouseover Focus


Leave a Reply

Your email address will not be published. Required fields are marked *

  • Get Alert

    Enter your email address:

  • Categories

  • Twitter

Subscribe Now!
Sign-up for our email newsletter and get free job alerts, current affairs and GK updates regularly.

Subscribe Here

Popup Dialog Box Powered By : XYZScripts.com
  • RSS
  • Facebook
  • Google+
  • Twitter