Event bubbling
document.querySelector('.card-title').addEventListener('click', function(e) { console.log('card title'); }); document.querySelector('.card-content').addEventListener('click', function(e) { console.log('card content'); }); document.querySelector('.card').addEventListener('click', function(e) { console.log('card'); }); document.querySelector('.col').addEventListener('click', function(e) { console.log('col'); });
Event delegation
Remove element by click event
document.body.addEventListener('click', deleteItem); function deleteItem(e){ if(e.target.parentElement.classList.contains('delete-item') ){ console.log('Delete item'); e.target.parentElement.parentElement.remove(); } }
HTML
<ul class="collection"> <li class="collection-item">List Item 1 <a href="#" class="delete-item secondary-content"><i class="fa fa-remove"></i></a> </li> <li class="collection-item">List Item 2 <a href="#" class="delete-item secondary-content"><i class="fa fa-remove"></i></a> </li> </ul>
Leave a Reply