如何处理原生 JavaScript 中的许多 jQuery 'on' 点击事件？答案

【问题标题】：How to deal with many jQuery 'on' click events in native JavaScript?如何处理原生 JavaScript 中的许多 jQuery 'on' 点击事件？
【发布时间】：2016-04-04 21:26:11
【问题描述】：

随着我越来越多地使用 Web 应用程序并使用异步内容加载。我最终得到了很多 $(document).on('click') 事件监听器。

我想用纯 JavaScript 编写此代码，但不确定最好的方法。以下是我想要摆脱的，因为它感觉很恶心。

var doc = $(document);

doc.on('click', 'someElement1', function(){});
doc.on('click', 'someElement2', function(){});
doc.on('click', 'someElement3', function(){});
doc.on('click', 'someElement4', function(){});
doc.on('click', 'someElement5', function(){});

每次点击都有不同的事情要做，并且由于我将所有内容组件化并编写可在许多地方使用的函数的方式，感觉就像始终使用文档而不是父元素是一种更安全的方法。

任何帮助将不胜感激，谢谢。

【问题讨论】：

event.target 怎么样？
@RayonDabre — event.target 为您提供点击的实际元素，jQuery 委托事件匹配选择器匹配的元素及其所有后代。
如果有人有时间，您能否在不使用 jQuery 的情况下整理出上述最佳实践版本？
@matt3224 我可以建议一个 jquery 版本的解决方案，只使用一个 .on 事件侦听器和尽可能多的 if 条件来检查单击了哪个按钮/div，然后你可以相应地编写你的函数

标签： javascript jquery onclick document

【解决方案1】：

@shivgre 我的意思是我可以猜测一下，也许是这样的：

$(document).on('click', function(e) {

    if (e.target === $('someElement1')[0]) {
        /* do some stuff */
    }

    if (e.target === $('someElement2')[0]) {
        /* do some stuff */
    }

    if (e.target === $('someElement3')[0]) {
        /* do some stuff */
    }

    if (e.target === $('someElement4')[0]) {
        /* do some stuff */
    }

    if (e.target === $('someElement5')[0]) {
        /* do some stuff */
    }

});

我的意思是我可能想多了，因为 jQuery 免费解决方案不会有太大不同。我做$(document).on('click'); 的关键原因是因为大量使用ajax 来加载内容。有没有办法解决这个问题？

每次点击页面时触发所有文档点击事件感觉有点矫枉过正。有解决这个问题的想法吗？

【讨论】：