HTML Elements

Page 9

Event Attributes

Introduction Window Event Attritubtes Form Events Touch & Mouse Events Keyboard Events Mouse Events Drag Events Boxes Drag & Drop Mobile CSS3 Animation Clipboard Events Media Events Miscellaneous Events Style Rule-Sets Summary

Introduction

Learn about scores of HTML event listeners including window events, form events, keyboard events, mouse events, drag events, clipboard events, media events and toggle events. Select links to see event listeners in action, HTML markup and JavaScript source code.

Window Event Attributes

These event listeners execute for the Web page window itself. Click a link to see an example, with markup, JavaScript and execution. Most of the Window Event Attributes activate on the next page.

onafterprint: Script executes just after a page prints.
onbeforeprint: Script activates just before a page prints.
onbeforeunload: Script executes just before a page unloads.
onerror: Script executes when an error happens.
onhashchange: Script activates if the anchor of a URL has been modified.
onload: Script activates after a page has loaded.
onmessage: If a message is trigger, this script executes.
onoffline: Script executes when the browser deactivates online access.
ononline: Script executes when the browser activates online.
onpagehide: Script executes when someone leaves a page.
onpageshow: Script activates when someone goes to the specific page.
onpopstate: Script executes when the window's history is modified.
onresize: Script activates when the browser window changes dimensions.
onstorage: Script activates when Web storage updates.
onunload: Script executes when a page unloads.

Touch & Mouse Events

ontouchcancel: Happens if a touch event is interupted
ontouchmove: Drag a finger across the screen.
ontouchstart: Place a finger on the screen.
ontouchend: End a touch event by lifing a finger.

Form Events

These event listeners execute for Web forms. Click a link to see an example, with markup.

onblur: Script activates when an element loses focus.
onfocus: Script executes when an element receives focus.
oninput: Script activates when the user inputs data.
oninvalid: Script executes when an element is invalid.
onreset: Script executes when the reset button's selected.
onsearch: Script activates when the user types in a search field. This event is non-standard.
onselect: Script executes when an element's text is selected.
onsubmit: Script Fires when a form is submitted, when the type="submit" button is pressed.

Keyboard Events

These event listeners execute in response to keyboard events. Click a link to see an example, with markup.

onkeydown: Activates as a key us pressed.
onkeypress: Activates when a key is pressed.
onkeyup: Activates when a key is released.

Mouse Events

These event listeners execute when mouse or touch screen effect occur. Click a link to see an example, with markup.

onclick: Responds to clicking an element.
ondblclick: Activates when a mouse double click on an HTML element.
onmousedown: Executes when a mouse button depresses while on an HTML element.
onmousemove: Activates when the mouse pointer moves while it's over an HTML element.
onmouseout: Executes when the mouse pointer moves away from an HTML element.
onmouseover: Mouse pointer over an HTML element.
onmouseup: Mouse button released over an HTML element.
onmousewheel: Deprecated. Use onwheel, below.
onwheel: Activates when the mouse rolls over an element.

Drag Events

These event listeners execute when the user drags elements. Click a link to see an example, with markup.

ondrag: Script activates during the process of dragging an element.
ondragend: Script activates when a drag process ends.
ondragenter: Script executes when an element is dragged to an acceptable drop target.
ondragleave: Script activates when an element exits a drop target.
ondragover: Script executes as an element is dragged over an acceptable drop target.
ondragstart: Script activates when an element begins to be dragged.
ondrop: Script executes when an element is dropped
onscroll: Script executes when the element scrolls with its scrollbar.

Boxes Drag & Drop

A debugging element displays which event listeners are active during specific events. On my Web browser the ondragstart event listener activates before the ondrag event listener.

In my Web browser sometimes ondrag activates after and sometimes ondrag activates before ondragstart executes. Therefore the order of execution for ondrag and ondragstart doesn't seem defined.

it's probably more efficient to use ondragstart, which activates once instead of ondrag, which activates continually as an element moves, unless you want the element to render video or animation.

The order of events should follow:

Drag Start. Drag. Drag Leaving. Drag Enter. Drag Over. Drop.

Drag and drop the blue rectangle onto the violet rectangle. The order of events display just above the rectangles. The following elements might not be draggable on some mobile devices. See Mobile CSS3 Animation.

Drag Blue Box to Violet Box

Violet Color

Drag Event Listeners: JavaScript

var vi = null;
var bl = null;
var eDebug = null;
var bDragOnce = false;
var bDragOver = false;
var bDragEnter = false;

