File Under: JavaScript

JavaScript Events

In web development terms, an “event” is something that triggers a specific action in the browser. Usually, an event occurs when a user loads a page, clicks on a button or performs some other task with the mouse or keyboard. This page lists the most common events that can be inserted into JavaScript code to react to user actions.

There are many ways to add events to a page and many JavaScript frameworks simplify the process. In order to show code that doesn’t depend on using a particular framework, all examples below will use John Resig’s addEvent function.

If you’d like to try out the examples on your own computer, you’ll need to start with this template and add the HTML and JavaScript where instructed.


Contents

  1. Page Events
    1. load
    2. resize
    3. scroll
    4. unload
  2. Form Events
    1. >blur
    2. change
    3. copy
    4. >cut
    5. focus
    6. keydown, keypress, keyup
    7. paste
    8. reset
    9. select
    10. submit
  3. Keyboard Events
    1. copy, cut, paste
    2. keydown
    3. keypress
    4. keyup
  4. Mouse Events
    1. click
    2. contextmenu
    3. dblclick
    4. mousedown
    5. mousemove
    6. mouseout
    7. mouseover
    8. mouseup
    9. right click
    10. scrolling

Page Events

load

The onLoad event fires when the page has completely finished loading, including all graphics and external files (CSS, JavaScript.) The load event can also be attached to an image to determine when it has loaded.

JavaScript:

addEvent(window, 'load', function(event) {

	alert('The page has loaded');

});


Examples and code can be found at Codelibrary:JavaScript Event – load.

resize

The onResize event fires when the page is resized. The event can also be attached to a frame to determine when it has resized.

JavaScript:

addEvent(window, 'resize', function(event) {

	alert('The page has been resized');

});


Examples and code can be found at Codelibrary:JavaScript Event – Resize.

scroll

The onScroll event fires when the page is scrolled. The event can also be attached to other objects that are scrollable, such as a text area.

HTML:

<div style="height: 2000px;"></div>

JavaScript:

addEvent(window, 'scroll', function(event) {

	alert('The page is being scrolled');

});


Examples and code can be found at Codelibrary:JavaScript Event – Scroll.

unload

The onUnload event fires when the user leaves the page, either by closing the window/tab, clicking a link, hitting the back button, or otherwise navigating to a different page.

JavaScript:

addEvent(window, 'unload', function(event) {

	alert('The user left the page');

});


Examples and code can be found at Codelibrary:JavaScript Event – Unload.

Form Events

blur

The onBlur event fires whenever a form field lose focus.

HTML:

<input id="myinput" type="text" />

JavaScript:

addEvent(document.getElementById('myinput'), 'blur', function(event) {

	alert('The element lost focus (blurred)');

});


Examples and code can be found at Codelibrary:JavaScript Event – Blur.

change

The onChange event fires whenever the value of a form field (including select lists) changes. Big caveat: the event is only recognized once a field loses focus, so the change event will not fire as soon as text is edited, for example.

HTML:

<input id="myinput" type="text" value="Change this text" />

JavaScript:

addEvent(document.getElementById('myinput'), 'change', function(event) {

	alert('The text has changed');

});


Examples and code can be found at Codelibrary:JavaScript Event – Change.

copy

The onCopy event fires whenever a form field’s contents are copied with the user’s local copy function (ctrl-c, edit menu, or contextual menu.) The event can also be attached to the window object to catch copying anywhere on the page.

HTML:

<input id="myinput" type="text" value="Copy this text" />

JavaScript:

addEvent(document.getElementById('myinput'), 'copy', function(event) {

	var txtbox = event.target;

	var selectedText = txtbox.value.substr(txtbox.selectionStart, txtbox.selectionEnd - txtbox.selectionStart);

	alert('You copied some text: ' + selectedText);

});


Examples and code can be found at Codelibrary:JavaScript Event – Copy.

cut

The onCut event fires whenever a form field’s contents are cut with the user’s local cut function (ctrl-x, edit menu, or contextual menu.) The event can also be attached to the window object to catch cutting anywhere on the page.

HTML:

<input id="myinput" type="text" value="Cut this text" />

JavaScript:

addEvent(document.getElementById('myinput'), 'cut', function(event) {

	var txtbox = event.target;

	var selectedText = txtbox.value.substr(txtbox.selectionStart, txtbox.selectionEnd - txtbox.selectionStart);

	alert('You cut some text: ' + selectedText);

});


Examples and code can be found at Codelibrary:JavaScript Event – Cut.

focus

The onFocus event fires whenever a form field gains focus, such as with a mouse click inside it or tabbing from another field.

HTML:

<input id="myinput" type="text" />

JavaScript:

// Script for example event goes here

addEvent(document.getElementById('myinput'), 'focus', function(event) {

	alert('The element has focus');

});


Examples and code can be found at Codelibrary:JavaScript Event – Focus.

keydown, keypress, keyup

See Keyboard Events

paste

The onPaste event fires whenever a form field’s contents are pasted with the user’s local paste function (ctrl-v, edit menu, or contextual menu). The event can also be attached to the window object to catch pasting anywhere on the page.

HTML:

