Question

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

这是一个例子。我有一个应该观看现场验证的字段，应该观看一些实时格式化。（是的，我可以将它们放到相同的功能中，但我更喜欢将它们分开）。

这是验证作业：

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

Answer 1

只需使用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>

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

Answer 2

引用OP的问题：

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

实际上，它并没有。根据{{3}}：

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

所以，让我们单独留下文档并测试它是否实际上覆盖了以前的事件：

＆＃13;

var overriden = true;
$("button").click(function() {
    overriden = false;
});
$("button").click(function() {
    alert("Overriden? " + overriden);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button>Test overriden events.</button>

＆＃13;

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

2 个答案: