JavaScript Event Handlers

Table of content:

What is an event handler

An event handler is a predefined JavaScript property of an object that is used to handle an event on a web page. When a viewer of a web page performs an action such as clicking a button, moving the mouse over a particular part of the web page etc means that an event is taking place. JavaScript can identify these events and react to them making the web page more interactive and useful.

Event handlers can can be placed within HTML elements as attributes or they can be placed between script tags or in an external JavaScript file.

Event handlers in HTML Elements

To use an event handler within an HTML document you need to know the keyword for that event handler.

Example:


<body>
<form>
<input type="button" value="Click Here"
onclick="window.alert(Hi there!);" />
</form>
</body>

When a user clicks the button an alert pops up that says “Hi there!”.
However, if the code within the event handler becomes very long then you can place it in a function. You can use the event handler to call the function.

Example:


<body>
<script>
function MyFunction() {
window.alert("Hi");
}
</script>
<form>
<input type="button" value="Click Here"
onclick="MyFunction();" />
</form>
</body>

You can access the HTML element using the document.getElementById(); method. For this, first you have to assign an id to the HTML element.


<body>
<form>
<input type="button" value="Click Here"
id="MyButton" />
</form>
</body>

To access the HTML element with the id=”MyButton” you simply use the following code:


document.getElementById
("MyButton");

Probably you would want to assign this expression to a variable so you can use it multiple times without re-typing it.


var HiMyButton =
document.getElementById
("MyButton");

The final script will look like this:


<script>
function MyFunction() {
window.alert("Hi");
}
var HiMyButton =
document.getElementById
("MyButton");
MyButton.onclick = MyFunction;
</script>

On the last line of code MyButton.onclick = MyFunction; the parentheses are not used after the function name. That is because you want to assign the execution of the function not its result.

Event handlers list

Below is a list of the most common events, their event handlers, and what actions might trigger each event.

Event Event Handler Event Trigger
Abort onabort An image is stopped from loading before loading has completed.
Blur onblur Viewer removes focus from an element.
Change onchange Viewer changes the content of a form element.
Click onclick Viewer clicks on element.
ContextMenu oncontextmenu Viewer opens the context menu.
Copy oncopy Viewer uses the copy command.
Cut oncut Viewer uses the cut command.
Dblclick ondblclick Viewer double-clicks the mouse.
Error onerror The browser gets a JavaScript error.
Focus onfocus Viewer gives focus on an element.
Keydown onkeydown Viewer presses down a key on the keyboard.
Keypress onkeypress Viewer presses a key on the keyboard and releases or holds down the key.
Keyup onkeyup Viewer releases a key on the keyboard.
Load onload Web page finishes loading.
Mousedown onmousedown Viewer presses the mouse button.
Mousemove onmousemove Viewer moves the mouse.
Mouseout onmouseout Viewer moves the mouse away from an element.
Mouseover onmouseover Viewer moves the mouse over an element.
Mouseup onmouseup Viewer releases the mouse button.
Paste onpaste Viewer uses the past command.
Reset onreset Viewer resets a form.
Resize onresize A window is resized.
Scroll onscroll Viewer scrolls a scrollable area.
Select onselect User makes a selection.
Submit onsubmit Viewer submits a form.
Unload onunload Viewer leaves the curent page.

The Abort Event (onabort)

The Abort event occurs when the viewer stops the loading of an image. The event handler used for this event is onabort.
Example:


<img src="myimage.jpg" alt="A blue dog"
onabort="window.alert('What a beautiful blue dog!');" />

The Blur Event (onblur)

The Blur event occurs when the viewer takes the focus away from a form element or a window. The event handler used for this event is onblur.
Example:


<form>
This box needs focus:
<input type="text" onblur =
"window.alert('You are not done here!');"/>
Then, this box needs focus:
<input type="text" />
</form>

The Change Event (onchange)

The Change event occurs when the viewer changes something within a form element. The event handler used for this event is onchange.
Example:


<form>
<select onchange =
"window.alert('DO NOT change that');">
<option selected="selected">Yes</option>
<option>No</option>
<option>Maybe</option>
</select>
</form>

The Click Event (onclick)

The Click event occurs when the viewer clicks an an element in a web page. The event handler used for this event is onclick.
Example:


<input type="button" value="DO NOT Click" onclick="window.alert('I have told you not to click!');" />

The Focus Event (onfocus)

The Focus event occurs when the viewer gives focus to an element on a web page. The event handler used for this event is onfocus.
Example:


Your Name:
<input type="text" onfocus =
"window.alert('Remember, names must be capitalized!');" />

The Keydown Event (onkeydown)

The Keydown event occurs when the viewer presses down a key on the keyboard. The event handler used for this event is onkeydown.

The Keypress Event (onkeypress)

The Keydown event occurs when the viewer presses down a key on the keyboard and the corresponding character is typed. The event handler used for this event is onkeypress.

The Keyup Event (onkeyup)

The Keyup event occurs when the viewer lets go of a key on the keyboard. The event handler used for this event is onkeyup.

The Load Event (onload)

The Load event occurs when a web page finishes loading. The event handler used for this event is onkeyup. Example:


<body onload =
"window.alert('I finished loading the page!');">
Text inside body element.
</body>

The Mousedown Event (onmousedown)

The Mousedown event occurs when the user press down the mouse button but before the click is complete. The event handler used for this event is onmousedown.

The Mousemove Event (onmousemove)

The Mousemove event occurs when the user moves the mouse cursor. The event handler used for this event is onmousemove.

The Mouseover Event (onmouseover)

The Mouseover event occurs when the user moves the mouse cursor over an element on the web page. The event handler used for this event is onmouseover. Example:


<a href="http://saigon.ro" onmouseover =
"window.alert('Link to another page.');" >
Link to another page
</a>

The Mouseout Event (onmouseout)

The Mouseout event occurs when the user moves the mouse cursor away from an element on the web page. The event handler used for this event is onmouseout. Example:


<a href="http://saigon.ro" onmouseout =
"window.alert('Come back and click me.');" >
Link to another page
</a>

The Mouseup Event (onmouseup)

The Mouseup event occurs when the user releases the mouse button after pressing it down. The event handler used for this event is onmouseup.

The Reset Event (onreset)

The Reset event occurs when the user uses a reset button to reset the form fields in a form. The event handler used for this event is onreset.

The Submit Event (onsubmit)

The Submit event occurs only when the user submit a form. The event handler used for this event is onsubmit. Example:


<form onsubmit =
"window.alert('Thank you!');">
<input type="text" id="FullName" />
<input type="text" id="email" />
<input type="submit" value="Submit Form" />
</form>

The Unload Event (onunload)

The Unload event occurs when the user leaves the current web page. The event handler used for this event is onunload. Example:


<body onunload =
"window.alert('Subscribe and come back!');>
Content of the body goes here.
</body>

Leave a Reply