<input id="myinput" type="text" />



JavaScript:

addEvent(document.getElementById('myinput'), 'paste', function(event) {

	alert('You pasted some text');

});


Examples and code can be found at Codelibrary:JavaScript Event – Paste.

reset

The onReset event fires when a form’s reset button is pushed (if it exists). Note that the event is tied to the form and not the button itself.

HTML:

<form id="myform">

<input id="mytext" type="text" value="default text -- change, then click reset" /><br />

<input id="myreset" type="reset" /><input id="mysubmit" type="submit" />

</form>

JavaScript:

addEvent(document.getElementById('myform'), 'reset', function(event) {

	alert('Form is resetting');

});


Examples and code can be found at Codelibrary:JavaScript Event – Reset.

select

The onSelect event fires when a field’s text is highlighted (selected).

HTML:

<input id="myinput" type="text" value="highlight this text" />

JavaScript:

addEvent(document.getElementById('myinput'), 'select', function(event) {

	var txtbox = event.target;

	var selectedText = txtbox.value.substr(txtbox.selectionStart, txtbox.selectionEnd - txtbox.selectionStart);

	alert('The user selected some text: ' + selectedText);

});


Examples and code can be found at Codelibrary:JavaScript Event – Select.

submit

The onSubmit event fires when a form’s submit button is pushed, or if the form is otherwise submitted (such as when the user presses the enter key). It is important to note that if you force form submission with formname.submit() that the submit event is not called. Also note that the event is tied to the form and not the button itself.

HTML:

<form id="myform">

<input id="mytext" type="text" value="default text -- click submit" /><br />

<input id="myreset" type="reset" /><input id="mysubmit" type="submit" />

</form>

JavaScript:

addEvent(document.getElementById('myform'), 'submit', function(event) {

	alert('Form is submitting');

});


Examples and code can be found at Codelibrary:JavaScript Event – Submit.


Keyboard Events

copy, cut, paste

See Form Events

keydown

The onKeydown event fires when a key is pushed down while the target field has focus. Keydown fires as soon as the key is pressed down and only happens once (in other words, it does not continually fire like keypress). The distiction between keydown and keyup is that keydown fires before the value of the key is added to a field.

You can also set the target to be the entire window to catch the keydown event globally.

HTML:

<input id="mytext" type="text" />

<br /><div id="mydiv" style="border: 1px solid black; width: 100px; height: 100px; margin-top: 10px;"></div>

JavaScript:

addEvent(document.getElementById('mytext'), 'keydown', function(event) {

	display_short('keydown: ' + event.keyCode);

});



function display_short(str)

{

	clearTimeout();

	document.getElementById('mydiv').innerHTML = str;

	if (str != '')

		setTimeout("display_short('')", 1000);

}




Examples and code can be found at Codelibrary:JavaScript Event – Keydown.

keypress

The onKeypress event fires when a key is pressed and at an interval determined by the operating system as long as the key is still held down. The continual firing seperates it from the keydown and keyup events, which fire only once.

The event only fires if the target field has focus, though the target can be the entire window to catch the keypress event globally.

HTML:

<input id="mytext" type="text" />

<br /><div id="mydiv" style="border: 1px solid black; width: 100px; height: 100px; margin-top: 10px;"></div>



JavaScript:

addEvent(document.getElementById('mytext'), 'keypress', function(event) {

	display_short('keypress: ' + event.charCode);

});



function display_short(str)

{

	clearTimeout();

	document.getElementById('mydiv').innerHTML = str;

	if (str != '')

		setTimeout("display_short('')", 1000);

}


Examples and code can be found at Codelibrary:JavaScript Event – Keypress.

keyup

The onKeyup event fires when a key is release while the target field has focus. The distiction between keyup and keydown is that keyup fires after the value of the key is added to a field.

You can also set the target to be the entire window to catch the keyup event globally.

HTML:

<input id="mytext" type="text" />

<br /><div id="mydiv" style="border: 1px solid black; width: 100px; height: 100px; margin-top: 10px;"></div>

JavaScript:

addEvent(document.getElementById('mytext'), 'keyup', function(event) {

	display_short('keyup: ' + event.keyCode);

});



function display_short(str)

{

	clearTimeout();

	document.getElementById('mydiv').innerHTML = str;

	if (str != '')

		setTimeout("display_short('')", 1000);

}


Examples and code can be found at Codelibrary:JavaScript Event – Keyup.


Mouse Events

click

The onClick event fires whenever a mouse button is clicked. If attached to a specific object (such as the div in the example below), the event only fires if the mouse is clicked within the bounds of that object.

HTML:

<div id="mydiv" style="border: 1px solid black; width: 100px; height: 100px; margin-top: 10px;"></div>



JavaScript:

addEvent(document.getElementById('mydiv'), 'click', function(event) {

	display_short('clicked');

});

function display_short(str)

{

	clearTimeout();

	document.getElementById('mydiv').innerHTML = str;

	if (str != '')

		setTimeout("display_short('')", 1000);

}


Examples and code can be found at Codelibrary:JavaScript Event – Click.

contextmenu

