JavaScript DOM & Events
Events bubble up the tree; handlers mutate the DOM.
Document tree
body
├─ h1#title
└─ ul#list
└─ li#alpha
└─ li#beta
const list = document.getElementById('list');
list.addEventListener('click', (e) => {
console.log('target:', e.target.tagName); // LI
console.log('current:', e.currentTarget.tagName); // UL — bubble
});
Event log
DOM loaded — document.readyState = 'complete'