Javascript jQuery：添加事件侦听器是否会覆盖同一事件的先前侦听器？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10278025/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery: Does adding an event listener overwrite the previous listener of the same event?
提问by trusktr
For example, let's say I have
例如，假设我有
$(element).on('click', function() {/*Some Stuff*/});
defined somewhere, then later I want to add more features to that same click event. If I do
在某处定义，然后我想为同一个点击事件添加更多功能。如果我做
$(element).on('click', function() {/*Other Stuff*/});
will "Other Stuff" overwrite "Some Stuff"?
“其他东西”会覆盖“某些东西”吗？
采纳答案by wheresrhys
The second listener won't override the first. jQuery event handlers are added cumulatively and execute in the order they were attached.
第二个侦听器不会覆盖第一个。jQuery 事件处理程序被累积添加并按照它们附加的顺序执行。
The thing that does effect whether one handler prevents the other running is how the function cancels the browser's default click handler (i.e. how you stop the browser following the link's url)
影响一个处理程序是否阻止另一个运行的事情是该函数如何取消浏览器的默认点击处理程序（即如何停止浏览器跟随链接的 url）
If you use traditional method:
如果您使用传统方法：
$(element).on('click', function() {
/* Some Stuff, do your thing */
return false;
});
The handler above will stop the event itself and propagating to other handlers.
上面的处理程序将停止事件本身并传播到其他处理程序。
But you can stop the event action without stopping its propagation or the handler:
但是您可以在不停止其传播或处理程序的情况下停止事件操作：
$(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 */;
});
This will ensure that the default click action doesn't occur but that the event continues to other hanlders. jQuery event also has some other useful event propagation methods(e.g. Event.stopPropagation()) which are worth getting to know.
这将确保默认点击操作不会发生，但事件继续到其他处理程序。jQuery 事件还有一些其他有用的事件传播方法（例如Event.stopPropagation()），值得了解。
回答by TJ.
No, the events are not overwritten, they are appended or pushed to the list of event handlers.
不，事件不会被覆盖，它们会被附加或推送到事件处理程序列表中。
This is a typical usage of the observer pattern.
这是观察者模式的典型用法。
Events can be removed with http://api.jquery.com/off/or http://api.jquery.com/die/in case .livewas used.
事件可以与被除去http://api.jquery.com/off/或http://api.jquery.com/die/万一.live使用。
回答by Manishearth
No it won't. on()is just like bind--it adds the event to $.data("events")
不，不会。on()就像绑定一样——它将事件添加到$.data("events")
You can explicitly remove stuff via off()though.
您可以通过off()虽然明确删除内容。
回答by Matthew Ellison
This has been already been answered but I thought I'd add how I usually address this problem when I am in a situation where I might have a click listener getting duplicated.
这已经得到了回答，但我想我会添加我通常如何解决这个问题，当我遇到点击监听器被复制的情况时。
I just user query onand offmethods...
我只是用户查询打开和关闭方法...
$(element).off('click'); //Removes a previously added click listener using the onmethod
$(element).on('click', function() {/Some Stuff/}); //Adds it back and only runs once
$(element).off('click'); //使用on方法移除之前添加的点击监听器
$(element).on('click', function() {/ Some Stuff/}); //将它添加回来并且只运行一次
The .off() method removes event handlers that were attached with .on(). See the discussion of delegated and directly bound events on that page for more information. Calling .off() with no arguments removes all handlers attached to the elements. Specific event handlers can be removed on elements by providing combinations of event names, namespaces, selectors, or handler function names. When multiple filtering arguments are given, all of the arguments provided must match for the event handler to be removed.
.off() 方法删除了通过 .on() 附加的事件处理程序。有关更多信息，请参阅该页面上对委托和直接绑定事件的讨论。不带参数调用 .off() 会删除所有附加到元素的处理程序。通过提供事件名称、命名空间、选择器或处理程序函数名称的组合，可以删除元素上的特定事件处理程序。当给出多个过滤参数时，提供的所有参数都必须与要删除的事件处理程序匹配。
回答by Jamiec
You've misunderstood; adding another handler does not overwrite the first.
你误会了；添加另一个处理程序不会覆盖第一个。
See this jsFiddle: http://jsfiddle.net/ymuBs/
看到这个jsFiddle：http: //jsfiddle.net/ymuBs/
Clicking on the link writes "one" to the console. Clicking the button adds another handler to the link. Now clicking the link writes "one" and "two" to the console:
单击该链接会将“一”写入控制台。单击该按钮会向链接添加另一个处理程序。现在单击链接将“一”和“二”写入控制台：
