JavaScript onblur vs onfocusout Events
You are Here:
JavaScript onblur vs onfocusout Events
The onblur event occurs when an element has lost focus.
The onfocusout event occurs when an element is about to lose focus.
The main difference between the onblur event and onfocusout event as follows
- The onblur event will NOT bubble, i.e., The element with
onblurevent will NOT be affected when its child element loses its focus. - The onfocusout event will bubble, i.e., The element with
onfocusoutevent will be affected when its child element loses its focus.
Example
HTML Online Editor
<!DOCTYPE html>
<html>
<body>
<div contenteditable="true">
Focus and blur me (div)
<input type="text" placeholder="Focus and blur me(input)">
</div>
<script>
var x = document.getElementsByTagName("div")[0];
var y = document.getElementsByTagName("input")[0];
x.addEventListener("blur", function(){
console.log("div is in blur");
});
x.addEventListener("focusout", function(){
console.log("div is in focusout");
});
y.addEventListener("blur", function(){
console.log("input is in blur");
});
y.addEventListener("focusout", function(){
console.log("input is in focusout");
});
</script>
</body>
</html>
Reminder
Hi Developers, we almost covered 97% of JavaScript Tutorials with examples for quick and easy learning.
We are working to cover every Single Concept in JavaScript.
Please do google search for:
Join Our Channel
Join our telegram channel to get an instant update on depreciation and new features on HTML, CSS, JavaScript, jQuery, Node.js, PHP and Python.
This channel is primarily useful for Full Stack Web Developer.
