EN
JavaScript - focus and focusin differences
0
points
In this article, we would like to show you the differences between focus and focusin events in JavaScript.
The difference between focus and focusin:
focus- doesn't bubble, can't be delegated,focusin- bubbles to the parent element, can be delegated.
Practical example
In this example, we will try to add two event listeners to the my-div element, but only focusin will occur when we set focus on the <input> element inside.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<body>
<div id="my-div">
<p>Click on the input to set focus.</p>
<input type="text" />
</div>
<script>
var div = document.getElementById('my-div');
// this will not work, focus event doesn't bubble
div.addEventListener('focus', handleOnfocus, false);
// this works fine when the input is focused, as the focusin event bubbles
div.addEventListener('focusin', handleOnfocusin, false);
function handleOnfocus() {
console.log('onfocus event occurred.');
}
function handleOnfocusin() {
console.log('onfocusin event occurred.');
}
</script>
</body>
</html>