jQuery 提供簡單的方法來將事件處理函式繫結在被選擇者上。當事件被觸發，提供的函式會被執行。在該函式中，this 是指啟動事件的 DOM 元素。詳細文件：Events Documentation

事件處理函式可以接收事件物件，此物件可用於確定事件的性質，並且可以用來阻止事件的預設行為。詳細文件：Event Object Documentation

jQuery 事件基礎知識

設定 DOM 元素的事件響應

jQuery 可以簡化在頁面元素上設定事件驅動的響應。

$( "p" ).click(function() {
    console.log( "You clicked a paragraph!" );
});

$( "p" ).on( "click", function() {
    console.log( "click" );
});
 

將事件擴充套件到新頁面元素上

.on() 方法只能給在設定事件時存在的元素新增事件監聽器。在事件監聽器建立之後建立的類似元素，不會自動的響應該事件監聽器。

$( document ).ready(function(){
    // 在所有 button 元素上新增事件監聽器
    $( "button.alert" ).on( "click", function() {
        console.log( "A button with the alert class was clicked!" );
    });
 
    // 現在建立新的類似的 button 元素，
    // 由於該元素是在事件建立之後新新增的，
    // 所以該 button 元素不會響應上方的事件
    $( "<button class='alert'>Alert!</button>" ).appendTo( document.body );
});
 

所以在給新新增的元素上繫結事件，要注意 .on() 方法的順序。

事件處理函式內部

每個事件處理函式會收到一個事件物件，該物件包含許多屬性和方法。該事件物件通常使用 .preventDefault() 方法來阻止事件的預設行為。

事件物件中其他有用的屬性和方法：

pageX, pageY 事件觸發時滑鼠的位置，該位置是相對於頁面顯示區域的左上角來計算的(不是整個瀏覽器窗體)。

type 事件型別(例如：click)。

which 被點選的按鈕或鍵盤。

data 事件繫結時被傳入的資料。

// Event setup using the `.on()` method with data
$( "input" ).on(
    "change",
    { foo: "bar" }, // Associate data with event binding
    function( eventObject ) {
        console.log("An input value has changed! ", eventObject.data.foo);
    }
);
 

target 發起事件的 DOM 元素。

namespace 觸發事件時指定的名稱空間。

timeStamp 瀏覽器中事件發生時，相對於 1970-01-01 的時間差異值(單位：毫秒)。

preventDefault() 阻止事件的預設行為(例如：跳轉連結)。

stopPropagation() 阻止事件冒泡到其他元素。除了事件物件，事件處理函式還可以通過 this 關鍵字訪問處理程式繫結的 DOM 元素。通過 $(this) 這種方式將 DOM 元素轉變為 jQuery 物件。

var element = $( this );

// 阻止特定樣式的連結跳轉
$( "a" ).click(function( eventObject ) {
    var elem = $( this );
    if ( elem.attr( "href" ).match( /evil/ ) ) {
        eventObject.preventDefault();
        elem.addClass( "evil" );
    }
});

設定多個事件響應

多個事件共享同一個事件處理程式，在 .on() 方法中用空格分隔符來分隔不同的事件名稱。

// 多種事件，相同的處理程式
$( "input" ).on(
    "click change", // 為多個事件繫結處理程式
    function() {
        console.log( "An input was clicked or changed!" );
    }
);

當每個事件都擁有自己的事件處理程式時，可以將(鍵/值)物件傳入 .on() 方法中，key 為事件名稱，value 為事件處理函式。

// 繫結不同的事件處理函式，至不同的事件名稱
$( "p" ).on({
    "click": function() { console.log( "clicked!" ); },
    "mouseover": function() { console.log( "hovered!" ); }
});

名稱空間事件

對於複雜的應用程式或其他共享的外掛，名稱空間事件非常有用，這樣就不會無意終端你沒有的或者不瞭解的事件。

// 名稱空間事件
$( "p" ).on( "click.myNamespace", function() { /* ... */ } );
$( "p" ).off( "click.myNamespace" );
$( "p" ).off( ".myNamespace" ); // 解綁該名稱空間中所有事件

拆除事件監聽器

通過 .off() 方法和向該方法中傳入事件型別的方式，移除事件監聽器。

// 移除所有 click 事件
$( "p" ).off( "click" );

// 通過事件處理函式的參考，移除特定的時間處理函式
var foo = function() { console.log( "foo" ); };
var bar = function() { console.log( "bar" ); };
 
$( "p" ).on( "click", foo ).on( "click", bar );
$( "p" ).off( "click", bar ); // foo 事件處理函式依然繫結在 click 事件上

將事件設定為僅執行一次

通過 .one() 方法來實現這種目的

// 使用 .one() 方法切換處理程式
$( "p" ).one( "click", firstClick );
 
function firstClick() {
    console.log( "You just clicked this for the first time!" );
 
    // 現在設定 click 事件的後續事件處理程式
    // 若不需要 click 事件的後續事件處理程式，可忽略此步驟
    $( this ).click( function() { console.log( "You have clicked this before!" ); } );
}

注意：上面的程式碼是指，首次點選每個 p 元素時，執行 firstClick 函式，而不是第一次點選任意的 p 元素，就從所有 p 元素中刪除函式。

.one() 也可以繫結多個事件

$( "input[id]" ).one( "focus mouseover keydown", firstEvent);
 
function firstEvent( eventObject ) {
    console.log( "A " + eventObject.type + " event occurred for the first time on the input with id " + this.id );
}

上方程式碼中，firstEvent 程式會被 .one() 方法中繫結的多個事件都執行一次。