JS/jQuery - Better to run event handler in $(document).ready or in called function

Question

*Note: The following question is not meant to be for people's opinion but is being asked in terms of best processing speed for the webpage, jQuery, etc.

I currently have code which follows the below "test" code format:

$(document).ready(function() {
  $('.my-class').on('click') {
    if ($('.my-class').hasClass('active') {
      $('.my-class').removeClass('active');
      return;
    }
    $('.my-class').addClass('active');
  }
});

My question is: should the event handler (not the event listener) be in the same code structure as $(document).ready();? Or should it look like this:

function toggler(obj) {    
  if ($(obj).hasClass('active') {
    $(obj).removeClass('active');
    return;
  }
  $(obj).addClass('active');
}

$(document).ready(function() {
  $('.my-class').on('click') {
    toggler(this);
  }
});

i.e. should $(document).ready(); only have the listeners which reference the handlers or should the entire action (of listening and handling) be in $(document).ready();

What is the proper way of doing this so as to maximize the usability/power of jQuery, JS, etc.

Answer 1

I would go with the first snippet of code:

$(document).ready(function() {
  $('.my-class').on('click') {
    if ($('.my-class').hasClass('active') {
      $('.my-class').removeClass('active');
      return;
    }
    $('.my-class').addClass('active');
  }
});

You are not doing anything with the function toggler before the DOM is ready, so why define it outside.