不要使用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 相关文章推荐
多浏览器兼容性比较好的复制到剪贴板的js代码
Oct 09 Javascript
jQuery UI Autocomplete 体验分享
Feb 14 Javascript
Javascript 中的 call 和 apply使用介绍
Feb 22 Javascript
文本域中换行符的替换示例
Mar 04 Javascript
jQuery实现ctrl+enter(回车)提交表单
Oct 19 Javascript
javascript实现别踩白块儿小游戏程序
Nov 22 Javascript
jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单
Sep 21 Javascript
jQuery实现Table表格隔行变色及高亮显示当前选择行效果示例
Feb 14 Javascript
ES6中Proxy代理用法实例浅析
Apr 06 Javascript
AngularJs+Bootstrap实现漂亮的计算器
Aug 10 Javascript
详解JavaScript中的数组合并方法和对象合并方法
May 11 Javascript
浅谈Vue使用Cascader级联选择器数据回显中的坑
Oct 31 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
用文本文件制作留言板提示(下)
2006/10/09 PHP
php 数据库字段复用的基本原理与示例
2011/07/22 PHP
在网页中控制wmplayer播放器
2006/07/01 Javascript
MSN消息提示类
2006/09/05 Javascript
模拟select的代码
2011/10/19 Javascript
VBS通过WMI监视注册表变动的代码
2011/10/27 Javascript
innerHTML属性,outerHTML属性,textContent属性,innerText属性区别详解
2015/03/13 Javascript
JS实现状态栏跑马灯文字效果代码
2015/10/24 Javascript
详解JavaScript的Date对象(制作简易钟表)
2020/04/07 Javascript
JavaScript下的时间格式处理函数Date.prototype.format
2016/01/27 Javascript
Javascript实现汉字和拼音互转的终极方案
2016/10/19 Javascript
Angular ui.bootstrap.pagination分页
2017/01/20 Javascript
JavaScript中Promise的使用详解
2017/02/26 Javascript
ES6新特性之变量和字符串用法示例
2017/04/01 Javascript
深入理解Angular中的依赖注入
2017/06/26 Javascript
JS库中的Particles.js在vue上的运用案例分析
2017/09/13 Javascript
jQuery 防止相同的事件快速重复触发方法
2018/02/08 jQuery
VUE搭建手机商城心得和遇到的坑
2019/02/21 Javascript
vue+mock.js实现前后端分离
2019/07/24 Javascript
JS实现判断移动端PC端功能
2020/02/21 Javascript
微信小程序学习总结(四)事件与冒泡实例分析
2020/06/04 Javascript
[34:10]Secret vs VG 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.24
2019/09/10 DOTA
跟老齐学Python之有容乃大的list(2)
2014/09/15 Python
Python中列表和元组的相关语句和方法讲解
2015/08/20 Python
在python中将字符串转为json对象并取值的方法
2018/12/31 Python
python tkinter实现界面切换的示例代码
2019/06/14 Python
Python-Tkinter Text输入内容在界面显示的实例
2019/07/12 Python
python批量处理txt文件的实例代码
2020/01/13 Python
聚美优品陈欧广告词
2014/03/14 职场文书
投资协议书范本
2014/04/21 职场文书
吨的认识教学反思
2014/04/27 职场文书
售后服务承诺书怎么写
2014/05/21 职场文书
2015入党自传格式范文
2015/06/26 职场文书
运动会闭幕式主持词
2015/07/01 职场文书
小学生暑假安全保证书
2015/07/13 职场文书
深入理解go slice结构
2021/09/15 Golang