JSFiddle - React, Tailwind, and code Playground

by sfoster

HTML

<select accesskey="w">
      <option accesskey="f">Foo</option>
      <option accesskey="b">Bar</option>
      <option accesskey="z">Baz</option>
    </select>

    <select multiple="true">
      <option>Foo</option>
      <option>Bar</option>
      <option>Baz</option>
    </select>

JavaScript

function addListeners(elm) {
  console.log('adding events to :', elm);
  elm.addEventListener('mouseover', (evt) => { console.log('mouseover: ', evt.target, evt); });
  elm.addEventListener('mouseout', (evt) => { console.log('mouseout: ', evt.target, evt); });
  elm.addEventListener('click', (evt) => { console.log('click: ', evt.target, evt); });
  elm.addEventListener('focus', (evt) => { console.log('focus: ', evt.target, evt); });
  elm.addEventListener('keyup', (evt) => { console.log('keyup: ', evt.target, evt); });
}
for(let el of document.querySelectorAll('select')) {
  addListeners(el);
  for(let o of el.options) {
    addListeners(o);
  }
}

document.querySelectorAll('select').onchange = function(e) {
  var selectedOption = e.target.selectedOptions[0];
  console.log('onchange: ', selectedOption.textContent);
}