在javascript中，如何确定并调用继承的侦听器？ [英] in javascript, how to determine and call inherited listeners?

问题描述

如果更改侦听器附加到项目，则可以使用 item.onchange（）调用它。但是如果更改触发器从父节点发出怎么办？

If a change listener is attached to an item, it can be called with item.onchange(). But what if the change trigger emanates from a parent node?

上下文：使用输入事件来捕获/更改INPUT类型='数字'项目，因为更改 不捕获它们。

The context: use a input event to capture up/down changes on an INPUT type='number' item since change does not capture them.

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

Theory of operation: use input to capture, but wait 500 ms before calling normal change listeners. Easy when the change listener is attached directly to the target element. The problem is needed to call inherited change triggers as well - how do I know if any exist, and how do I call them?

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 ，但我现在看到确定是否确实如此的方式 - 哪个意味着攀登祖先将无法工作。

The only way I see to do this is to manually go through ancestors, checking for existence and calling as I go. But that leads to the next problem: any one of these listener functions may have issued as e.stopPropagation, but I see now way of determining if this is indeed the case - which means climbing ancestors will not work.

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

as per @Andy E answer on How can I trigger an onchange event manually?, here is the solution:

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： useCapture （第三）arg到 addEventListener 错误 - 需要为false，因此在表单触发器之前调用item触发器。

note 1: that the useCapture (third) arg to addEventListener was wrong - needs to be false so item triggers are called before form triggers.

note 2 ：这个函数可能更适合'click'而不是'input' - 'click'的问题是需要将焦点和文本定位点击与点击更改值区分开来。

note 2: this function would probably be better suited to 'click' than 'input' - the problem with 'click' is that focus and text positioning clicks need to be distinguished from click changing the value.

推荐答案

根据@Andy E回答如何我可以手动触发onchange事件吗？，构建事件并发送。已经在问题中加入了详细信息。

as per @Andy E in answer to How can I trigger an onchange event manually?, build an event and dispatch. have put details in the question.

btw， onchange 设置当且仅当 更改触发器是通过 onchange 属性设置的，不是设置为 addEventListener（'change'，...）

btw, onchange is set if and only if the change trigger was set through an onchange attribute, not with addEventListener('change',...)

这篇关于在javascript中，如何确定并调用继承的侦听器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！