diff --git a/examples/cluster.js b/examples/cluster.js
index 18aa6cd223..125325b20f 100644
--- a/examples/cluster.js
+++ b/examples/cluster.js
@@ -77,17 +77,13 @@ const map = new Map({
   }),
 });
 
-const distanceHandler = function () {
+distanceInput.addEventListener('input', function () {
   clusterSource.setDistance(parseInt(distanceInput.value, 10));
-};
-distanceInput.addEventListener('input', distanceHandler);
-distanceInput.addEventListener('change', distanceHandler);
+});
 
-const minDistanceHandler = function () {
+minDistanceInput.addEventListener('input', function () {
   clusterSource.setMinDistance(parseInt(minDistanceInput.value, 10));
-};
-minDistanceInput.addEventListener('input', minDistanceHandler);
-minDistanceInput.addEventListener('change', minDistanceHandler);
+});
 
 map.on('click', (e) => {
   clusters.getFeatures(e.pixel).then((clickedFeatures) => {
diff --git a/examples/color-manipulation.js b/examples/color-manipulation.js
index 72f4bf9ec8..dade6aeed2 100644
--- a/examples/color-manipulation.js
+++ b/examples/color-manipulation.js
@@ -166,12 +166,10 @@ const controlIds = ['hue', 'chroma', 'lightness'];
 controlIds.forEach(function (id) {
   const control = document.getElementById(id);
   const output = document.getElementById(id + 'Out');
-  const listener = function () {
+  control.addEventListener('input', function () {
     output.innerText = control.value;
     raster.changed();
-  };
-  control.addEventListener('input', listener);
-  control.addEventListener('change', listener);
+  });
   output.innerText = control.value;
   controls[id] = control;
 });
diff --git a/examples/filter-points-webgl.js b/examples/filter-points-webgl.js
index 2306684b78..0d1da9892d 100644
--- a/examples/filter-points-webgl.js
+++ b/examples/filter-points-webgl.js
@@ -55,27 +55,23 @@ const style = {
 const minYearInput = document.getElementById('min-year');
 const maxYearInput = document.getElementById('max-year');
 
-function updateMinYear() {
-  style.variables.minYear = parseInt(minYearInput.value);
-  updateStatusText();
-}
-function updateMaxYear() {
-  style.variables.maxYear = parseInt(maxYearInput.value);
-  updateStatusText();
-}
 function updateStatusText() {
   const div = document.getElementById('status');
   div.querySelector('span.min-year').textContent = minYearInput.value;
   div.querySelector('span.max-year').textContent = maxYearInput.value;
 }
 
-minYearInput.addEventListener('input', updateMinYear);
-minYearInput.addEventListener('change', updateMinYear);
-maxYearInput.addEventListener('input', updateMaxYear);
-maxYearInput.addEventListener('change', updateMaxYear);
+minYearInput.addEventListener('input', function () {
+  style.variables.minYear = parseInt(minYearInput.value);
+  updateStatusText();
+});
+maxYearInput.addEventListener('input', function () {
+  style.variables.maxYear = parseInt(maxYearInput.value);
+  updateStatusText();
+});
 updateStatusText();
 
-// load data
+// load data;
 const client = new XMLHttpRequest();
 client.open('GET', 'data/csv/meteorite_landings.csv');
 client.onload = function () {
diff --git a/examples/heatmap-earthquakes.js b/examples/heatmap-earthquakes.js
index c07661b088..dda63b69e4 100644
--- a/examples/heatmap-earthquakes.js
+++ b/examples/heatmap-earthquakes.js
@@ -42,14 +42,10 @@ new Map({
   }),
 });
 
-const blurHandler = function () {
+blur.addEventListener('input', function () {
   vector.setBlur(parseInt(blur.value, 10));
-};
-blur.addEventListener('input', blurHandler);
-blur.addEventListener('change', blurHandler);
+});
 
-const radiusHandler = function () {
+radius.addEventListener('input', function () {
   vector.setRadius(parseInt(radius.value, 10));
-};
-radius.addEventListener('input', radiusHandler);
-radius.addEventListener('change', radiusHandler);
+});
diff --git a/examples/igc.js b/examples/igc.js
index a73838b6d0..9f700a9190 100644
--- a/examples/igc.js
+++ b/examples/igc.js
@@ -180,7 +180,7 @@ const featureOverlay = new VectorLayer({
 });
 
 const control = document.getElementById('time');
-const listener = function () {
+control.addEventListener('input', function () {
   const value = parseInt(control.value, 10) / 100;
   const m = time.start + time.duration * value;
   vectorSource.forEachFeature(function (feature) {
@@ -199,6 +199,4 @@ const listener = function () {
     }
   });
   map.render();
-};
-control.addEventListener('input', listener);
-control.addEventListener('change', listener);
+});
diff --git a/examples/layer-group.js b/examples/layer-group.js
index 0df7dc34db..8d82050b27 100644
--- a/examples/layer-group.js
+++ b/examples/layer-group.js
@@ -49,7 +49,7 @@ function bindInputs(layerid, layer) {
   visibilityInput.prop('checked', layer.getVisible());
 
   const opacityInput = $(layerid + ' input.opacity');
-  opacityInput.on('input change', function () {
+  opacityInput.on('input', function () {
     layer.setOpacity(parseFloat(this.value));
   });
   opacityInput.val(String(layer.getOpacity()));
diff --git a/examples/layer-opacity.js b/examples/layer-opacity.js
index 4d16c9874b..e5f277505a 100644
--- a/examples/layer-opacity.js
+++ b/examples/layer-opacity.js
@@ -38,5 +38,4 @@ function update() {
   opacityOutput.innerText = opacity.toFixed(2);
 }
 opacityInput.addEventListener('input', update);
-opacityInput.addEventListener('change', update);
 update();
diff --git a/examples/layer-swipe.js b/examples/layer-swipe.js
index 8e6cd5c35c..5a7f23f912 100644
--- a/examples/layer-swipe.js
+++ b/examples/layer-swipe.js
@@ -57,8 +57,6 @@ aerial.on('postrender', function (event) {
   ctx.restore();
 });
 
-const listener = function () {
+swipe.addEventListener('input', function () {
   map.render();
-};
-swipe.addEventListener('input', listener);
-swipe.addEventListener('change', listener);
+});
diff --git a/examples/numpytile.js b/examples/numpytile.js
index bd540b5497..973fa9b953 100644
--- a/examples/numpytile.js
+++ b/examples/numpytile.js
@@ -83,25 +83,21 @@ const inputMax = document.getElementById('input-max');
 const outputMin = document.getElementById('output-min');
 const outputMax = document.getElementById('output-max');
 
-const handleMin = (evt) => {
+inputMin.addEventListener('input', (evt) => {
   numpyLayer.updateStyleVariables({
     'bMin': parseFloat(evt.target.value),
     'bMax': parseFloat(inputMax.value),
   });
   outputMin.innerText = evt.target.value;
-};
-inputMin.addEventListener('input', handleMin);
-inputMin.addEventListener('change', handleMin);
+});
 
-const handleMax = (evt) => {
+inputMax.addEventListener('input', (evt) => {
   numpyLayer.updateStyleVariables({
     'bMin': parseFloat(inputMin.value),
     'bMax': parseFloat(evt.target.value),
   });
   outputMax.innerText = evt.target.value;
-};
-inputMax.addEventListener('input', handleMax);
-inputMax.addEventListener('change', handleMax);
+});
 
 inputMin.value = initialMin;
 inputMax.value = initialMax;
diff --git a/examples/region-growing.js b/examples/region-growing.js
index 26477b7345..c8e293b26e 100644
--- a/examples/region-growing.js
+++ b/examples/region-growing.js
@@ -137,9 +137,7 @@ function updateControlValue() {
 }
 updateControlValue();
 
-const listener = function () {
+thresholdControl.addEventListener('input', function () {
   updateControlValue();
   raster.changed();
-};
-thresholdControl.addEventListener('input', listener);
-thresholdControl.addEventListener('change', listener);
+});
diff --git a/examples/sea-level.js b/examples/sea-level.js
index ab4ae604ce..b9282d929e 100644
--- a/examples/sea-level.js
+++ b/examples/sea-level.js
@@ -65,12 +65,10 @@ const map = new Map({
 
 const control = document.getElementById('level');
 const output = document.getElementById('output');
-const listener = function () {
+control.addEventListener('input', function () {
   output.innerText = control.value;
   raster.changed();
-};
-control.addEventListener('input', listener);
-control.addEventListener('change', listener);
+});
 output.innerText = control.value;
 
 raster.on('beforeoperations', function (event) {
diff --git a/examples/shaded-relief.js b/examples/shaded-relief.js
index 7ed0a2569c..0ef7f2b5ba 100644
--- a/examples/shaded-relief.js
+++ b/examples/shaded-relief.js
@@ -159,12 +159,10 @@ const controls = {};
 controlIds.forEach(function (id) {
   const control = document.getElementById(id);
   const output = document.getElementById(id + 'Out');
-  const listener = function () {
+  control.addEventListener('input', function () {
     output.innerText = control.value;
     raster.changed();
-  };
-  control.addEventListener('input', listener);
-  control.addEventListener('change', listener);
+  });
   output.innerText = control.value;
   controls[id] = control;
 });
diff --git a/examples/webgl-layer-swipe.js b/examples/webgl-layer-swipe.js
index 51af56892c..dab95d2bca 100644
--- a/examples/webgl-layer-swipe.js
+++ b/examples/webgl-layer-swipe.js
@@ -53,8 +53,6 @@ imagery.on('postrender', function (event) {
   gl.disable(gl.SCISSOR_TEST);
 });
 
-const listener = function () {
+swipe.addEventListener('input', function () {
   map.render();
-};
-swipe.addEventListener('input', listener);
-swipe.addEventListener('change', listener);
+});
diff --git a/examples/webgl-sea-level.js b/examples/webgl-sea-level.js
index 0861bad56b..02a00cf761 100644
--- a/examples/webgl-sea-level.js
+++ b/examples/webgl-sea-level.js
@@ -69,12 +69,10 @@ const map = new Map({
 
 const control = document.getElementById('level');
 const output = document.getElementById('output');
-const listener = function () {
+control.addEventListener('input', function () {
   output.innerText = control.value;
   layer.updateStyleVariables({level: parseFloat(control.value)});
-};
-control.addEventListener('input', listener);
-control.addEventListener('change', listener);
+});
 output.innerText = control.value;
 
 const locations = document.getElementsByClassName('location');
diff --git a/examples/webgl-shaded-relief.js b/examples/webgl-shaded-relief.js
index 3f4e431621..778c60e1e2 100644
--- a/examples/webgl-shaded-relief.js
+++ b/examples/webgl-shaded-relief.js
@@ -66,12 +66,10 @@ controlIds.forEach(function (id) {
     variables[id] = Number(control.value);
   }
   updateValues();
-  const listener = function () {
+  control.addEventListener('input', function () {
     updateValues();
     shadedRelief.updateStyleVariables(variables);
-  };
-  control.addEventListener('input', listener);
-  control.addEventListener('change', listener);
+  });
 });
 
 const map = new Map({
diff --git a/examples/webgl-tile-style.js b/examples/webgl-tile-style.js
index 5e66d60b38..dcbbf9e242 100644
--- a/examples/webgl-tile-style.js
+++ b/examples/webgl-tile-style.js
@@ -44,13 +44,11 @@ for (variable in variables) {
   const value = variables[name];
   element.value = value.toString();
   document.getElementById(name + '-value').innerText = value.toFixed(2);
-  const listener = function (event) {
+  element.addEventListener('input', function (event) {
     const value = parseFloat(event.target.value);
     document.getElementById(name + '-value').innerText = value.toFixed(2);
     const updates = {};
     updates[name] = value;
     layer.updateStyleVariables(updates);
-  };
-  element.addEventListener('input', listener);
-  element.addEventListener('change', listener);
+  });
 }
diff --git a/examples/wmts-dimensions.js b/examples/wmts-dimensions.js
index 901554b14e..cb8328e88c 100644
--- a/examples/wmts-dimensions.js
+++ b/examples/wmts-dimensions.js
@@ -67,5 +67,4 @@ const updateSourceDimension = function () {
   document.getElementById('theinfo').innerHTML = slider.value + ' meters';
 };
 slider.addEventListener('input', updateSourceDimension);
-slider.addEventListener('change', updateSourceDimension);
 updateSourceDimension();