When I open this file up in the browser and click on the foo input tag the event tag of the element and the string ‘foo’ log to the console as expected.
So there is the focus event that fires when an element gets the focus, and then there is the blur event that fires when that element looses the focus for whatever the reason. The focus can be lost for a wide range of reasons, but often it is because the user just simply moved on to another element in a form or click another area of the page.
In this example I will be making use of both the focus and blur events. I have two text input events that can be used to set some x and y values, and a div element that can be used to display messages. in the event that an input looses focus the message divs content is cleared, while the message div displays a message for the input element when it gains focus.