Event Handlers

Contact Us or call 1-877-932-8228
Event Handlers

Event Handlers

In JavaScriptBasics/Demos/javascript-2.html, we used the onclick event handler to call JavaScript code that changed the background color of the page. Event handlers are attributes that force an element to "listen" for a specific event to occur. Event handlers all begin with the letters "on". The table below lists the HTML event handlers with descriptions.

HTML Event Handlers
Event Handler Elements Supported Description
onblur a, area, button, input, label, select, textarea the element lost the focus
onchange input, select, textarea the element value was changed
onclick All elements except applet, base, basefont, bdo, br, font, frame, frameset, head, html, iframe, isindex, meta, param, script, style, title a pointer button was clicked
ondblclick All elements except applet, base, basefont, bdo, br, font, frame, frameset, head, html, iframe, isindex, meta, param, script, style, title a pointer button was double clicked
onfocus a, area, button, input, label, select, textarea the element received the focus
onkeydown All elements except applet, base, basefont, bdo, br, font, frame, frameset, head, html, iframe, isindex, meta, param, script, style, title a key was pressed down
onkeypress All elements except applet, base, basefont, bdo, br, font, frame, frameset, head, html, iframe, isindex, meta, param, script, style, title a key was pressed and released
onkeyup All elements except applet, base, basefont, bdo, br, font, frame, frameset, head, html, iframe, isindex, meta, param, script, style, title a key was released
onload frameset all the frames have been loaded
onload body the document has been loaded
onmousedown All elements except applet, base, basefont, bdo, br, font, frame, frameset, head, html, iframe, isindex, meta, param, script, style, title a pointer button was pressed down
onmousemove All elements except applet, base, basefont, bdo, br, font, frame, frameset, head, html, iframe, isindex, meta, param, script, style, title a pointer was moved within
onmouseout All elements except applet, base, basefont, bdo, br, font, frame, frameset, head, html, iframe, isindex, meta, param, script, style, title a pointer was moved away
onmouseover All elements except applet, base, basefont, bdo, br, font, frame, frameset, head, html, iframe, isindex, meta, param, script, style, title a pointer was moved onto
onmouseup All elements except applet, base, basefont, bdo, br, font, frame, frameset, head, html, iframe, isindex, meta, param, script, style, title a pointer button was released
onreset form the form was reset
onselect input, textarea some text was selected
onsubmit form the form was submitted
onunload frameset all the frames have been removed
onunload body the document has been removed

For a full reference of HTML event handler attributes, see the list of attributes and the elements they apply to on the W3C web site.

The getElementById() Method

A very common way to reference HTML elements is by their ID using the getElementById() method of the document object as shown in the example below.

getElementById()
Description Syntax Parameter
Used to accesses/manipulate the first element with the specified id. document.getElementById("id") The "id" parameter is required. This refers to the id of the HTML element you want to access/manipulate

Code Sample:

JavaScriptBasics/Demos/getElementByID.html
---- C O D E   O M I T T E D ----

<p>
	<span onclick="document.getElementById('divRed').bgColor = 'red';">
		Red</span> |
	<span onclick="document.getElementById('divOrange').bgColor = 'orange';">
		Orange</span> |
	<span onclick="document.getElementById('divGreen').bgColor = 'green';">
		Green</span> |
	<span onclick="document.getElementById('divBlue').bgColor = 'blue';">
		Blue</span>
</p>
<table>
	<tr id="divRed"><td>Red</td></tr>
	<tr id="divOrange"><td>Orange</td></tr>
	<tr id="divGreen"><td>Green</td></tr>
	<tr id="divBlue"><td>Blue</td></tr>
</table>
</body>
</html>
Next