更换所有元件's单击与单个文档的绑定.on('单击')

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

本文关键字:单击 文档 on 绑定 单个      更新时间:2023-09-26

我一直在每个需要监听的单独元素中添加click监听器,这可以创建一个带有大量事件绑定的大而混乱的Javascript。

我现在正在考虑换一种方式;通过将点击事件绑定到整个文档,点击后,查看目标元素是否具有"数据操作"属性,如果存在,则执行其中的函数。因此,点击:

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

将执行功能ajax_load_stuff()

这将使我的代码更加干净,尤其是在ajax环境中,但我想了解这种方法的性能和效率。这种方法有缺点吗?


UPDATE代码示例:

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);

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

首先讨论缺点。

  1. 需要完美地处理事件传播,否则可能会使系统速度变慢
  2. 将参数传递给单击事件将很困难。可能需要引入另一个属性,如:数据操作参数

优点:

  1. 更少的事件处理代码