How to combine different event triggers

Question

I am new to jQuery and hope someone can help me with this.

I have a JS function that is triggered by various elements / classes with the difference that for some of them the event is triggered by a click and for others on keyup etc.

So far I have the following as an example which works as intended but I was wondering if there is a way to combine these as the only difference here is the trigger (click, keyup etc.) and to avoid duplicating code.

If there are any other suggestions to write this different please let me know as well.

My jQuery (example):

$(document).on('keyup', '.calcMinus, .calcPlus', function(e){
    var row = $(e.target);
    $(row).closest('table').find('td.calcSum').each(function(index){
        calculateSums(row, index);
    });
});
$(document).on('click', '.trAdd, .trDelete, .trDown, .trUp', function(e){
    var row = $(e.target);
    $(row).closest('table').find('td.calcSum').each(function(index){
        calculateSums(row, index);
    });
});
// ...

My JS function:

function calculateSums(row, index){
   // do stuff
}

Many thanks in advance, Mike

Answer 1

$(document).on('keyup', '.calcMinus, .calcPlus', combined);
$(document).on('click keyup', '.trAdd, .trDelete, .trDown, .trUp', combined);

function combined(e){
    var row = $(e.target);
    $(row).closest('table').find('td.calcSum').each(function(index){
        calculateSums(row, index);
    });
}

Answer 2

Extract the code from your event handler to a function, and call that from both of your existing handlers:

function handleEvent(row) {
    $(row).closest('table').find('td.calcSum').each(function(index){
        calculateSums(row, index);
    })
}

$(document).on('keyup', '.calcMinus, .calcPlus', function(e){
    handleEvent($(e.target));
});
$(document).on('click', '.trAdd, .trDelete, .trDown, .trUp', function(e){
    handleEvent($(e.target));
});