我总是向每个需要监听的单独元素添加点击监听器,这可能会创建一个带有大量事件绑定(bind)的大而困惑的 Javascript。
我现在正在考虑用另一种方式来做;通过将单击事件绑定(bind)到整个文档,并在单击时查看目标元素是否具有“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);
最佳答案
当然,这种方法有几个优点和缺点。
首先讨论缺点。
- 需要完美地处理事件传播,否则可能会使您的系统变慢。
- 向点击事件传递参数会很困难。也许需要引入另一个属性,例如:data-action-param
优点:
- 更少的事件处理代码。
关于javascript - 将所有元素的点击绑定(bind)替换为单个文档(('click')?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34577110/