jQuery: passing $(this) to named function event handler

Question

I note that it's recommended to use named functions when binding an event handler to a javascript event. How can I do this when my function needs to be passed the this object?

For example, how would I replace the anonymous function below by directly calling doFancyStuff:

$(document).on('change', 'input.fancy-textbox', function () {     doFancyStuff($(this)); });  function doFancyStuff($textbox) {     // fanciness } 

Extra points if you point out other conventions I might be breaking with the above code.

---

To clarify, I want to call the doFancyStuff() method in my example from multiple places, otherwise yes, I could just do something like this:

$(document).on('change', 'input.fancy-textbox', doFancyStuff);  function doFancyStuff() {     var $textbox = $(this);      // fanciness } 

Answer 1

I would say that's a matter of opinion. I see no problem using an anonymous function here. If this is the only place doFancyStuff is called, you could do this:

$(document).on('change', 'input.fancy-textbox', doFancyStuff);  function doFancyStuff() {     // fanciness     var $textbox = $(this) } 

However, if this function is called from multiple places and you can't change the way it works, you would have to do something like this:

$(document).on('change', 'input.fancy-textbox', doFancyStuffFromEvent);  function doFancyStuffFromEvent() {     // fanciness     doFancyStuff($(this)); }  function doFancyStuff($textbox) {     // fanciness } 

Which is messy.