使用单个新事件覆盖绑定到元素的所有JavaScript事件

时间:2011-01-11 15:07:03

标签: javascript jquery events event-handling event-binding

假设整个网站中有大量元素,其中包含未知数量和类型的事件。

如果我需要使用一个绑定事件覆盖所有这些事件,并且只触发该事件,那么有哪些建议?

我会将事件绑定到click事件处理程序,我正在使用jQuery。

提前致谢。

4 个答案:

答案 0 :(得分:50)

您正在寻找jQuery#unbind

要删除元素或元素集上的所有事件处理程序,只需执行以下操作:

$('.some-selector').unbind();

要取消绑定点击处理程序,请使用unbind('click')

$('.some-selector').unbind('click');

要取消绑定所有点击处理程序并在此之后立即绑定您自己的处理程序,您可以执行以下操作:

$('.some-selector').unbind('click').click(function(event) {
  // Your code goes here
});

请注意,这仅适用于使用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;
  });

答案 1 :(得分:5)

我想提供一个想法,而不是一起删除所有事件(只是覆盖它们)。

如果你的新单个绑定事件(我们在这里称之为“click”)特定于它所绑定的元素,那么我相信你可以简单地通过stopPropagation()函数忽略任何其他事件。喜欢这个

$("specific-selector").on("click", ".specific-class", function (e) {
  e.stopPropagation()
  // e.stopImmediatePropagation()
  /* your code continues ... */
});

它会阻止事件冒泡,因此您的其他事件不会触发。使用stopImmediatePropagation()来防止附加到与“click”相同的元素上的其他事件。

例如,如果“mouseleave”事件也绑定到$(“specific-selector .specific-class”)元素,它也不会触发。

最后,除了新的“click”元素外,所有其他事件都不会触发此元素。

未解决的问题是,如果其他事件也使用stopPropagation()会怎么样? ...然后我认为具有最佳规格的那个获胜,所以尽量避免复杂,太多事件是最终建议。

您可以在jQuery site上看到“直接和委派活动”以获取更多信息。

答案 2 :(得分:1)

尝试使用live代替bind。然后,您可以轻松地从选择器中删除带有die的实时绑定,这可以快速操作并快速设置另一个直播。

   $('selection here').live('..', .....);  // multiple invocations
   $('selection here').die();
   $('selection here').live('click',.....);

完全不接触DOM。事件发生时评估事件条件。

但通常如果您只想交换处理函数,为什么不这样做:

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 */ };

这绝对不会带来任何改变,重新绑定等费用。

答案 3 :(得分:1)

实际上看起来很简单:

$('#foo').unbind('click');
$('#foo').bind('click', myNewFunction);

感谢您的回复。