input vs change
Das input-Event feuert direkt, wenn sich der Wert eines input- oder textarea-Elements ändert. Und noch ein Unterschied zu onchange: oninput löst auch auf select-Elementen aus und wenn der Benutzer den Inhalt eines contenteditable-Elements ändert.
Ein input-Event wird ausgelöst oder gefeuert, wenn sich der Wert eines <input>, <select> oder <textarea>-Elements ändert.
input-Event auf input type="number"
Mit HTML5 gibt neben dem klassischen input type="text" auch input type="number". Das Eingabefeld zeigt Pfeile, mit denen die Eingabe rauf- bzw. runterzählt. Beim Inkrement bzw. Dekrement feuert das Event oninput.
<input type="number" id="mynum"> <output for="mynum"></output>
const mynum = document.getElementById('mynum');
const output = document.querySelector("output[for='mynum']");
mynum.oninput = function (eve) {
output.value = this.value;
}
input-Event auf input type="range"
Mit onchange zeigt sich der Wert eines Range-Sliders erst, wenn der Slider losgelassen wurde. Das input-Event feuert während des Ziehens und gibt dem Benutzer eine bessere Kontrolle in die Hand.
<input type="range" name="range" id="range" min="-4" max="4">
<output for="range"></output>
const range = document.querySelector("#range");
const output = document.querySelector("output[for='slider']");
range.addEventListener ("input", function () {
output.value = this.value;
});
