reset重置自动触发change事件演示页面

展示

代码

• HTML：

  <form>
    单价：¥68
    <p>数量：<input id="input" type="number" value="1"> 件</p>
    <p>总价：<output id="output">68</output>元</p>
    <button type="reset">重置</button>
  </form>

• JS：

  // 观察页面所有的form元素，绑定reset事件
  document.addEventListener('reset', function(event) {
      // 事件对象e中的target属性，指向触发事件的元素
      var target = event.target;
      // 如果触发事件的元素是form元素
      if (target.tagName.toLowerCase() === 'form') {
          // 遍历form元素中的所有input元素
          var inputs = [].slice.call(target.elements);
          // 只有当前后值变化的时候才会触发 change 事件
          inputs.forEach(function (input) {
              input.tempValue = input.value;
          });
  
          setTimeout(function () {
              inputs.forEach(function (input) {
                  if (input.tempValue !== input.value) {
                      input.dispatchEvent(new Event('change'));
                  }
              });
          }, 1);
      }
  }, false);
  
  // 正常的业务代码
  input.onchange = function () {
    output.textContent = 68 * this.value;
  };