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

如果一个

change

侦听器附加到一个项目，则可以使用

item.onchange（）

调用它。但是，如果更改触发器来自父节点，该怎么办

上下文：使用

input

事件捕获输入类型='number'项上的向上/向下更改，因为

change

不会捕获这些更改

操作原理：使用

输入

进行捕获，但在调用正常的

更改

侦听器之前，请等待500毫秒。当

change

监听器直接连接到目标元素时，这很容易。问题是调用继承的更改触发器也是必要的——如何知道是否存在任何触发器，以及如何调用它们

HTML:

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

// 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);

// 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);

我看到要做到这一点的唯一方法是手动遍历祖先，检查是否存在，并在我前进时呼叫。但这导致了下一个问题：这些侦听器函数中的任何一个都可能以

e.stopPropagation

的形式发出，但我现在看到了确定是否确实是这种情况的方法——这意味着爬山祖先将不起作用

---

根据上的@Andy E answer，以下是解决方案：

Javascript:

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

// 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);

// 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：此函数可能更适合于“单击”而不是“输入”-“单击”的问题是，焦点和文本定位单击需要与单击更改值区分开来。

使用jQuery，

$（e.target）。我相信change（）

应该可以完成这项工作。或

$（e.target）.trigger（eventname）

，在您的情况下使用

eventname='change'

，以及一般的任何其他事件名称

显然，

change

事件仅在

input

s、

textarea

s和

select

s上有效，不能嵌套。因此，当父级定义更改事件处理程序时，您不会遇到问题，该事件处理程序需要在子级的事件处理程序之后触发。

使用jQuery，

$（e.target）。我相信change（）

应该可以完成这项工作。或

$（e.target）.trigger（eventname）

，在您的情况下使用

eventname='change'

，以及一般的任何其他事件名称

---

显然，

change

事件仅在

input

s、

textarea

s和

select

s上有效，不能嵌套。因此，当父级定义需要在子级事件处理程序之后触发的更改事件处理程序时，不会出现问题。

在事件侦听器中，创建对

此

对象的引用（例如，

var that=this；

）。然后，您可以使用

that.onchange（e）下一个

的主体中创建代码>。

在事件侦听器中，创建对

此

对象的引用（例如，

var=this；

）。然后，您可以使用

that.onchange（e）在
下一个
的主体中。
一个更改甚至不会触发“向上/向下”我假设您的意思是向上/向下箭头

如果是这种情况，您需要为这些按键事件捕获按键事件（按键、向上键、向下键等）。
即使“向上/向下”也不会触发更改。我假设您的意思是向上/向下箭头

如果是这种情况，您需要为这些关键事件捕获关键事件（按键、向上键、向下键等）。
根据@Andy E中的回答，构建事件并发送。我们已经在问题中提出了细节

顺便说一句，
onchange
仅当
change
触发器是通过
onchange
属性设置的，而不是通过
addEventListener（'change'，…）
按照@Andy E在回答、构建事件和调度时设置的。我们已经在问题中提出了细节

顺便说一句，
onchange
仅当
change
触发器是通过
onchange
属性设置的，而不是使用
addEventListener（'change'，…）
使用javascript-打开jQuery源代码并复制它们触发事件的方式时才设置
onchange
。到底为什么不使用jQuery？虽然
change
event在表单级别无效，但它可以在表单级别应用，然后表单中的所有项目都会使用它。我个人非常熟悉js作为一种语言及其抽象级别。我个人并不关心jQuery的隐藏功能，我也不觉得它的符号美观。我意识到这是一个少数报告，可能只有像我这样的灰胡子才会喜欢。好吧，不要使用jQuery。只要看看它们是如何触发事件并窃取它的，如果您不喜欢使用jQuery，请不要在任何地方使用它——您的所有脚本仍然可以工作。在这种特殊情况下使用它来缓解你的生活。为什么不呢？使用javascript打开jQuery源代码并复制它们触发事件的方式。到底为什么不使用jQuery？虽然
change
event在表单级别无效，但它可以在表单级别应用，然后表单中的所有项目都会使用它。我个人非常熟悉js作为一种语言及其抽象级别。我个人并不关心jQuery的隐藏功能，我也不觉得它的符号美观。我意识到这是一个少数报告，可能只有像我这样的灰胡子才会喜欢。好吧，不要使用jQuery。只要看看它们是如何触发事件并窃取它的，如果您不喜欢使用jQuery，请不要在任何地方使用它——您的所有脚本仍然可以工作。在这种特殊情况下使用它来缓解你的生活。为什么不？“我怎么知道是否有出口”你是指出口还是存在？在这种情况下，情况完全不同。@Mark Schultheiss-“存在”-谢谢你正在处理事件。你不需要在祖先身上“调用”事件，他们应该有事件处理程序来“处理”事件，尽管你可能会考虑“触发”这些事件-停止传播是有原因的作者的事件，所以我会。