javascript - 向现有事件监听器添加功能

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>

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