在Javascript中，如何确定并调用继承的监听器？

Question

如果 change 侦听器附加到某个项目，则可以使用 item.onchange() 调用它。但是如果更改触发器来自父节点怎么办？

上下文：使用 input 事件捕获 INPUT type='number' 项上的向上/向下更改，因为 change 不会捕获它们。

操作原理：使用 input 捕获，但在调用普通 change 侦听器之前等待 500 毫秒。当 change 侦听器直接附加到目标元素时很容易。问题还需要调用继承的更改触发器 - 我如何知道是否存在，以及如何调用它们？

HTML：

<form id='f'>
  <input type='number' id='i' />
</form>

Javascript：

// attach main onchange trigger to form
document.getElementById('f').addEventListener('change',changeFunc,true);

// if user "scrolls" number value, do same as change trigger after 500 ms
var inputCt = 0;
function inputToChange(e) {
   inputCt++;
   setTimeout( next, 500 );
   function next() {
      inputCt--;
      if( !inputCt ) {
         // if element has it's own change trigger, call it
         if( e.target.onchange ) e.target.onchange(e);
         // PROBLEM - how to call inherited change triggers
      }
   }
}
document.getElementById('f').addEventListener('input',inputChange,true);

我认为做到这一点的唯一方法是手动遍历祖先，检查是否存在并边调用边调用。但这导致了下一个问题：这些侦听器函数中的任何一个都可能以 e.stopPropagation 的形式发出，但我现在看到了确定情况是否确实如此的方法 - 这意味着攀登祖先将不起作用。

---

根据 @Andy E 的回答 如何手动触发 onchange 事件？，这是解决方案：

Javascript：

// attach main onchange trigger to form
document.getElementById('f').addEventListener('change',changeFunc,false);

// if user "scrolls" number value, do same as change trigger after 500 ms
var inputCt = 0;
function inputToChange(e) {
   inputCt++;
   setTimeout( next, 500 );
   function next() {
      inputCt--;
      if( inputCt ) return;
      var change = var change = document.createEvent("Event");
      change.initEvent('change',true,true);
      e.target.dispatchEvent(change);
   }
}
document.getElementById('f').addEventListener('input',inputChange,false);

注意 1：addEventListener 的 useCapture （第三个）参数是错误的 - 需要为 false，以便在之前调用项目触发器形式触发器。

注意2：这个函数可能比“输入”更适合“点击”——“点击”的问题是焦点和文本定位点击需要与改变值的点击区分开来。

Answer 1

我相信，使用 jQuery，$(e.target).change() 应该可以完成这项工作。或者 $(e.target).trigger(eventname)，在您的情况下使用 eventname = 'change' ，以及一般的任何其他事件名称。

显然，change 事件仅对 input、textarea 和 select 有效，并且不能嵌套。因此，当父级定义需要在子级事件处理程序之后触发的更改事件处理程序时，您不会遇到问题。

Answer 2

在事件侦听器中，创建对 this 对象的引用（例如，var that = this;）。然后，您可以在 next 的正文中使用 that.onchange(e); 。

Answer 3

更改甚至不会在“向上/向下”上触发我假设您的意思是向上/向下箭头？

如果是这种情况，您将需要捕获这些按键事件的按键事件（按键、向上键、向下键等）。

Answer 4

按照 @Andy E 回答 如何手动触发 onchange 事件？，构建一个事件和调度。已在问题中提供详细信息。

顺便说一句，当且仅当通过 onchange 属性设置 change 触发器时，才会设置 onchange，不使用addEventListener('change',...)