当前位置:  编程技术>WEB前端

不要使用jQuery触发原生事件的方法

    来源: 互联网  发布时间:2014-08-25

    本文导语:  JavaScript 框架提供了如此多的功能,以至于一不小心就会掉进坑里去。 对工具库依赖得越多,在修改或维护时一个小小的改的很可能就会影响到其他的功能(俗称 处处是地雷,走路需谨慎),特别是维护多年前的遗留代码时。 我经常...

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 (其他工具库也是一样的),但好歹你也应该添加一个自定义事件名称!

    
 
 

您可能感兴趣的文章:

  • 混合语言编程—C#使用原生的Directx和OpenGL绘图的方法
  • Oracle 触发器的使用小结
  • Oracle中使用触发器(trigger)和序列(sequence)模拟实现自增列实例
  • 简单触发器的使用 献给SQL初学者
  • sql 触发器使用例子
  • 使用sql脚本创建触发器的例子
  • 请问各位大虾,如何使用jsp页面里的butten触发调用bean或者servlet???
  • jquery移除、绑定、触发元素事件使用示例详解
  • SQLServer2005触发器提示其他会话正在使用事务的上下文的解决方法
  • Mysql中的触发器简单介绍及使用案例
  • [Oracle] 如何使用触发器实现IP限制用户登录
  • mysql触发器(Trigger)简明总结和使用实例
  • SQL Server 2000中的触发器使用
  • 学习Sql Server触发器的使用
  • Sql Server触发器的使用
  •  
    本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
    本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • 使用epoll lt或者et 每次wait到一个事件处理完后是否需要重新投递事件呢?
  • jquery中交替点击事件toggle方法的使用示例
  • 使用JS或jQuery模拟鼠标点击a标签事件代码
  • jQuery 回车事件enter使用示例
  • MYSQL事件查看器使用介绍
  • 使用mysql事件调度器定时删除binlog
  • 浏览器窗口大小变化时使用resize事件对框架不起作用的解决方法
  • winform使用委托和事件来完成两个窗体之间通信的实例
  • C#程序窗体间使用回调事件方式通讯示例
  • asp.net错误捕获(错误处理)page_error事件使用方法
  • 请问在Mozilla中如何使用click()事件?(javascript,html)。快快帮我啊!
  • Python中使用PyHook监听鼠标和键盘事件实例
  • jquery新的绑定事件机制on方法的使用方法
  • c#事件使用示例详解
  • 对于 session 绑定事件的使用
  • 解析jQuery的三种bind/One/Live事件绑定使用方法
  • 我在applet使用鼠标事件的时侯总会出现如下异常,编译通过。
  • 关于javascript冒泡与默认事件的使用详解
  • jQuery入门-使用选择器和事件
  • C++ I/O 成员 tellg():使用输入流读取流指针
  • 在测试memset函数的执行效率时,分为使用Cash和不使用Cash辆种方式,该如何控制是否使用缓存?
  • C++ I/O 成员 tellp():使用输出流读取流指针
  • 求ibm6000的中文使用手册 !从来没用过服务器,现在急需使用它,不知如何使用! 急!!!!!
  • Python不使用print而直接输出二进制字符串
  • 请问:在使用oracle数据库作开发时,是使用pro*c作开发好些,还是使用库函数如oci等好一些啊?或者它们有什么区别或者优缺点啊?
  • Office 2010 Module模式下使用VBA Addressof
  • 急求结果!!假设一个有两个元素的信号量集S,表示了一个磁带驱动器系统,其中进程1使用磁带机A,进程2同时使用磁带机A和B,进程3使用磁带机B。
  • windows下tinyxml.dll下载安装使用(c++解析XML库)
  • c#中SAPI使用总结——SpVoice的使用方法
  • tcmalloc内存泄露优化c++开源库下载,安装及使用介绍
  • 使用了QWidget的程序,如何使用后台程序启动它?


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3