使用单个新事件覆盖绑定到元素的所有 JavaScript 事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4659032/
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
Override all JavaScript events bound to an element with a single new event
提问by jerome
Assuming that there are a large number of elements throughout the site that have an unknown number and type of events bound to them.
假设整个站点中有大量元素绑定了未知数量和类型的事件。
If I need to override all of these events with one single bound event, and only that event will fire, what are some recommendations?
如果我需要用一个单一的绑定事件覆盖所有这些事件，并且只有那个事件会触发，有什么建议？
I would be binding the event to a click event handler, and I am using jQuery.
我会将事件绑定到单击事件处理程序，并且我使用的是 jQuery。
Thanks in advance.
提前致谢。
回答by Mathias Bynens
You're looking for jQuery#unbind.
您正在寻找jQuery#unbind.
To remove all event handlers on an element or a set of elements, just do:
要删除一个元素或一组元素上的所有事件处理程序，只需执行以下操作：
$('.some-selector').unbind();
To unbind only click handlers, use unbind('click'):
要仅取消绑定单击处理程序，请使用unbind('click')：
$('.some-selector').unbind('click');
To unbind all click handlers and immediately bind your own handler after that, you can do something like this:
要取消绑定所有单击处理程序并在此之后立即绑定您自己的处理程序，您可以执行以下操作：
$('.some-selector').unbind('click').click(function(event) {
// Your code goes here
});
Note that this will only work for events bound using jQuery (using .bindor any jQuery method that uses .bindinternally). If you want to remove all possible onclick events from a given set of elements, you could use:
请注意，这仅适用于使用 jQuery（使用.bind或任何.bind内部使用的jQuery 方法）绑定的事件。如果要从给定的一组元素中删除所有可能的 onclick 事件，可以使用：
$('.some-selector')
.unbind('click') // takes care of jQuery-bound click events
.attr('onclick', '') // clears `onclick` attributes in the HTML
.each(function() { // reset `onclick` event handlers
this.onclick = null;
});
回答by francischan
I would like to provide a thought without removing all events all together (just override them).
我想提供一个想法，而不是一起删除所有事件（只需覆盖它们）。
If your new one single bound event (we call it "click" here) is specific to the element it binds to, then I believe you can ignore any other events simply by stopPropagation() function. Like this
如果您的新单个绑定事件（我们在此处称其为“单击”）特定于它绑定到的元素，那么我相信您可以通过 stopPropagation() 函数忽略任何其他事件。像这样
$("specific-selector").on("click", ".specific-class", function (e) {
e.stopPropagation()
// e.stopImmediatePropagation()
/* your code continues ... */
});
It will stop events bubbles up, so your other events won't fire. use stopImmediatePropagation() to prevent other events attached onto the same elements as "click" does.
它会阻止事件冒泡，因此您的其他事件不会触发。使用 stopImmediatePropagation() 来防止其他事件附加到与“click”相同的元素上。
For example, if "mouseleave" event is also bind to $("specific-selector .specific-class") element, it won't fire, too.
例如，如果“mouseleave”事件也绑定到 $("specific-selector .specific-class") 元素，它也不会触发。
At last, all other events won't fire on this element but your new "click" element.
最后，所有其他事件都不会在此元素上触发，而是在您的新“单击”元素上触发。
The unsolved question is, what if other events also use stopPropagation()? ... Then I think the one with best specification wins, so try to avoid complex, too many events is final suggestion.
未解决的问题是，如果其他事件也使用 stopPropagation() 怎么办？...然后我认为规格最好的那个会赢，所以尽量避免复杂的，太多的事件是最后的建议。
You can see "Direct and delegated events" on jQuery sitefor more information.
您可以在jQuery 站点上查看“直接和委托事件”以获取更多信息。
回答by gertas
Try to use liveinstead of bind. Then you can easily remove live binding with diefrom selector which is fast operation and set another live equally fast.
尝试使用live而不是bind. 然后，您可以轻松地从选择器中删除带有die 的live 绑定，这是快速操作，并同样快速地设置另一个 live。
$('selection here').live('..', .....); // multiple invocations
$('selection here').die();
$('selection here').live('click',.....);
DOM is not touched at all. Event condition is evaluated on event occurrence.
DOM 根本没有被触及。事件条件在事件发生时进行评估。
But generally if you just want to swap handler functions why not to do it this way:
但一般来说，如果您只想交换处理程序函数，为什么不这样做：
var ahandler = function(evt) { /* first implementation */ }
$('.selector').bind('click', function(evt) { ahandler(evt); });
//and then if you want to change handlers
ahandler = function(evt) { /* new implementation */ };
This gives absolutely no cost of any changes, rebinding etc.
这绝对没有任何更改、重新绑定等的成本。
回答by jerome
Looks like this is pretty simple actually:
看起来这实际上很简单：
$('#foo').unbind('click');
$('#foo').bind('click', myNewFunction);
Thanks for your responses though.
感谢您的回复。