The onContextmenu event fires whenever the right mouse button is clicked (or the contextual menu is opened by any means, such as ctrl-click on a Mac). If attached to a specific object (such as the div in the example below), the event only fires if the mouse is right-clicked within the bounds of that object.

HTML:

<div id="mydiv" style="border: 1px solid black; width: 100px; height: 100px; margin-top: 10px;"></div>

JavaScript:

addEvent(document.getElementById('mydiv'), 'contextmenu', function(event) {

	display_short('right-clicked (contextmenu)');

});

function display_short(str)

{

	clearTimeout();

	document.getElementById('mydiv').innerHTML = str;

	if (str != '')

		setTimeout("display_short('')", 1000);

}


Examples and code can be found at Codelibrary:JavaScript Event – Contextmenu.

dblclick

The onDblClick event fires whenever a mouse button is clicked twice within a time frame determine by the operating system (a double-click). If attached to a specific object (such as the div in the example below), the event only fires if the mouse is double-clicked within the bounds of that object.

HTML:

<div id="mydiv" style="border: 1px solid black; width: 100px; height: 100px; margin-top: 10px;"></div>

JavaScript:

addEvent(document.getElementById('mydiv'), 'dblclick', function(event) {

	display_short('double-clicked');

});

function display_short(str)

{

	clearTimeout();

	document.getElementById('mydiv').innerHTML = str;

	if (str != '')

		setTimeout("display_short('')", 1000);

}


Examples and code can be found at Codelibrary:JavaScript Event – Dblclick.

mousedown

The onMousedown event fires whenever a mouse button is pressed down. If attached to a specific object (such as the div in the example below), the event only fires if the mouse is pressed down within the bounds of that object.

Mousedown and mouseup are a good pair for implementing drag-and-drop interfaces.

HTML:

<div id="mydiv" style="border: 1px solid black; width: 100px; height: 100px; margin-top: 10px;"></div>

JavaScript:

addEvent(document.getElementById('mydiv'), 'mousedown', function(event) {

	display_short('Mousedown');

});

function display_short(str)

{

	clearTimeout();

	document.getElementById('mydiv').innerHTML = str;

	if (str != '')

		setTimeout("display_short('')", 1000);

}




Examples and code can be found at Codelibrary:JavaScript Event – Mousedown.

mousemove

The onMousemove event fires whenever a mouse is moved. If attached to a specific object (such as the div in the example below), the event only fires if the mouse is moved within the bounds of that object.

HTML:

<div id="mydiv" style="border: 1px solid black; width: 100px; height: 100px; margin-top: 10px;"></div>

JavaScript:

addEvent(document.getElementById('mydiv'), 'mousemove', function(event) {

	display_short('mousemove');

});

function display_short(str)

{

	clearTimeout();

	document.getElementById('mydiv').innerHTML = str;

	if (str != '')

		setTimeout("display_short('')", 1000);

}


Examples and code can be found at Codelibrary:JavaScript Event – Mousemove.

mouseout

The onMouseout event fires whenever a mouse moves outside of the bounds of its target object after being inside those bounds. It only fires once, but will re-fire if the mouse moves back inside and then outside again.

HTML:

<div id="mydiv" style="border: 1px solid black; width: 100px; height: 100px; margin-top: 10px;"></div>

JavaScript:

addEvent(document.getElementById('mydiv'), 'mouseout', function(event) {

	display_short('mouseout');

});

function display_short(str)

{

	clearTimeout();

	document.getElementById('mydiv').innerHTML = str;

	if (str != '')

		setTimeout("display_short('')", 1000);

}


Examples and code can be found at Codelibrary:JavaScript Event – Mouseout.

mouseover

The onMouseover event fires whenever a mouse moves inside of the bounds of its target object after being outside those bounds. It only fires once, but will re-fire if the mouse moves back outside and then inside again.

HTML:

<div id="mydiv" style="border: 1px solid black; width: 100px; height: 100px; margin-top: 10px;"></div>

JavaScript:

addEvent(document.getElementById('mydiv'), 'mouseover', function(event) {

	display_short('mouseover');

});

function display_short(str)

{

	clearTimeout();

	document.getElementById('mydiv').innerHTML = str;

	if (str != '')

		setTimeout("display_short('')", 1000);

}


Examples and code can be found at Codelibrary:JavaScript Event – Mouseover.

mouseup

The onMouseup event fires whenever a mouse button is released. If attached to a specific object (such as the div in the example below), the event only fires if the mouse is released within the bounds of that object.

The original mousedown event does not need to take place within the target object, making mousedown and mouseup a good pair for implementing drag-and-drop interfaces.

HTML:

<div id="mydiv" style="border: 1px solid black; width: 100px; height: 100px; margin-top: 10px;"></div>

JavaScript:

addEvent(document.getElementById('mydiv'), 'mouseup', function(event) {

	display_short('mouseup');

});

function display_short(str)

{

	clearTimeout();

	document.getElementById('mydiv').innerHTML = str;

	if (str != '')

		setTimeout("display_short('')", 1000);

}




Examples and code can be found at Codelibrary:JavaScript Event – Mouseup.

right click

See contextmenu

scrolling

See scroll in page events