jQuery委托点击事件函数总结：多事件绑定优化咨询

Hey there! Let’s clean up that redundant event delegation code—having six separate .on('click') calls is unnecessary, and we can streamline this into a single, maintainable handler.

Here’s the optimized solution: #

$('.Container').on('click', '.a, .b, .c, .d, .e, .f', function() {
  // Create a clear map linking element classes to their functions
  const classToFunction = {
    'a': Function1,
    'b': Function2,
    'c': Function3,
    'd': Function4,
    'e': Function5,
    'f': function() { /* Paste your .f function logic here */ }
  };

  // Find which mapped class the clicked element has
  const matchedClass = Object.keys(classToFunction).find(cls => $(this).hasClass(cls));
  
  // Execute the corresponding function if it exists
  if (matchedClass && classToFunction[matchedClass]) {
    $(document)[classToFunction[matchedClass]]();
  }
});

Why this works better: #

• Single event binding: Instead of attaching six separate click handlers to .Container, we use one—this is lighter on performance and easier to debug.
• Centralized logic: The classToFunction object acts as a single source of truth for which class triggers which function. Adding/removing entries later is as simple as updating this object.
• Cleaner readability: No more scrolling through identical .on('click') lines—anyone reading your code can immediately see the relationship between elements and their actions.

Bonus: Even simpler if you can standardize function names #

If you can adjust your function names to follow a pattern (e.g., FunctionA for .a, FunctionB for .b), you can eliminate the map entirely:

$('.Container').on('click', '.a, .b, .c, .d, .e, .f', function() {
  // Grab the relevant class from the clicked element
  const targetClass = $(this).attr('class').split(' ').find(cls => ['a','b','c','d','e','f'].includes(cls));
  
  if (targetClass) {
    const functionName = `Function${targetClass.toUpperCase()}`;
    // Call the function if it exists on the document object
    if (typeof $(document)[functionName] === 'function') {
      $(document)[functionName]();
    }
  }
});

This version auto-maps classes to functions based on the naming pattern, so you won’t need to update a map when adding new class-function pairs—just make sure the function name matches the class (capitalized) and exists on $(document).

Either approach will cut down on repetition, make your code more maintainable, and keep your event handling logic organized.

内容的提问来源于stack exchange，提问作者joe