Event delegation

by Artem

HTML

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event -->

<form id="form">
  <input type="text" placeholder="text input">
  <input type="password" placeholder="password">
</form>
<h1>Hello</h1>

JavaScript

const form = document.getElementById('form');

form.addEventListener('focus', (event) => {
  event.target.style.background = 'pink';    
}, true);

form.addEventListener('blur', (event) => {
  event.target.style.background = '';    
}, true);

document.addEventListener("focus", function() {
  console.log('ff'); 
});
document.addEventListener("visibilitychange", () => {
	console.log('vis');  
}, false);


window.onfocus = () => {
	console.log(1);
};