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

时间:2012-04-23 09:34:40

标签: javascript jquery html

例如,假设我有

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

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

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

“其他东西”会覆盖“一些东西”吗?

5 个答案:

答案 0 :(得分:25)

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

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

如果您使用传统方法:

$(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 propagation methods(例如Event.stopPropagation())值得了解。

答案 1 :(得分:13)

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

这是observer pattern的典型用法。

如果使用.live,可以使用http://api.jquery.com/off/http://api.jquery.com/die/移除事件。

答案 2 :(得分:4)

不,不会。 on()就像绑定一样 - 它将事件添加到$.data("events")

您可以通过off()明确删除内容。

答案 3 :(得分:2)

这已经得到了回答,但我想我会在我遇到点击监听器重复的情况下添加我通常解决这个问题的方法。

我只是用户在和关闭方法上查询 ...

  

$(元素).off('单击&#39); //使用 on 方法

删除以前添加的点击监听器      

$(元素).on('点击',功能(){/ 一些东西 /}); //将其添加回来,只运行一次

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

  

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

答案 4 :(得分:1)

你误解了;添加另一个处理程序不会覆盖第一个。

请参阅此jsFiddle:http://jsfiddle.net/ymuBs/

单击该链接会将“one”写入控制台。单击该按钮可为链接添加另一个处理程序。现在单击该链接会将“one”和“two”写入控制台: