不要使用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 相关文章推荐
extjs之去除s.gif的影响
Dec 25 Javascript
兼容IE和Firefox的javascript获取iframe文档内容的函数
Aug 15 Javascript
javascript自动改变文字大小和颜色的效果的小例子
Aug 02 Javascript
使用js复制链接中的部分文字的方法
Jul 30 Javascript
初步了解javascript面向对象
Nov 09 Javascript
基于JavaScript实现div层跟随滚动条滑动
Jan 12 Javascript
JS中split()用法(将字符串按指定符号分割成数组)
Oct 24 Javascript
完美实现js选项卡切换效果(二)
Mar 08 Javascript
Bootstrap Table使用整理(五)之分页组合查询
Jun 09 Javascript
JS立即执行函数功能与用法分析
Jan 15 Javascript
简单说说如何使用vue-router插件的方法
Apr 08 Javascript
layer.open 获取不到表单信息的解决方法
Sep 26 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中的Base62类(适用于数值转字符串)
2013/08/12 PHP
CI框架开发新浪微博登录接口源码完整版
2014/05/28 PHP
Thinkphp3.2简单解决多文件上传只上传一张的问题
2017/09/26 PHP
thinkPHP5框架实现基于ajax的分页功能示例
2018/06/12 PHP
jQuery源码中的chunker 正则过滤符分析
2012/07/31 Javascript
jquery自定义属性(类型/属性值)
2013/05/21 Javascript
JavaScript处理解析JSON数据过程详解
2015/09/11 Javascript
详解升级react-router 4 踩坑指南
2017/08/14 Javascript
jQuery实现的事件绑定功能基本示例
2017/10/11 jQuery
JavaScript 中的 this 工作原理
2018/06/20 Javascript
微信小程序的注册页面包含倒计时验证码、获取用户信息
2019/05/22 Javascript
原生js实现的移动端可拖动进度条插件功能详解
2019/08/15 Javascript
Vue组件间数据传递的方式(3种)
2020/07/13 Javascript
vue-router之解决addRoutes使用遇到的坑
2020/07/19 Javascript
Vue解决echart在element的tab切换时显示不正确问题
2020/08/03 Javascript
微信小程序实现点击导航标签滚动定位到对应位置
2020/11/19 Javascript
python bottle框架支持jquery ajax的RESTful风格的PUT和DELETE方法
2017/05/24 Python
python3利用ctypes传入一个字符串类型的列表方法
2019/02/12 Python
Python音频操作工具PyAudio上手教程详解
2019/06/26 Python
python读写配置文件操作示例
2019/07/03 Python
使用Python防止SQL注入攻击的实现示例
2020/05/21 Python
Python创建临时文件和文件夹
2020/08/05 Python
Python如何发送与接收大型数组
2020/08/07 Python
css3 按钮 利用css3实现超酷下载按钮
2013/03/18 HTML / CSS
乔丹诺(Giordano)酒庄德国官网:找到最好的意大利葡萄酒
2017/12/28 全球购物
应聘教师自荐信
2013/10/12 职场文书
银行实习生的自我评价
2014/01/13 职场文书
卖房协议书
2014/04/11 职场文书
应聘销售主管的求职信
2014/04/26 职场文书
2014城乡环境综合治理工作总结
2014/12/19 职场文书
2015财务年终工作总结范文
2015/05/22 职场文书
聘任书范文大全
2015/09/21 职场文书
2016年学习贯彻十八届五中全会精神心得体会
2016/01/05 职场文书
利用javaScript处理常用事件详解
2021/04/14 Javascript
JavaScript严格模式不支持八进制的问题讲解
2021/11/07 Javascript
python单向链表实例详解
2022/05/25 Python