如何更好地處理事件

Question

如果我在一個元素上有多個事件，我正在處理這些事件，如下所示：

$("body").on("click", ".element", function(e) {
    // Do something on click
});

$("body").on("change", ".element", function(e) {
    // Do something on change
});

有沒有辦法在一個on()調用中組合元素上的所有事件？ 如果有多個事件與一個元素相關聯，最佳做法是什么？

$("body").on("change click", ".element", function(e) {
    // Can I detect here if it was change or click event and perform an action accordingly?
});

Answer 1

您可以使用事件的type屬性來確定要執行的邏輯：

$('body').on('change click', '.element', function(e) {
    if (e.type == 'click') {
        // do something...
    } 
    else if (e.type == 'change') {  
        // do something else...
    }
});

或者，也可以提供一個目的是on其中包含與事件類型名稱作為鍵結合功能：

$('body').on({
    click: function() {
        // do something on click...
    },
    change: function() {
        // do something on change...
    }
}, '.element');

我個人會使用后一種方法。 使用一個相當丑陋的if語句來分割事件類型時，取消了統一on()處理程序的重點。

Answer 2

是! jQuery傳遞包含事件信息的事件對象：

$("body").on("change click", ".element", function(e) {
    console.log(e.type);
});

Answer 3

您可以使用event.type 。 有人會說這是不好的做法，其他人可能會發現它很有用。

$("body").on("change click", ".element", function(event) {
    switch (event.type) {
        case 'click':

        break;
        case 'change':

        break;
        default:
    }
});

jQuery event.type

Answer 4

 $('#element').on('keyup keypress blur change', function(event) { alert(event.type); // keyup OR keypress OR blur OR change }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" id="element" />