用一个单击处理程序替换多个单击处理程序答案

【问题标题】：Replace multiple click handlers with a single click handler用一个单击处理程序替换多个单击处理程序
【发布时间】：2017-07-29 22:10:21
【问题描述】：

我想知道是否可以稍微清理一下这些点击事件：

$(document)
    .on('click', '.newGameItem', getNewGameItem)
    .on('click', '.startGame', startThisGame)
    .on('click', '.showThisGameInfo', showThisGameInfo)
    .on('click', '.closeThisGameInfo', closeThisGameInfo)
    .on('click', '#api_game_test', testApiGame)
    .on('click', '.nextGame', shiftGames)
    .on('click', '.confirm_cancel', cancelLexTimer)
    .on('click', '.completed_submission', reload)
    .on('turbolinks:load', function() { ... });

链中的前 8 个方法是点击事件——即使点击事件被委托给不同的元素，javascript 中是否有一种方法可以将它们组合在一次点击“保护伞”下

【问题讨论】：

标签： javascript jquery html events onclick

【解决方案1】：

无论是.on 还是GG's answer，您都无法摆脱一大堆东西。你总是可以把它放在一个单独的 .js 文件中来分隔它，这样它就不会弄乱你的代码。

// in addHandlers.js
function addHandlers(document) {
    document.on('click',...
}

这将清理您的代码，同时在您做有趣的事情时清除所有不必要的混乱。

【讨论】：

【解决方案2】：

您可以使用单个 .click 并使用 event 参数检查点击目标：

$(document).on('click', function (event) {
  var target = event.target;

  if ($(target).hasClass('newGameItem')) getNewGameItem();
  if ($(target).hasClass('startGame')) startThisGame();

  if (target.id == 'api_game_test') testApiGame();

  // etc
})

这里是关于 jQuery 的event.target 的文档（很差）：api.jquery.com/event.target

【讨论】：