/**
* Obtain the elements we
* want for changing display output.
* Also add the scroll event.
*/
function getElements(){

if(vi == null || bl == null){
vi = document.getElementById("vi");
bl = document.getElementById("bl");
eDebug = document.getElementById("eDebug");
}

}

/**
 * Activates when drag event starts.
 * @param ev: Event Listener.
 */
function dragStart(ev){
getElements();
eDebug.innerHTML = "Drag Start.";
vi.style.backgroundColor = "violet";
}

/**
 * Activates continually as
 * drag happens
 * @param ev: Event Listener.
 */
function drag(ev){
getElements();

// Continually drags.
// Need to limit output.
if(bDragOnce == false){
eDebug.innerHTML += " Drag.";
bDragOnce = true;
vi.style.backgroundColor = "violet";
}

}

/**
 * Activates when user drags away 
 * from draggable element.
 * @param ev: Event Listener.
 */
function dragLeave(ev){
eDebug.innerHTML += " Drag Leaving.";
}

/**
 * Activates when dragging over
 * a draggable element.
 * @param ev: Event Listener.
 */
function dragOver(ev){
ev.preventDefault();
vi.innerHTML = "Drag over.";

if(bDragOver == false){
eDebug.innerHTML +=" Drag Over.";
bDragOver = true;
}

}

/**
 * Activates when drag element
 * dropped onto drop target.
 * @param ev: Event Listener.
 */
function drop(ev){
ev.preventDefault();
vi.style.backgroundColor = "blue";
vi.innerHTML = "Dropped Blue Color Here";
bl.innerHTML = "Drop.";
eDebug.innerHTML +=" Drop.";
}

/**
 * Activates when drag element
 * enters droppable target.
 * @param ev: Event Listener.
 */
function dragEnter(ev){
ev.preventDefault();
if(bDragEnter == false){		
eDebug.innerHTML += " Drag Enter.";
bDragEnter = true;
}
}

/**
 * Activates when drag event ends.
 * @param ev: Event Listener.
 */
function dragEnd(ev){
 ev.preventDefault();
 eDebug.innerHTML +=" Drag End.";
}

Clipboard Events

These event listeners execute when elements enable cut, copy and paste features. Click a link to see an example, with markup.

oncopy: Script runs when the user copies contents to the clipboard.
oncut: Script executes when an element's content has been cut.
onpaste: Script activates when content's pasted into an HTML element.

Media Events

These event listeners execute for most, but not all, media elements including audio, video and images. Click a link to see an example, with markup.

onabort: Script executes when it's aborted
oncanplay: Script activates when media can begin playback.
oncanplaythrough: Script executes when media's able to play through to the end.
oncuechange: Script executes when the cue changes.
ondurationchange: Script activates when the media length is modified.
onemptied: Script executes when media file suddenly becomes inaccessible.
onended: Script activates when media has ended.
onerror: Script executes when an error happens during the file load sequence.
onloadeddata: Script activates when media finishes loading.
onloadedmetadata: Script executes when dimensions, rate, and other metadata load.
onloadstart: Script activates as a media file begins to load.
onpause: Script executes when media pauses.
onplay: Script activates when media can start to run.
onplaying: Script activates when media is playing.
onprogress: Script executes when the Web browser is obtaining the media.
onratechange: Script executes when the speed changes, for example between slow and fast.
onseeked: If the seeking attribute equals false, then onseekend activates. User has stopped media to seek a start location.
onseeking: Script activates when the seeking attribute equals true. Therefore the user is scrubbing the slider or media is playing and moving time slider.
onstalled: Script activates when the browser can't download the media.
onsuspend: Script activates when the media has not been able to complete.
ontimeupdate: Script activates when the user scrubs the time slider to a different location.
onvolumechange: Script executes when the volume is turned, down or muted.
onwaiting: Script activates when the media pauses while buffering or processing.

Miscellaneous Events

ontoggle: If a toggle opens or closes then the ontoggle event activates.
onchange: Script executes when the value of an input element changes, after user selects the ENTER key. Unfortunately this will activate the form's POST method. Try onchange on input elements, where the form lacks an action attribute.

Style Rule-Sets

Please see elements.css for some of the most common rule-sets applied to this set of tutorials.

Summary

You learned about scores of HTML event listeners including window events, form events, keyboard events, mouse events, drag events, clipboard events, media events and toggle events. Hopefully you selected links to see event listeners in action, HTML markup and JavaScript source code. If not, then see the next page for working examples, source code and markup.