不要使用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 (其他工具库也是一样的),但好歹你也应该添加一个自定义事件名称!
不要使用jQuery触发原生事件的更多相关文章
- JQuery触发hover事件无效时使用js原生的触发事件方法
需求:在开发一个从微信公众号后台管理网页上爬取数据的chrome插件时,有部分页面元素是只显示了部分摘要信息的,需要把鼠标移上去后才能显示全部信息(类似title的弹出显示).这就需要在chrome插 ...
- Jquery触发Change事件
Jquery直接使用val的话不会触发Change事件需要做如下处理$("#"+p_id).val(p_time); $("#"+p_id).change();
- 实现Jquery触发一事件后,停留5秒,再接着触发下面的事件
这里是一个广告位的Jquery的代码,有两个不同的广告位,一个是中间浮动显示的,显示5秒后自动消失,并限定每天仅出现一次(Cookie实现): //=====================广告位的j ...
- JQuery实现click事件绑定与触发方法分析
原生JS通过什么方法绑定click事件? 原生js有一下三种方法为DOM对象绑定click事件, 第一种,在html中添加 onclick属性,在此属性中添加要绑定的事件函数,如下, 这种方法为htm ...
- jQuery触发a标签点击事件-为什么不跳转
今天开发发现 使用jQuery触发a标签的点击事件,当前的样式发生了变化,可是没有跳转,为什么? 百度后找到的解决方案: <a onclick="hanle()" href= ...
- ajax的status为201依然触发jquery的error事件的问题
昨天在调试一个ajax的时候发现,即使status是201,仍然会触发jquery的error事件.statusText是"parseerror". 通过在stackoverflo ...
- JQuery触发radio或checkbox的change事件
在JQuery中,当给radio或checkbox添加一个change事件时,如果它的值发生变化就会触发change事件;本文将详细介绍如何利用JQuery触发Checkbox的change事件需要了 ...
- [HTML5]原生事件绑定和jquery动态事件绑定的区别
原生事件绑定: <!-- 标签上绑定的事件是由window对象帮助调用,因此方法内的this其实是window对象 --> <label><input type=&quo ...
- jquery移除、绑定、触发元素事件使用示例详解
这篇文章主要介绍了jquery移除.绑定.触发元素事件使用示例详解,需要的朋友可以参考下. unbind(type [,data]) //data是要移除的函数 $('#btn').unbind(&q ...
随机推荐
- IP_ADD_MEMBERSHIP 失败
/*将本机加入多播组*/ err = setsockopt(fd, IPPROTO_IP, IP_ADD_MEMBERSHIP,&mreq, sizeof(mreq)); if (err &l ...
- springMVC源码分析--AbstractHandlerMapping(二)
上一篇博客springMVC源码分析--HandlerMapping(一)中我们简单的介绍了HandlerMapping,接下来我们介绍一下它的抽象实现类AbstractHandlerMapping
- Xcode8之后,苹果列出了最新App被拒十大原因
开发者在开发应用程序之前,熟悉苹果审核应用的技术.内容以及设计准则是非常重要的,可以大大降低应用审核被拒的可能性. 最近,苹果通过一个专门的页面给出了截止2016年10月10日应用提交审核被拒的十大原 ...
- Cartographer资料分享
中文资料稍后补充 Introducing Cartographer By Tully Foote on October 5, 2016 10:11 AM From Damon Kohler, Wolf ...
- iOS开发之自己封装的提示框(警告框)样式BHAlertView
最近需要使用到提示框(警告框)进行信息的展示和提醒,所以进行了一个类的封装,想用Swift调用此OC文件,但是发现有些困难,所以暂时先把OC代码进行展示,随后再好好研究一下在Swift中的使用. 对于 ...
- 剑指Offer——携程笔试题+知识点总结
剑指Offer--携程笔试题+知识点总结 情景回顾 时间:2016.9.17 19:10-21:10 地点:山东省网络环境智能计算技术重点实验室 事件:携程笔试 总体来说,携程笔试内容与其它企业笔试题 ...
- 深入理解CoordinatorLayout.Behavior
要研究的几个问题 一.Behavior是什么?为什么要用Behavior? 二.怎么使用Behavior? 三.从源码角度看为什么要这么使用Behavior? 一.Behavior是什么?为什么要用B ...
- Hibernate系列学习之(二) 多对一、一对一、一对多、多对多的配置方法
这是近期做案件录入.java项目中体会的几点:项目理解很是深刻,和大家共勉! hihernate一对多关联映射(单向Classes----->Student) 一对多关联映射利用了多对一关联映射 ...
- spark idea 的配置问题
不知道下面的错误是为什么? Error:scalac: missing or invalid dependency detected while loading class file 'RDD.cla ...
- Eclipse 主题
Eclipse开发环境默认都是白底黑字的,看到同事的Xcode中设置的黑灰色背景挺好看的,就去网络上查了一下.发现Eclipse也可以设置主题. http://eclipsecolorthemes.o ...