用单个 document.on('click') 替换所有元素的点击绑定？

Question

我总是将点击监听器添加到每个需要监听的单独元素，这会造成大量事件绑定的混乱 Javascript。

我现在正在考虑换一种方式；通过将点击事件绑定到整个文档并在点击时查看目标元素是否具有 'data-action' 属性，如果存在，则执行其中的函数。这样点击：

<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

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

先说缺点。

需要完美地处理事件传播，否则会使您的系统变慢。
将参数传递给点击事件会很困难。也许需要引入另一个属性，如：data-action-param

优点：

更少的事件处理代码。

用单个 document.on('click') 替换所有元素的点击绑定？

Replacing all element's click bindings with a single document.on('click')?

javascript

performance

jquery

dom-events

onclicklistener