用input[type="reset"]去重置input.oninput这样的文本框，为什么没有触发oninput事件？

Question

  <form action="">
    <input type="text">
    <input type="reset">
  </form>
  <script>
    let _input = document.getElementsByTagName("input")[0];
    // 当一个 <input>, <select>, 或 <textarea> 元素的 value 被修改时，会触发 input 事件。
    _input.oninput = function () {
      console.log(this.value);
      console.log("当输入文字，再按重置后，你为什么不触发");
    }

    let reset = document.querySelector('input[type="reset"]');
    reset.onclick = function () {
      setTimeout(function () {
        // 由此可以看出 _input.value 变为  "",
        console.log(_input.value);
      }, 2000)
    }

    // 划重点
    // 那用input[type="reset"]去重置input.oninput这样的文本框，为什么没有触发oninput事件？
  </script>

Answer 1

根据标准HTML技术文档：
https://html.spec.whatwg.org/...

特别引用以下内容

Each resettable element defines its own reset algorithm. Changes made to form controls as part of these algorithms do not count as changes
caused by the user (and thus, e.g., do not cause input events to fire).

表单中的重置动作，不会引起input事件

Answer 2

// 对形成控件所做的更改不计入用户引起的更改
// 也就是说，重置按钮的更改不计入用户引起的更改
// 所以当文本框中有内容的时候，按下input.reset，也不会触发 input 事件
// 有内容 + 失焦后 + 按下input.reset 不会触发 change