var myElement = document.querySelector('#my-element');

myElement.addEventListener('input', function() {
    console.log('oninput event occurred.');
});

or:

<input type="text" oninput="handleInput()">

or:

var myElement = document.querySelector('#my-element');

myElement.oninput = function() {
    console.log('oninput event occurred.');
};

Practical examples

There are three common ways how to use oninput event:

with event listener,
with element attribute,
with element property.

1. Event listener based example

In this section, we want to show how to use oninput event on input element via event listener mechanism.

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
  <body>
    <input type="text" id="my-input">
    <script>
      var myInput = document.querySelector('#my-input');

      myInput.addEventListener('input', function() {
        console.log('oninput event occurred.');
      });
    </script>
  </body>
</html>

2. Attribute based example

In this section, we want to show how to use oninput event on input element via attribute.

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
  <body>
    <input type="text" oninput="handleInput()">
    <script>
      function handleInput(){
        console.log('oninput event occurred.');
      }
    </script>
  </body>
</html>

3. Property based example

In this section, we want to show how to use oninput event on input element via property.

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
  <body>
    <input type="text" id="my-input">
    <script>
      var myInput = document.querySelector('#my-input');

      myInput.oninput = function() {
        console.log('oninput event occurred.');
      };
    </script>
  </body>
</html>