jQuery:添加事件监听器是否会覆盖同一事件的先前监听器？

Question

例如,假设我有

$(element).on('click', function() {/*Some Stuff*/});

在某个地方定义,然后我想为同一个点击事件添加更多功能.如果我做

$(element).on('click', function() {/*Other Stuff*/});

"其他东西"会覆盖"一些东西"吗？

Answer 1

第二个监听器不会覆盖第一个监听器.jQuery事件处理程序是累积添加的,并按照它们附加的顺序执行.

影响一个处理程序是否阻止另一个处理程序运行的是该函数如何取消浏览器的默认单击处理程序(即如何在链接的url后停止浏览器)

如果您使用传统方法:

$(element).on('click', function() {

    /* Some Stuff, do your thing */ 

    return false; 
});

上面的处理程序将停止事件本身并传播给其他处理程序.

但是您可以在不停止传播或处理程序的情况下停止事件操作:

$(element).on('click', function(e) {

    // prevent the default action at first, just to make it clear :)
    e.preventDefault(); 

    /* do your thing */

    return /* what you want */;
});

这将确保不会发生默认单击操作,但会将事件继续发送到其他hanlders.jQuery事件还有一些其他有用的事件传播方法(例如Event.stopPropagation())值得了解.

Answer 2

不,事件不会被覆盖,它们会被追加或推送到事件处理程序列表中.

这是观察者模式的典型用法.

事件可以与被除去http://api.jquery.com/off/或http://api.jquery.com/die/万一.live使用.

Answer 3

这已经得到了回答，但我想我应该添加当我处于可能有一个点击侦听器被重复的情况时通常如何解决这个问题。

我只是用户查询打开和关闭方法......

$(element).off('点击'); //使用on删除之前添加的点击监听器方法

$(element).on('click', function() {/一些东西/}); //添加回来并且只运行一次

http://api.jquery.com/off/

.off() 方法删除用 .on() 附加的事件处理程序。有关详细信息，请参阅该页面上有关委派事件和直接绑定事件的讨论。调用不带参数的 .off() 会删除附加到元素的所有处理程序。通过提供事件名称、命名空间、选择器或处理函数名称的组合，可以删除元素上的特定事件处理程序。当给出多个过滤参数时，提供的所有参数都必须与要删除的事件处理程序匹配。