附加和分离事件处理程序

附加事件处理程序

从 1.7 版开始，jQuery 就有了事件 API .on()。这样，任何标准的 javascript 事件或自定义事件都可以绑定在当前选定的 jQuery 元素上。有一些快捷方式，如 .click()，但 .on() 为你提供了更多选择。

HTML

<button id="foo">bar</button>

jQuery

$( "#foo" ).on( "click", function() {
  console.log( $( this ).text() ); //bar
});

分离事件处理程序

当然，你也可以从 jQuery 对象中分离事件。你这样做是通过 .off( events [, selector ] [, handler ] ) 来实现的。

HTML

<button id="hello">hello</button>

jQuery

$('#hello').on('click', function(){
    console.log('hello world!');
    $(this).off();
});

单击按钮时 $(this) 将引用当前的 jQuery 对象，并将从中删除所有附加的事件处理程序。你还可以指定应删除哪个事件处理程序。

jQuery

$('#hello').on('click', function(){
    console.log('hello world!');
    $(this).off('click');
});

$('#hello').on('mouseenter', function(){
    console.log('you are about to click');
});

在这种情况下，点击后 mouseenter 事件仍将起作用。