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

時間 2019-11-13

標籤 dom event learning section jquery 事件處理基礎方法使用欄目 HTML 简体版

原文原文鏈接

[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事件的時候仍是會執行這個方法.