A focus event fires when the user focuses on an element like a text input element by clicking on it or cycling to it with the tab key on a keyboard. When working out a user interface you might want some code to run when an element that can be focused on gains this focus, but you might also want some code to run when that element looses this focus, and that is where the on blur event comes into play.
1 - On blur basics and what to know before continuing to read
- These examples are on github
The source code examples here can be found on my test vjs github repository along with all my other source code examples for my many other posts on vanilla javaScipt. This post like many others is still a work in progress, so I do get around to editing the content here now and then. This Github repository is then where I have the latest revous of the source code along with any notes about possible future edits of the post if need be.
1.1 - On blur basic example
The use of an on blur event might be used in conjunction with an on focus event, as well as a whole range of other events to create a user interface for a form, single input element, or anything else for the matter to which focus events apply.
The focused element in the interface is the current element that the user is focused on, and as such the value of the element can be manipulated with input from the keyboard. So with that being said the on change event is also yet another event of interest when it comes to setting events for that kind of change. So the on focus event will fire when an element gets this focus, and the on blur event will fire when this focus is lost.
So with that being said here is a basic example of the on blur event in which I am attaching some event handlers for both the on focus, and on blur events for a single input element. I will be keeping this example simple so it will just involve changing the value of an text input tag.
So in the script tag I am just getting a reference to a single input element, and then attaching some event handers for the on blur event, as well as the corresponding on focus event as well. In there I will be grabbing a reference to the input element and will be attaching events for on blur, and on focus.
When I open this up in the browser the on focus event fires for the input element when I click on it. When I click outside of the input element the on blur event will fire changing the value of the text in the input element The on blur event does not bubble though so if I where to attach an on blur event to a div container it will not bubble down to an input element. The focus out event however will bubble down, which it would seem is the only note worth difference between on blur, and focus out.
2 - On blur, on focus out and bubbling
The on blur event works fine, and so does the on focus out event. On the surface it would seem that they both work the same way, these events happen when an element looses focus. However there is just one little difference between on blur and on focus out, and that difference has to do with event bubbling. The focus out event when attached to a container element will fire when a child element inside of it has lost focus and nothing is done to cancel the bubbling.
Say you have a container element that has two or more elements in it that can gain and loose focus. The on blur event can be used to attach event handers for when the elements lose focus, but a handler must be attached for each element. However a single focus out event can be attached to the container of the elements of interest.
The focus in event can be attached to the container that will fire whenever an element inside the container gains focus, and the focus out event can be attached for when any element in the container losses focus just like with on blur.
If I where to use on blur and on focus in place of these events when attaching to the container element this example will not work. So the on blur event is something that must be used on a per element bases.
3 - Canvas elements and the tab index property
By default canvas elements and a whole bunch of other elements can not be focused by default. There is however the tab index html element attribute. Once a tab index attribute is set for an element then it can be focused just like an input element or any other kind of element that can be focused by default. So the on focus event will fire when the canvas element gains focus, and the on blur event will fire when it looses focus as well.
In this example I have a canvas project where I define some event handers for the on blur, and on focus events once it has become focusable in the browser thanks to the tab index attribute.
It just displays if the canvas has the users focus or not, but of course I could have it do something else when the project has focus. Generally you want to avoid using the tab index property with canvas elements, unless you take the time to make the element keyboard friendly. There are of course accessibility concerns when it comes to cycling throw things on a page with the tab key on desktop systems. The on blur event does not need to be used with everything something else could be worked out when it comes to canvas elements with other events.
4 - Simulating blur and focus events
5 - Conclusion
So the the on blur event is useful for defining some logic that will fire when a user moves the focus of an element away from an element. It is often used in conjunction with the on focus event that will fore when the focus of an element is gained. If I get some more time sooner or later I might get around to writing some better examples that involve a great deal more going on when it comes to using the on blur event in a project. For now I hope you enjoyed this post and got at least something of value out of reading it.