不要使用jQuery触发原生事件
原文链接: DO NOT TRIGGER REAL EVENT NAMES WITH JQUERY!
原文日期: 2014年02月26日
翻译日期: 2014年03月2日
翻译人员: 铁锚
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 (其他工具库也是一样的),但好歹你也应该添加一个自定义事件名称!
最新文章
- su with hyphen and without - su带横杠和不带横杠
- thinkphp学习笔记13-15集
- 安装Cocoapods(Pods 管理iOS 第三方库)
- Jmeter 快速入门教程(二)--创建简单web测试
- 实现android activity之间的跳转
- 检测Office是否安装以及获取安装 路径 及安装版本 QQ,迅雷,旺旺 C#代码
- (转)Android中使用ormlite实现持久化(一)--HelloOrmLite
- 登山(Climb)
- cmd markdown 使用教程
- Java Web Token - JWT
- Spark 常规性能调优
- CentOS 7 安装samba服务
- webstorm 2018 LICENSE SERVER 最新激活网址
- python第六章:三大利器(装饰器,迭代器,生成器)--小白博客
- Flink - CoGroup
- display: none; 与 jq show方法之间的联系
- 矩阵快速幂小结-Hdu2604
- 1.print()与input()
- 【转】【WPF】关于依赖属性的ValidateValueCallback,PropertyChangedCallback和CoerceValueCallback的执行顺序
- Vue项目中使用Vuex + axios发送请求
热门文章
- Android艺术开发探索——第二章:IPC机制(下)
- Ubuntu使用dpkg安装软件依赖问题解决 ubuntu-tweak ubuntu 16.04 LTS 系统清理
- Studio 一些使用
- 使用OpenCV读、操作、写图像并与bash合作对某个目录下所有图像进行类似处理
- Compass 更智能的搜索引擎(1)--入门
- SELinux策略语言--客体类别和许可
- Android开源框架ViewPagerIndicator的基本使用
- Spring入门介绍(一)
- android连接打印机
- FFmpeg源代码简单分析:av_write_trailer()