不要使用jQuery触发原生事件的方法


Posted in Javascript onMarch 03, 2014

JavaScript 框架提供了如此多的功能,以至于一不小心就会掉进坑里去。 对工具库依赖得越多,在修改或维护时一个小小的改的很可能就会影响到其他的功能(俗称 处处是地雷,走路需谨慎),特别是维护多年前的遗留代码时。 我经常看到的一个错误是关于 jQuery的 trigger, trigger允许开发者手动触发某些事件。 这个功能真的非常强大与好用,但是请遵守约定,不要触发JS中那些原生的事件名称!
注:我知道,其他JS框架也提供这种功能 —— 我只用jQuery作为一个例子,因为我看到了它的受欢迎程度,最近又刚好碰上这个问题。 而所有工具类库都有可能引发同样的问题。 比如 MooTools使用 的 fireEvent 等。
下面是使用 trigger 来完成任务的一个典型例子:

// 监听 click 事件 
jQuery('.tabs a').on('click', function() { 
// 执行某些操作,比如切换界面,加载内容等.. 
}); // 在最后一个 a 标签上触发 click 事件 
jQuery('.tabs a').last().trigger('click');

上面的代码将会打开给定index的tab标签。 我完全理解开发者使用 trigger 来处理这些事情的原因,通常是因为要触发的函数在全局范围内不可用,而触发事件是很容易的,也总是可用的。 问题是,使用原生的事件名称来触发可能 ... 触发 ... 一些无法言说的伤。让我们来看看在网站的其他地方添加的内容:
// 监听 body 内部的所有 click 事件 
jQuery('body').on('click', 'a', function() { 
// 此处可以进行一些业务逻辑处理 ... // 满足条件(Condition met), 则进行另外一些操作! 
if(conditionMet) { 
// 刷新页面? 
// 打开子菜单? 
// 提交表单? 
// ... 灯灯蹬蹬,Intel 
} 
});

现在有一个问题 —— 选项卡单击事件可能被其他完全独立的部分监听着,这处理起来就比较麻烦。 呵呵,最好的解决方案是使用一个自定义的事件名称跟在原生事件后面:
// 监听 click 事件时,带上自定义的事件 
jQuery('.tabs a').on('click tabs-click', function() { 
// 切换 tab, 加载内容,等等等等 ... 
}); // 在最后一个标签上触发 "假" 的事件 
jQuery('.tabs a').last().trigger('tabs-click');

现在你的事件触发器将不再和页面上的其他监听器起冲突。 保守的开发人员对我说,你可能想要避免使用 trigger (其他工具库也是一样的),但好歹你也应该添加一个自定义事件名称!
Javascript 相关文章推荐
IE8 浏览器Cookie的处理
Jan 31 Javascript
精通Javascript系列之Javascript基础篇
Jun 07 Javascript
JavaScript使用循环和分割来替换和删除元素实例
Oct 13 Javascript
使用JavaScript 编写简单计算器
Nov 24 Javascript
JavaScript模拟重力状态下抛物运动的方法
Mar 03 Javascript
javascript实现实时输出当前的时间
Apr 27 Javascript
详解javascript事件绑定使用方法
Oct 20 Javascript
JavaScript实现的XML与JSON互转功能详解
Feb 16 Javascript
jQuery ajax实现省市县三级联动
Mar 07 Javascript
基于JavaScript 性能优化技巧心得(分享)
Dec 11 Javascript
web前端vue之vuex单独一文件使用方式实例详解
Jan 11 Javascript
详解vue-router传参的两种方式
Sep 10 Javascript
jquery实现点击消失的代码
Mar 03 #Javascript
jquery提交form表单简单示例分享
Mar 03 #Javascript
jquery序列化form表单使用ajax提交后处理返回的json数据
Mar 03 #Javascript
js函数在frame中的相互调用详解
Mar 03 #Javascript
window.onload追加函数使用示例
Mar 03 #Javascript
js this函数调用无需再次抓获id,name或标签名
Mar 03 #Javascript
解决Jquery鼠标经过不停滑动的问题
Mar 03 #Javascript
You might like
Php Mssql操作简单封装支持存储过程
2009/12/11 PHP
php 学习资料零碎东西
2010/12/04 PHP
Dom加载让图片加载完再执行的脚本代码
2008/05/15 Javascript
JavaScript delete 属性的使用
2009/10/08 Javascript
java与javascript之间json格式数据互转介绍
2013/10/29 Javascript
Jquery中CSS选择器用法分析
2015/02/10 Javascript
全面解析Bootstrap排版使用方法(标题)
2015/11/30 Javascript
JavaScript+CSS实现的可折叠二级菜单实例
2016/02/29 Javascript
javaScript给元素添加多个class的简单实现
2016/07/20 Javascript
jQuery 利用$.ajax 时获取原生XMLHttpRequest 对象的方法
2016/08/25 Javascript
js两种拼接字符串的简单方法(必看)
2016/09/02 Javascript
JavaScript实现url参数转成json形式
2016/09/25 Javascript
jquery 实时监听输入框值变化的完美方法(必看)
2017/01/26 Javascript
vue-cli3使用 DllPlugin 实现预编译提升构建速度
2019/04/24 Javascript
Echarts地图添加引导线效果(labelLine)
2019/09/30 Javascript
[01:28]一分钟告诉你DOTA2 TI9不朽宝藏Ⅱ中有什么!
2019/07/09 DOTA
Python实现list反转实例汇总
2014/11/11 Python
python使用clear方法清除字典内全部数据实例
2015/07/11 Python
python在Windows下安装setuptools(easy_install工具)步骤详解
2016/07/01 Python
Python3利用SMTP协议发送E-mail电子邮件的方法
2017/09/30 Python
python数据结构之线性表的顺序存储结构
2018/09/28 Python
pybind11和numpy进行交互的方法
2019/07/04 Python
python的常见矩阵运算(小结)
2019/08/07 Python
戴森比利时官方网站:Dyson BE
2020/10/03 全球购物
Java模拟试题
2014/11/10 面试题
业务员岗位职责范本
2013/12/15 职场文书
会计顶岗实习心得
2014/01/25 职场文书
《草原》教学反思
2014/02/15 职场文书
电气工程及其自动化专业求职信
2014/06/23 职场文书
个人作风纪律整顿整改措施
2014/10/25 职场文书
党建工作目标管理责任书
2015/01/29 职场文书
万里长城导游词
2015/01/30 职场文书
python 标准库原理与用法详解之os.path篇
2021/10/24 Python
CSS巧用渐变实现高级感背景光动画
2021/12/06 HTML / CSS
Python爬虫网络请求之代理服务器和动态Cookies
2022/04/12 Python
Sentry的安装、配置、使用教程(Sentry日志手机系统)
2022/07/23 Python