jQuery same function for multiple elements and multiple events

Question

I have a function I'd like to do whenever either user clicks one of the anchor elements, such as this

$('.element').on('click', function(){
// do stuff here
});

and I want to do the same thing if a select element has changed its value, such as this

$('select').on('change', function(){
// do same stuff here
});

I know I could do

$('.element', 'select').on('click change', function(){
// do stuff here
});

but that would also trigger whenever I click on the select element and I don't want to confuse user and do something then, just when the select element value has changed.

Answer 1

You don't have to make your function inline.

var doStuff = function() {
  // do stuff here
});

$('.element').on('click', doStuff);
$('select').on('change', doStuff);

Answer 2

One of the most readable ways to handle this is to create a separate function:

function doStuff(){
 //do stuff here
}

$('.element').on('click', function(){
  doStuff();
});

$('select').on('change', function(){
  doStuff();
});

This also gives you a lovely opportunity to make it more clear what your code is for, by giving that function a nice, meaningful name.