Javascript DOM onchange Event via addEventListener() method

Introduction

In JavaScript, using the addEventListener() method:

object.addEventListener("change",
       myScript);

This example uses the addEventListener() method to attach a "change" event to an input element.

When you leave the input field, a function is triggered which transforms the input text to upper case.

View in separate window

<!DOCTYPE html>
<html>
<body>
Enter your name: <input type="text" id="fname">
<script>
document.getElementById("fname").addEventListener("change", myFunction);

function myFunction() {//from w w  w  .  j a v a 2 s. com
  var x = document.getElementById("fname");
  x.value = x.value.toUpperCase();
}
</script>

</body>
</html>

Bubbles:
Cancelable:
Event type:
Supported HTML tags:

Yes
No
Event
<input type="checkbox">,
<input type="color">,
<input type="date">,
<input type="datetime">,
<input type="email">,
<input type="file">,
<input type="month">,
<input type="number">,
<input type="password">,
<input type="radio">,
<input type="range">,
<input type="search">,
<input type="tel">,
<input type="text">,
<input type="time">,
<input type="url">,
<input type="week">,
<select> and
<textarea>

Previous Next

Javascript DOM onchange Event via addEventListener() method

Introduction

Related