Как лучше обрабатывать события

Если у меня есть несколько событий в элементе, я в настоящее время обрабатываю эти события, как описано здесь:

$("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?
});

Ответы

Ответ 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');

Лично я бы использовал последний метод. Весь смысл иметь унифицированный обработчик on() отрицается при использовании довольно уродливого оператора if для разделения типов событий.

Ответ 2

Да! jQuery передает объект события, который содержит информацию о событии:

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

Ответ 3

Вы можете использовать event.type. Некоторые скажут, что это плохая практика, а другие могут оказаться полезными.

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

        break;
        case 'change':

        break;
        default:
    }
});

jQuery event.type

Ответ 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" />