Event Handlers

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

Event Handlers

Event handlers are attributes that force an element to "listen" for a specific event to occur. Event handlers all begin with the letters "on".

We might, for instance, listen for a user to click on a specific div element, listen for a form submission, or listen for the user to pass his or her mouse over any input element of a given class.

The table below lists commonly-used 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

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. Once we have the element - that is, once we get a given div, p, input or other DOM element via the getElementById() method - we can then listen for events on that element. Let's look at an example:

Code Sample:

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

<p>
	<span onclick="document.getElementById('divRed').style.backgroundColor = 'red';">
		Red</span> |
	<span onclick="document.getElementById('divOrange').style.backgroundColor = 'orange';">
		Orange</span> |
	<span onclick="document.getElementById('divGreen').style.backgroundColor = 'green';">
		Green</span> |
	<span onclick="document.getElementById('divBlue').style.backgroundColor = 'blue';">
		Blue</span>
</p>
	<div id="divRed">Red</div>
	<div id="divOrange">Orange</div>
	<div id="divGreen">Green</div>
	<div id="divBlue">Blue</div>
</body>
</html>

Code Explanation

Clicking the color names listed horizontally across the top of the page sets the style of the corresponding div element, whose id is gotten via a call to getElementById().

Next