[DOM Event Learning] Section 3 jQuery事件處理基礎 on(), off()和one()方法使用

聖騎士wind發表於2015-04-01

jQuery事件

[DOM Event Learning] Section 3 jQuery事件處理基礎 on(),off()和one()方法使用

　　jQuery提供了簡單的方法來向選擇器(對應頁面上的元素)繫結事件處理器(event handlers).

　　當一個事件發生,提供的function就被執行,在方法裡面,this代表當前的元素.

　　這些事件通常是由於使用者和頁面的互動而被激發,比如文字輸入到表單元素,滑鼠指標移動等.也有一些情況,比如頁面load和unload的事件,是由瀏覽器本身來激發.

　　關於Events的細節,可以檢視:http://api.jquery.com/category/events/

　　事件處理方法可以接收一個event物件,這個物件被用來判定事件型別,或者制止預設行為等.

　　event物件的詳細介紹可以參見:http://api.jquery.com/category/events/event-object/

jQuery的事件繫結方法

　　jQuery為絕大多數瀏覽器事件提供了方便的方法,比如.click(), .focus(), .blur(), .change()等,它們都是.on()方法的簡便形式.

　　比如下面兩個方法的效果是一樣的:

// Event setup using a convenience method
$("p").click(function () {
    console.log("You clicked a paragraph!");
});
// Equivalent event setup using the `.on()` method
$("p").on("click", function () {
    console.log("click");
});

.on()方法

　　.on()方法使用起來很靈活,在很多場合很有用,比如為多個事件繫結同一個處理方法,當你想給處理方法傳資料,或者處理自定義事件,或當你想要傳遞多個事件和方法時.

　　為多個事件繫結同一個處理方法時,用空格分隔事件名:

// Multiple events, same handler
$("input").on(
    "click change", // Bind handlers for multiple events
    function () {
        console.log("An input was clicked or changed!");
    }
);

　　如果多個事件的處理方法不同,也可以一次繫結,因為.on()方法可以接收傳入一個大括號包含的PlainObject物件,其中是一個或多個key value,key是事件名,value是處理函式.

// Binding multiple events with different handlers
$("p").on({
    "click": function () {
        console.log("clicked!");
    },
    "mouseover": function () {
        console.log("hovered!");
    }
});

　　但是需要注意的是.on()方法只能對當前存在的元素繫結事件.

　　如果在.on()方法執行之後,新建了一個符合選擇器的元素,這個新建的元素並不會執行這個前面繫結的事件處理方法.

$(document).ready(function () {

    // Sets up click behavior on all button elements with the alert class
    // that exist in the DOM when the instruction was executed
    $("button.alert").on("click", function () {
        console.log("A button with the alert class was clicked!");
    });

    // Now create a new button element with the alert class. This button
    // was created after the click listeners were applied above, so it
    // will not have the same click behavior as its peers
    $("<button class='alert'>Alert!</button>").appendTo(document.body);
});

事件物件

　　每一個事件處理函式都接收一個事件物件(Event Object),這個物件包含很多屬性和方法.

　　一個很常用的方法是用.preventDefault()來阻止事件的預設行為.

　　其他有用的屬性和方法包括:

　　pageX, pageY: 事件發生時的滑鼠指標位置.相對於頁面顯示區域的左上角,而不是瀏覽器視窗.

　　type: 事件型別,比如”click”.

　　which: 被點選的button或key.

　　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: 這個事件激發時指定的namespace.

　　timeStamp: 事件發生時距離1970年1月1日的時間戳,單位是milliseconds.

　　preventDefault(): 阻止事件的預設行為.

　　stopPropagation(): 阻止事件向上冒泡到其他元素.

　　這兩個方法一起用的時候,可以用return false來代替,更加簡潔.

　　originalEvent屬性是瀏覽器自己創造的一個event物件,jQuery又包裝了一下這個物件,有一些有用的方法和屬性,這些在處理移動裝置的touch events的時候很有用.

　　除了事件物件之外,事件處理函式還可以通過this關鍵字訪問該事件繫結的DOM元素,我們可以把這個DOM元素轉換為jQuery物件:

var $element = $(this);

解除事件監聽器

　　要解除event listener,可以使用.off()方法,傳入要解除繫結的事件型別.

　　如果你附加了一個有名字的function,那麼你可以通過第二個引數,指定僅解除這個名字的事件處理函式.

// Tearing down all click handlers on a selection
$("p").off("click");

// Tearing down a particular click handler, using a reference to the function
var foo = function () {
    console.log("foo");
};
var bar = function () {
    console.log("bar");
};

$("p").on("click", foo).on("click", bar);
$("p").off("click", bar); // foo is still bound to the click event

設定只執行一次的事件處理

　　有時候你需要一個handler只執行一次,或者你想執行一次之後換一個handler, jQuery為這種情況提供了.one()方法.

// Switching handlers using the `.one()` method
$("p").one("click", firstClick);

function firstClick() {
    console.log("You just clicked this for the first time!");

    // Now set up the new handler for subsequent clicks;
    // omit this step if no further click responses are needed
    $(this).click(function () {
        console.log("You have clicked this before!");
    });
}

　　注意上面這段程式碼中,這個firstClick方法將在所有p元素第一次被點選的時候執行一次,而不是某個p被點選一次之後就從所有p中移除該方法.

　　.one()方法也可以用來繫結多個事件:

// Using .one() to bind several events
$("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);
}

　　這種情況下,所有事件的第一次執行都會進入這個處理方法.

　　對這段程式碼來說,也即,即便input已經獲得了焦點,但是第一次keydown事件的時候還是會執行這個方法.