更换所有元件's单击与单个文档的绑定.on('单击')
Replacing all element's click bindings with a single document.on('click')?
我一直在每个需要监听的单独元素中添加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);
当然,这种方法有几个优点和缺点。
首先讨论缺点。
- 需要完美地处理事件传播,否则可能会使系统速度变慢
- 将参数传递给单击事件将很困难。可能需要引入另一个属性,如:数据操作参数
优点:
- 更少的事件处理代码
相关文章:
- 单击文档时的Backbone JS事件
- 突出显示iframe内的文本,同时使用jquery单击文档上的相同文本
- 为什么首先单击文档空白处的任何位置启动代码,而不是单击超链接,以及为什么打开了太多选项卡
- 谷歌表单:在文档的电子邮件中包含超链接'谷歌硬盘的位置
- 当用户单击文档中的任意位置时淡化弹出窗口
- jQuery UI 日期选择器 onClose:区分日期单击和文档单击
- 如果我单击文档中的任何其他 HTML 控件,tabIndex 将无法正常运行
- 单击文档中其他任何位置时触发,即使使用iframe也是如此
- 如何通过点击文档触发函数
- 在firefox中,当右键单击文本字段时,如何获取起始位置
- $(文档).(“click" . .如何在单击文档的其他位置时折叠列表
- 单击文档隐藏菜单
- 如何通过单击文本字段淡入通知
- 更改类,单击文档上的任何位置以关闭菜单
- 将javascript代码添加到任何网站,并在webdriver中每次点击文档时执行添加的功能
- 如何启用其他文本字段单击文本字段
- 如果我们在鼠标下移时设置preventDefault,然后双击文档,那么它就会阻止复选框/单选标签的默认行为
- 当下拉菜单打开并且用户单击文档时,尝试关闭下拉菜单
- 单击文档正文时隐藏iPad键盘
- ExtJS网格表单与文档在MySQL