附加和分離事件處理程式

附加事件處理程式

從 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 事件仍將起作用。