JavaScript Event Handlers: Overview & Example

Web Developer

Technical Writer

CSS

HTML5

JavaScript

Events in HTML can be triggered by the browser or a user action and JavaScript event handlers respond to these events through scripts. The use of the common form event handlers onblur, onchange and onfocus is demonstrated through examples.

Events in JavaScript refer to the actions, typically of the user, that can occur on an HTML page to modify it in some way, for instance clicking on an element to change its color or select a checkbox. In addition to events that are associated with the form itself, there are also events linked to other user actions such as keyboard and mouse events.

To unlock this lesson you must be a Study.com Member. Create your account

2.8K views

Event handlers, also called event listeners are the built-in JavaScript methods that can be used in the code to have it respond in some way to one of these events or actions performed by the user. A typical example would be to use the onclick method to display a message when the user clicks on a specific element like a button.

Common Event Handlers

Some common form event handlers are onfocus, onblur, and onchange .

onfocus

Onfocus is the method used to trigger a function or other reaction when an element becomes focused. Elements that can be focused are most frequently form elements and links in HTML, like <input>, <select>, and <a>.

Elements can be focused by clicking on them, or by using the keyboard, for example the Tab key. When an element is focused, a dotted outline appears around it. If the element can accept input, like a text input field, the cursor will also start flashing inside the field. Depending on whether there are any Cascading Style Sheets (CSS) rules attached to the HTML element, it may also change color or other style attribute when focused.

In fact, changing the element's CSS style attribute when it becomes focused is a good example of how the onfocus method can be used.

<!DOCTYPE html>

<html>

<body>

Email: <input type=''text'' id=''outline'' onfocus=''outline()''>

<p>Click in the text input to focus the element.<br/>

This will trigger the ''outline'' function which adds a red outline around the element.</p>

function outline() {

document.getElementById(''outline'').style.border = ''1px solid red'';

}

</script>

</body>

</html>

In the example above, the text input with the id ''outline'' also includes the onfocus method: onfocus="outline()". Notice how the method is used here to call the function outline(). Also notice that the method is included inside the element's opening and closing tags < >.

The outline() function is defined below, inside the <script> and </script> tags.

The function identifies the ''outline'' text input by its ID, and then uses the style and border methods to add a red, solid, 1 pixel-width border to the element.

onblur

Blur is the opposite of focus. An element becomes blurred when it was first focused, and then the user clicks somewhere outside the element. As a result, any dotted outline or color change to the element no longer appears.

To demonstrate how this works, we will update the example above and add an onblur method inside the <input> element. Also, we will add a second function inside the <script> </script> tags which the onblur method will call.

The new code is this:

To unlock this lesson you must be a Study.com Member. Create your account