JavaScript onfocus vs onfocusin Events
You are Here:
JavaScript onfocus vs onfocusin Events
The onfocus event occurs when an element gets focus.
The onfocusin event occurs when an element is about to get focus.
The main difference between the onfocus event and onfocusin event as follows
- The onfocus event will NOT bubble, i.e., The element with
onfocusevent will NOT be affected when its child element gets focus. - The onfocusin event will bubble, i.e., The element with
onfocusinevent will be affected when its child element gets focus.
Example
HTML Online Editor
<!DOCTYPE html>
<html>
<body>
<div contenteditable="true">
Focus me (div)
<input type="text" placeholder="Focus me (input)">
</div>
<script>
var x = document.getElementsByTagName("div")[0];
var y = document.getElementsByTagName("input")[0];
x.addEventListener("focus", function(){
console.log("div is in focus");
});
x.addEventListener("focusin", function(){
console.log("div is in focusin");
});
y.addEventListener("focus", function(){
console.log("input is in focus");
});
y.addEventListener("focusin", function(){
console.log("input is in focusin");
});
</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.
