title: What is the best way to bind multiple event handlers to a single element in jQuery?
body: <pre><code>let typingTimer;
  
  //Detect keyup focusin, focusout and keydown events on the search input and 
  //handle them.
  
  $searchInput.on('keyup focusin focusout keydown', (keyPressed) =&gt; {
      //Restart the search timer on each event so the server doesnt get 
      //spammed with multiple requests at a time.
  
      clearTimeout(typingTimer);
      if (event.type == 'keyup' &amp;&amp; $searchInput.val() &amp;&amp; keyPressed.keyCode &gt;= 65 &amp;&amp; keyPressed.keyCode &lt;= 90) {
          //Execute search after certain amount of time.
          typingTimer = setTimeout(searchFunction, debounceTime);
      } else if (!$searchInput.val()) {
          //Empty the search list if user erases everything in the input.
          $searchChampList.empty();
      } else if (event.type == 'focus') {
          //Show the search list if the user clicks on the search input.
          $searchChampList.fadeIn(300);
      } else if (event.type == 'blur') {
          //Hide the search list if the user clicks out of the search input.
          $searchChampList.fadeOut(300);
      } else if (event.type == 'keydown' &amp;&amp; $searchInput.val() &amp;&amp; keyPressed.keyCode == 40) {
          //Navigate the search list with down arrow and enter the champs name into the input for feedback.
          $('.search__champ-list-item_highlighted').next().addClass("search__champ-list-item_highlighted");
          $('.search__champ-list-item_highlighted').prev().removeClass("search__champ-list-item_highlighted");
          $searchInput.val() == $('.search__champ-list-item_highlighted.search__champ-name').text();
      } else if (event.type == 'keydown' &amp;&amp; $searchInput.val() &amp;&amp; keyPressed.keyCode == 38) {
          //Same as above but with up arrow.
          $('.search__champ-list-item_highlighted').prev().addClass("search__champ-list-item_highlighted");
          $('.search__champ-list-item_highlighted').next().removeClass("search__champ-list-item_highlighted");
          $searchInput.val() == $('.search__champ-list-item_highlighted.search__champ-name').text();
      } else if (event.type == 'keydown' &amp;&amp; $searchChampList.children().length &gt;= 1 &amp;&amp; keyPressed.keyCode == 13) {
          //Pressing enter goes to the highlighted champs page.
          window.location.href = $('.search__champ-list-item_highlighted').attr('href');
      }
  });
  </code></pre>
  
  <p>It's looking a little messy and hard to read IMO, and the only expression using all 4 events is <code>clearTimeout(typingTimer)</code>. Is it a better practice in this case to just break them up into separate event methods?</p>
  
  <pre><code>$searchInput.event((handler){
      //code
  })
  </code></pre>