Teaching proper event delegation

by jonjohnjohnson

HTML

<section class="nope">
  <main>
    <header>header</header>
    <section data-toggled>
      <div>inner</div>
    </section>
    <section data-toggled>
      <div>inner</div>
    </section>
  </main>
</section>

CSS

body { background: red; }
body * {
  padding: 1rem;
  border: .5rem solid black;
  background: inherit;
}
[data-toggled] { cursor: pointer; }
[data-toggled="true"] { background: green; }

JavaScript

const sections = document.querySelector('main');  
function checkForSection(event) {
  let section = event.target.closest('section');
  if (!section || !event.currentTarget.contains(section)) return;
  return section.dataset.toggled = (section.dataset.toggled) ? '' : 'true';
}
sections.addEventListener('click', checkForSection);