menu-item-select

by Vladymyr Shevchuk

HTML

<menu id="menu">
  <ul>
    <li data-item="item-1">Item 1</li>
    <li data-item="item-2">Item 2</li>
    <li data-item="item-3">Item 3</li>
  </ul>
</menu>

<div>
  Selected menu item: <span id="holder"></span>  
</div>

JavaScript

menu.addEventListener('click', event => {
	console.error('event', event.target);

  if (menu.contains(event.target)) {
  	const { item } = event.target.dataset;

		if (item) {
    	menu.dispatchEvent(new CustomEvent('menu-item-select', { 
      	bubbles: true,
        detail: item
      }));
    }
  }
});

document.addEventListener('menu-item-select', event => {
  holder.textContent = event.detail;
});