<form method="post" action="">
     <p>「input イベント」<br>入力するたびにイベントが発生します。</p>
    <input type="text" name="test1">
    <input type="text" name="test2">
    <p id="text_val">「input イベント」:<span></span></p>
    <p id="text_val2">「change イベント」:<span></span></p>
</form>


body{
  display:flex;
  flex-flow:column nowrap;
  align-items:center;
}

form{
  width:150px;
  font-size:12px;
}

input,p{
  width:100%;
}

input[name="test2"]{
  display:none;
}

span{
  color:#ff0000;
}
let input = document.querySelector("input[name='test1']");
let text_val = document.querySelector("#text_val > span");
let text_val2 = document.querySelector("#text_val2 > span");

let inputChange = (e) => {
    text_val.textContent = "入力されました！"
}
let inputChange2 = (e) => {
    text_val2.textContent = "入力されました！"
}

input.addEventListener('input', inputChange);
input.addEventListener('change', inputChange2);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.