不要使用jQuery触发原生事件的方法
更新时间：2014年03月03日 17:39:46 作者：
这篇文章主要介绍了不要使用jQuery触发原生事件的方法,需要的朋友可以参考下
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 (其他工具库也是一样的),但好歹你也应该添加一个自定义事件名称!
注:我知道,其他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实现大屏滚动播放效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-06-06
jQuery是一个快捷简便的JavaScript框架，说道框架可以直接理解为就是对原来底层的东西进行了封装使得开发者能够利用这个框架快速开发。2010-11-11
这篇文章主要介绍了网站加载第三方CDN，如果jQuery库不成功则加载本地的jquery的实现代码,需要的朋友可以参考下2018-05-05
下面小编就为大家分享一篇jQuery动态添加li标签并添加属性和绑定事件方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
在网站前端开发中，浏览器兼容性是前端开发框架要解决的第一个问题，要解决兼容性问题就得首先准确判断出浏览器的类型及其版本，而判断浏览器的版本一般只能通过分析浏览器的userAgent才能知道.今天我们把各种判断方法都总结一下，希望对大家有所帮助2014-09-09
今天研究了AJAX使用JSONP进行跨域调用的方法，发现使用GET方式和POST方式都可以进行跨域调用,这里简单分享下，方便需要的朋友2013-12-12
这篇文章主要为大家详细介绍了jquery实现垂直和水平菜单导航栏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-08-08
jQuery 的选择器可谓之强大无比，本文给大家总结下jQuery选择器之常用元素查找方法，非常不错，感兴趣的朋友一起学习吧2016-08-08
这篇文章主要介绍了基于Jquery和html5实现炫酷的3D焦点图动画的相关资料，焦点图中的图片利用了CSS3的相关特性实现图片倾斜效果，从而让图片出现3D的视觉效果，感兴趣的小伙伴们可以参考一下2016-03-03
这篇文章主要为大家详细介绍了jquery实现拖动效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-08-08
最新评论