不要使用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 相关文章推荐
短信提示使用 特效
Jan 19 Javascript
javascript的对话框详解与参数
Mar 08 Javascript
利用google提供的API(JavaScript接口)获取网站访问者IP地理位置的代码详解
Jul 24 Javascript
基于jquery的3d效果实现代码
Mar 23 Javascript
模仿百度三维地图的js数据分享
May 12 Javascript
PHP结合jQuery实现的评论顶、踩功能
Jul 22 Javascript
js实现的早期滑动门菜单效果代码
Aug 27 Javascript
js添加千分位的实现代码(超简单)
Aug 01 Javascript
详解使用vue实现tab 切换操作
Jul 03 Javascript
微信小程序getPhoneNumber获取用户手机号
Sep 29 Javascript
vue随机验证码组件的封装实现
Feb 19 Javascript
Vue 禁用浏览器的前进后退操作
Sep 04 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中is_file不能替代file_exists的理由
2014/03/04 PHP
php实现的太平洋时间和北京时间互转的自定义函数分享
2014/08/19 PHP
WordPress特定文章对搜索引擎隐藏或只允许搜索引擎查看
2015/12/31 PHP
关于PHP中字符串与多进制转换函数的实例代码
2016/11/03 PHP
小程序微信支付功能配置方法示例详解【基于thinkPHP】
2019/05/05 PHP
Yii2框架视图(View)操作及Layout的使用方法分析
2019/05/27 PHP
PHP的垃圾回收机制代码实例讲解
2021/02/27 PHP
Chrome中JSON.parse的特殊实现
2011/01/12 Javascript
什么是DOM(Document Object Model)文档对象模型
2012/03/05 Javascript
将JavaScript的jQuery库中表单转化为JSON对象的方法
2015/11/17 Javascript
基于jquery实现图片放大功能
2016/05/07 Javascript
AngularGauge 属性解析详解
2016/09/06 Javascript
AngularJS 表达式详解及实例代码
2016/09/14 Javascript
jQuery中ajax错误调试分析
2016/12/01 Javascript
jquery实现多次上传同一张图片
2017/01/09 Javascript
C#微信小程序服务端获取用户解密信息实例代码
2017/03/10 Javascript
使用JavaScript实现在页面中显示距离2017年中秋节的天数
2017/09/26 Javascript
Thinkjs3新手入门之如何使用静态资源目录
2017/12/06 Javascript
Javascript格式化并高亮xml字符串的方法及注意事项
2018/08/13 Javascript
JavaScript canvas实现雪花随机动态飘落
2020/02/08 Javascript
Vue 实现对quill-editor组件中的工具栏添加title
2020/08/03 Javascript
Python常见文件操作的函数示例代码
2011/11/15 Python
python抓取网页中链接的静态图片
2018/01/29 Python
Python性能分析工具py-spy原理用法解析
2020/07/27 Python
用css3制作纸张效果(外翻卷角)
2013/02/01 HTML / CSS
canvas中普通动效与粒子动效的实现代码示例
2019/01/03 HTML / CSS
电大自我鉴定范文
2013/10/01 职场文书
夜大毕业生自我鉴定
2013/10/31 职场文书
社区网格化管理实施方案
2014/03/21 职场文书
文明演讲稿范文
2014/05/12 职场文书
民族团结先进个人事迹材料
2014/06/02 职场文书
机关副主任个人四风问题整改措施
2014/09/26 职场文书
2014年职称评定工作总结
2014/11/26 职场文书
贫困生证明范文
2015/06/16 职场文书
人生一定要学会的三样东西:放下、忘记、珍惜
2019/08/21 职场文书
Python制作春联的示例代码
2022/01/22 Python