用单个document.on（'click'）？替换所有元素的单击绑定。

Question

我一直将点击侦听器添加到每个需要侦听的单独元素中，这会创建带有许多事件绑定的大型Java脚本。

我现在正在考虑以另一种方式进行；通过将click事件绑定到整个文档，然后单击，查看目标元素是否具有“数据操作”属性，如果存在，则在其中执行功能。这样点击：

<a href="#" data-action="ajax_load_stuff"></a>

将执行功能ajax_load_stuff()

这将使我的代码更加整洁，尤其是在ajax环境中，但是我想了解这种方法的性能和效率。这种方法有什么缺点吗？

---

更新代码示例：

document.body.addEventListener("click", function (e) {
    if (e.target) {
        var action = e.target.getAttribute("data-action");
        if (action) {
            e.stopPropagation();
            var params = e.target.getAttribute("data-params");
            var data = [];
            if (params) {
                data = params.split(',');
            }
            window[action].apply(e.target, data);
        }
    }
}, false);

Answer 1

当然，此方法有几个优点和缺点。

首先讨论缺点。

1. 需要完美处理事件传播，否则可能会使您的系统变慢。
2. 将参数传递给click事件将很困难。可能需要引入另一个属性，例如：data-action-param

优点：

1. 较少事件处理代码。