Copyright

JavaScript Event Handlers: Overview & Example

Instructor: Alexis Kypridemos

Alexis is a technical writer for an IT company and has worked in publishing as a writer, editor and web designer. He has a BA in Communication.

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.

JavaScript Events

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.

Event Handlers

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>
<script>
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:

<!DOCTYPE html>
<html>
<body>
Email: <input type=''text'' id=''outline'' onfocus=''outline()'' onblur=''background()''>
<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>
<p>Then click outside the element to trigger the ''background'' function which changes the element's background color to purple.</p>
<script>
function outline() {
document.getElementById(''outline'').style.border = ''1px solid red'';
}
function background() {
document.getElementById(''outline'').style.background = ''purple'';
}
</script>
</body>
</html>

The onblur method inside the input element triggers the background() function. The function changes the input element's background color to purple after the user has first clicked into it (focused it) and then clicked out of it (blurred it).

onchange

Finally, as a last example, we'll have a look at the onchange method. The onchange method can be used to trigger a function when an option is selected in form inputs that offer multiple options, like checkboxes, radio buttons and dropdown menus.

To demonstrate this, we'll take the code used in the previous examples and update the HTML. We'll add three new HTML inputs: a dropdown menu, two checkbox options and two radio button options.

There are no changes to the JavaScript code other than changing the outline() function to make the border 5 pixels thick instead of 1 pixel.

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

Register to view this lesson

Are you a student or a teacher?

Unlock Your Education

See for yourself why 30 million people use Study.com

Become a Study.com member and start learning now.
Become a Member  Back
What teachers are saying about Study.com
Try it risk-free for 30 days

Earning College Credit

Did you know… We have over 160 college courses that prepare you to earn credit by exam that is accepted by over 1,500 colleges and universities. You can test out of the first two years of college and save thousands off your degree. Anyone can earn credit-by-exam regardless of age or education level.

To learn more, visit our Earning Credit Page

Transferring credit to the school of your choice

Not sure what college you want to attend yet? Study.com has thousands of articles about every imaginable degree, area of study and career path that can help you find the school that's right for you.

Create an account to start this course today
Try it risk-free for 30 days!
Create An Account
Support