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

Add functionality to an existing event listener

本文关键字：添加 功能 侦听器 事件      更新时间：2023-09-26

我在表单上有一组输入，监视这些输入以进行交互性，验证或两者兼而有之。在两者的情况下，我不确定如何在不覆盖先前分配的情况下添加第二组功能。

下面是一个示例。我有一个字段应该监视实时验证，并且应该监视一些实时格式。（是的，我可以将它们滚动到同一个函数中，但我更愿意将它们分开）。

下面是验证分配：

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？ 您可以注册任意数量的侦听器，而无需担心覆盖。

$('#bind-example').on('click', function(){alert('First click!'); });
$('#bind-example').on('click', function(){alert('Second click!'); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="bind-example" href="#">Click Me!</a>

如果我误解了您的问题，请告诉我。

引用

OP的问题：

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

其实不然。根据jQuery的.bind文档：

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

因此，让我们不要管文档，并测试它是否实际上覆盖了前一个事件：

var overriden = true;
$("button").click(function() {
    overriden = false;
});
$("button").click(function() {
    alert("Overriden? " + overriden);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button>Test overriden events.</button>

相关文章：