Optimized multiple eventlistener for change events

  <div class="controls">
    <label for="spacing">Spacing:</label>
    <input id="spacing" type="range" name="spacing" min="10" max="200" value="10" data-sizing="px">

    <label for="blur">Blur:</label>
    <input id="blur" type="range" name="blur" min="0" max="25" value="10" data-sizing="px">

    <label for="base">Base Color</label>
    <input id="base" type="color" name="base" value="#ffc600">
  </div>

Add 1 event listener for the container but target the input nodes:

    const controls = document.querySelector('.controls');
    function handleUpdate() {
      console.log(this.value);
    }
    controls.addEventListener("change", function(event){
      event.preventDefault();
      if(event.target.nodeName == "INPUT") {
        handleUpdate.call(event.target);
      }
    });

Add your comment