Merge pull request #13932 from mike-000/remove-range-change

Remove input type="range" `change` event listeners where `input` events are also used

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) => {

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;
 });

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 () {

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);
+});

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);
+});

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()));

examples/layer-opacity.js

@@ -38,5 +38,4 @@ function update() {
   opacityOutput.innerText = opacity.toFixed(2);
 }
 opacityInput.addEventListener('input', update);
-opacityInput.addEventListener('change', update);
 update();

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);
+});

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;

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);
+});

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) {

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;
 });

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);
+});

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');

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({

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);
+  });
 }

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();