On Blur Event
Description :
The On Blur event is triggered when a user leaves an input field. The event occurs when an object loses focus. This is most often used with form validation.
Example:
Enter Text:
Write something in the input field and click outside. Since the input tag loses focus, it shoots of the "on-blur" event that is caught by our JS using an event listener which converts the text inputted into upper case. The code for this is provided below:
document.querySelector("input").addEventListener("blur", changeText);
function changeText() {
this.value = this.value.toUpperCase(); // the "this" refers to the element that triggered the event
// which in this case is the input tag.
}