Javascript 向现有事件侦听器添加功能

我在表单上有一组输入，用于监视交互、验证或两者。在这两种情况下，我不知道如何添加第二组功能而不重写先前的赋值

这里有一个例子。我有一个字段，应该关注它的实时验证，并且应该关注它的一些实时格式。（是的，我可以将它们合并到同一个函数中，但我更喜欢将它们分开）

以下是验证任务：

exampleField

    // for live typing
    .keyup($.debounce(500, debouncedValidation))

    // for copy-pastes and autofills
    .change(function(){
        validateInput(formInValidation, $(this));
    });

此外，我还想独立运行一些交互式功能，如：

exampleField

    // for live typing
    .keyup($.debounce(500, interactWithElement($(this))))

    // for copy-pastes and autofills
    .change(function(){
        interactWithElement($(this));
    });

我使用相同的事件，因此后者会覆盖前者。我的直觉告诉我，有一种优雅的方法可以在两者之间添加一个实用函数，比如说

addEventListenerWithoutOverride（）

，它可以查找现有事件并将它们组合起来。这是胡说吗？所述函数的虚拟输出可能类似于：

exampleField

    .keyup(
         $.debounce(
             500,
             function(){
                 debouncedValidation();
                 interactWithElement($(this));
             });
         )
    )

    .change(function(){
        validateInput(formInValidation, $(this));
        interactWithElement($(this));
    });

---

只需在上使用

？您可以注册任意数量的侦听器，而不必担心覆盖


$（“#绑定示例”）.on（'click'，function（）{alert（'First click！'）；}）；
$（'#bind example'）。on（'click'，function（）{alert（'Second click！'）；}）
引用OP的问题：

我使用相同的事件，因此后者将覆盖前者

事实上，没有。根据：

当事件到达元素时，绑定到该事件的所有处理程序
激发元素的类型。如果有多个处理程序
注册后，它们将始终按照注册顺序执行
跳跃执行所有处理程序后，事件将沿着
正常事件传播路径


因此，让我们先别管文档，测试它是否覆盖了前一个事件：


var overriden=true；
$（“按钮”）。单击（函数（）{
覆盖=错误；
});
$（“按钮”）。单击（函数（）{
警报（“已覆盖？”+已覆盖）；
});

测试覆盖的事件。
jQuery默认情况下会执行此操作。如果您为同一事件添加一个事件处理程序，然后在稍后添加另一个事件处理程序，这两个事件都将运行—尽管执行顺序无法保证。如果您可以在同一元素上放置多个处理程序，这会解决您的问题吗？addEventListener（）@Rorymcrossan你在开玩笑吧-我没有费心设置测试，因为我确信jQuery更符合字面意思。非常感谢。您还可以使用代理作为处理程序，然后告诉代理执行什么以及以什么顺序执行。这里没有特别的理由使用
.bind（）
。它在（）上的
.on（）
或
.click（）
上不提供任何附加功能。事实上，如果查看jQuery源代码，
.bind（）
所做的就是将其参数传递给
.on（）
。jQuery文档中有这样一条评论：“从jQuery 1.7开始，
.on（）
方法是将事件处理程序附加到文档的首选方法。”@jfriend00是的，当然你是对的。我责备那些感冒药。更新好了，好了。非常感谢。如何不使用纯javascript实现这一点？这里对这个概念进行了很好的解释-感谢您的工作！