Back to Exercises
Adding and Removing Listeners
Named Handler
function handleClick() {
console.log('clicked');
}
btn.addEventListener('click', handleClick);
btn.removeEventListener('click', handleClick);
Full Code Used in This Demo
HTML
<button id="btnNamed">Click</button>
<button id="btnRemove">Remove Listener</button>
<button id="btnAnon">Click</button>
<div id="out-named"></div>
<div id="out-anon"></div>
CSS
.output { border: 1px solid #c7d2fe; border-radius: 8px; padding: 10px; }
JavaScript
function namedHandler() { document.getElementById('out-named').textContent = 'Named handler fired!'; }
const btnNamed = document.getElementById('btnNamed');
btnNamed.addEventListener('click', namedHandler);