In this chapter we will breifly re-introduce the Event types used in Document Obect Model programming. For more detailed tutorial about HTML5 based events follow this link.

The small set of Event types supported by browsers from history, are rapidly growing. Sources that define events are:

Many of these events are still in draft stage and are not widely implemented yet. Table below includes a sample of defined events and belonging functions.

Legacy event types generally supported by all browsers and in wide use are listed below. These events deal with mouse movements, key strokes, actions on window object and HTML forms.

DOM and HTML5 event types

Event type

Description

Events (few examples)

Form Events

This event fires when there is an action like submit, reset … etc on <form> element of HTML.

onblur: Occurs when an element loses focus.

onfocus: Occurs when element gets focus.

onfocusin: Occurs when element is about to get focus.

onfocusout: Occurs when element is about to loose focus.

onchange: Occurs when content of form element change.

onsubmit: Occurs when <form> is submitted.

onreset: Occurs when form is reset.

Window or Frame Events

These events are related to the browser window or frame.

onload: Occurs when window is loaded.

onerror: Occurs when there is error loading external file.

onunload: Occurs when window is unloaded.

onresize: Occurs when document view is resized.

Mouse Events

These events occurs when mouse moves or clicks over the webpage.

onclick: Occurs when mouse is clicked on an element.

onmouseenter: Occurs when mouse is pointed to an element.

onmouseexit: Occurs when mouse is pointed out of an element.

Key Events

These events occurs when document has keyboard focus and key is pressed or released.

onkeydown: Occurs when user is pressing a key

onkeypress: Occurs when user presses a key.

onkeyup: Occurs when user release a key

Clipboard Events

Event fires when there is an action on clipboard data

oncopy: Occurs when user copies content of an element.

oncut : Occurs when user cuts the content of an element

onpaste : Occurs when user pastes content in an element.

The DOM level 3 event types are in the stage of standardization. The DOM level 3 has deprecated a few event types introduced in DOM level 2 not being widely used, and has added some new events. The event types supported in DOM level 3 are:

DOM level 3 event types

Events

Description

Methods

User Interface Events

General browser events which has interaction with BOM elements.

UI events supported in DOM level 3 are:

load, unload, abort, error, select, resize, scroll.

Deprecated Events:

DOMActivate : Fires when element is activated by some user action of mouse or keyboard.

Focus events

Events fired when an element gains or loses focus.

Focus events supported :

blur, focus, focusin, focusout.

Deprecated Elements:

DOMFocusIn : This is bubbling version of focus HTML event. It is equal to focusin of DOM level 3.

DOMFocusOut :  This is generic version of blur HTML event. It is equal to focusout of DOM level 3.

Mouse events

Events fired due to action of mouse on the webpage

Mouse events supported in DOM Level 3:

click, oncontextmenudblclick, mousedown, mouseenter, mouseleave, mousemove, mouseout, mouseover, mouseup.

Wheel events

Events fired when mouse wheel is used in either direction.

onmousewheel : Occurs when mouse wheel rolls. It uses below properties:

deltaX : returns horizontal scroll amount of mouse wheel on x-axis.

deltaY : returns vertical scroll of mouse wheel on y-axis.

deltaZ : returns scroll amount of mouse wheel on z-axis.

deltaMode : returns  number which represents unit of measurements for delta values. (pixels, lines or pages)

Text Events

Events fired when there is text input. It is different from keypress because it fires only in editable area, and for new character inserted.

textInput : Occurs when there is character in editable area. It has below mentioned properties:

data : contains character that was inserted.

inputMethod : how text was inserted. (pasted, dropped, using hand-writing …etc, Supported only in IE)

 

Keyboard Events

Events fired when keyboard action is performed on page.

Keyboard events supported:

keydown, keypress, keyup

Composition Events

Handles the complex input sequences found in IME (Input Method Editors), where multiple keys have to be pressed to enter single character.

Events supported:

compositionstart : Fires when text composition system of IME is opened and input is about to commence.

compositionupdate : Fires when new character has been inserted to input field.

compositionend : Fires when text composition system is closed and input is from normal keyboard.

Print events

Events are triggered when print action happens on the document.

onafterprint : Fires when print dialogue is close or printing action started.

onbeforeprint : Fires when page is about to print.

HTML defined events are driven by necessity of developer rather than specification of standard bodies. It is discussed in detail in later part of this tutorial.

Currently touch screen devices use the mouse click and scroll events for firing events. But not all devices can use them effectively. Example, Apple’s iPhone, iPad has features like pinch-in, pinch-out, orientation change…etc. W3C has yet to come up with standard events for such devices.

 

›› go to examples ››