javascript的事件触发器介绍的实现


Posted in Javascript onJune 05, 2014

事件触发器从字面意思上可以很好的理解,就是用来触发事件的,但是有些没有用过的朋友可能就会迷惑了,事件不是通常都由用户在页面上的实际操作来触发的吗?这个观点不完全正确,因为有些事件必须由程序来实现,如自定义事件,jQuery的ajax框架的一些自定义事件就必须由事件触发器来实现。当然,在一些特殊情况下,用事件触发器来触发事件比用户的实际操作来触发事件更方便。

对于实现事件触发器,浏览器都有原生的方法来支持,但是在兼容性上又有很大的出入,这种兼容性的问题完全在意料之中,IE有自己的方法,其他标准浏览器也有一套方法,不说谁的方法好与不好,对于WEB开发者来说搞出几套方法就是对开发人员的一种折磨。IE支持fireEvent方法来实现事件触发,标准浏览器支持dispatchEvent来实现事件触发,两面派的IE9是两者都支持。下面是出自prototype.js的源码(其实我是从司徒正美的博客复制过来的):

var fireEvent = function(element,event){
 if (document.createEventObject){
  // IE浏览器支持fireEvent方法
  var evt = document.createEventObject();
  return element.fireEvent('on'+event,evt)
 }
 else{
  // 其他标准浏览器使用dispatchEvent方法
  var evt = document.createEvent( 'HTMLEvents' );
  // initEvent接受3个参数:
  // 事件类型,是否冒泡,是否阻止浏览器的默认行为
  evt.initEvent(event, true, true);  
  return !element.dispatchEvent(evt);
 }
};

上面的方法可以兼容主流的浏览器以实现事件触发器的功能。但是对于一些封装好的事件处理系统,如jQuery的event模块,就没这么简单了,只能通过模拟来实现了。我在之前写过一个很简单的事件处理系统,最近又碰到自定义事件的需求,于是在之前的事件系统的基础上模拟了一个事件触发器,代码如下:

/**
 * 事件触发器
 * @param { Object } DOM元素
 * @param { String / Object } 事件类型 / event对象
 * @param { Array }  传递给事件处理函数的附加参数
 * @param { Boolean } 是否冒泡
 */
trigger : function( elem, event, data, isStopPropagation ){
 var type = event.type || event,
  // 冒泡的父元素,一直到document、window
  parent = elem.parentNode || 
   elem.ownerDocument || 
   elem === elem.ownerDocument && win,
  eventHandler = $.data( elem, type + 'Handler' ); isStopPropagation = typeof data === 'boolean' ? 
  data : (isStopPropagation || false);
 data = data && isArray( data ) ? data : [];
 // 创建自定义的event对象  
 event = typeof event === 'object' ? 
  event : {
   type : type,
   preventDefault : noop,
   stopPropagation : function(){
    isStopPropagation = true;
   }
  };
 event.target = elem;  
 data.unshift( event );
 if( eventHandler ){
  eventHandler.call( elem, data );
 }
 // 递归调用自身来模拟冒泡
 if( parent && !isStopPropagation ){
  data.shift();
  this.trigger( parent, event, data );
 }
}

模拟的原理并不难,给某元素绑定一个事件处理函数,如果有触发事件的实际操作就会执行相应的事件处理函数,所以要达到事件触发器的功能只要获取到相应的事件处理函数然后执行就差不多了,这是最基本的。

在实际的事件发生时浏览器会生成一个event对象,里面包含了一些事件发生时的属性和信息。如果没有实际的事件发生是没有这个event对象的,所以上面的代码也创建了一个event对象满足最基本的功能。

还有事件冒泡,如果没有实际的事件发生,自然也不会有冒泡的行为,那么如果要模拟冒泡的功能,就必须不断的查找父元素并检查是否绑定了相同类型的事件,直至到document和window为止,如果结构复杂,这种递归调用的方法性能估计会不怎么样。

最后是浏览器的默认行为,我觉得这个要去模拟相当麻烦,麻烦到不知如何去实现,比如a标签默认的跳转,我测试了jQuery的trigger,也没有实现,但是一些其他的行为貌似又在API手册中有介绍。毕竟这个功能不是很重要,暂时也没做过多的深究。

 

 

Javascript 相关文章推荐
Javascript操作select方法大全[新增、修改、删除、选中、清空、判断存在等]
Sep 26 Javascript
js 异步处理进度条
Apr 01 Javascript
JavaScript基础函数整理汇总
Jan 30 Javascript
基于JS实现textarea中获取动态剩余字数的方法
May 25 Javascript
在JSP中如何实现MD5加密的方法
Nov 02 Javascript
JavaScript之WebSocket技术详解
Nov 18 Javascript
vue.js事件处理器是什么
Mar 20 Javascript
vue params、query传参使用详解
Sep 12 Javascript
vue 路由嵌套高亮问题的解决方法
May 17 Javascript
js常见遍历操作小结
Jun 06 Javascript
JS中类的静态方法,静态变量,实例方法,实例变量区别与用法实例分析
Mar 14 Javascript
微信小程序组件生命周期的踩坑记录
Mar 03 Javascript
javascript中attribute和property的区别详解
Jun 05 #Javascript
使用jquery实现的一个图片延迟加载插件(含图片延迟加载原理)
Jun 05 #Javascript
用js的document.write输出的广告无阻塞加载的方法
Jun 05 #Javascript
javascript数组去重方法终极总结
Jun 05 #Javascript
javascript设计模式之解释器模式详解
Jun 05 #Javascript
javascript监听鼠标滚轮事件浅析
Jun 05 #Javascript
详解JavaScript语法对{}处理的坑爹之处
Jun 05 #Javascript
You might like
跟我学小偷程序之成功偷取首页(第三天)
2006/10/09 PHP
PHP网站提速三大“软”招
2006/10/09 PHP
smarty高级特性之对象的使用方法
2015/12/25 PHP
Jquery 自定义动画概述及示例
2013/03/29 Javascript
下拉列表select 由左边框移动到右边示例
2013/12/04 Javascript
jQuery中$.click()无效问题分析
2015/01/29 Javascript
jquery+css3问卷答题卡翻页动画效果示例
2016/10/26 Javascript
Chrome不支持showModalDialog模态对话框和无法返回returnValue问题的解决方法
2016/10/30 Javascript
javascript删除html标签函数cIsHTML
2017/01/09 Javascript
jQuery实现百度登录框的动态切换效果
2017/04/21 jQuery
基于JavaScript实现抽奖系统
2018/01/16 Javascript
vue 设置路由的登录权限的方法
2018/07/03 Javascript
vue实现路由切换改变title功能
2019/05/28 Javascript
tensorflow实现softma识别MNIST
2018/03/12 Python
python基础教程项目五之虚拟茶话会
2018/04/02 Python
python中将一个全部为int的list 转化为str的list方法
2018/04/09 Python
Python3.6使用tesseract-ocr的正确方法
2018/10/17 Python
python处理两种分隔符的数据集方法
2018/12/12 Python
PyQt QListWidget修改列表项item的行高方法
2019/06/20 Python
numpy和pandas中数组的合并、拉直和重塑实例
2019/06/28 Python
简单了解python 生成器 列表推导式 生成器表达式
2019/08/22 Python
Python爬取新型冠状病毒“谣言”新闻进行数据分析
2020/02/16 Python
使用python自动追踪你的快递(物流推送邮箱)
2020/03/17 Python
python画环形图的方法
2020/03/25 Python
使用Keras建立模型并训练等一系列操作方式
2020/07/02 Python
IE兼容css3圆角的实现代码
2011/07/21 HTML / CSS
英国最大的割草机购买网站:Just Lawnmowers
2019/11/02 全球购物
信息技术专业个人自我评价
2013/12/11 职场文书
会计专业自我评价
2014/02/12 职场文书
新品发布会主持词
2014/04/02 职场文书
大型活动组织方案
2014/05/10 职场文书
2014年学生会部门工作总结
2014/11/07 职场文书
资料员岗位职责
2015/02/10 职场文书
2015医德医风个人工作总结
2015/04/02 职场文书
PHP对接阿里云虚拟号的实现(号码隐私保护)
2021/04/06 PHP
Vue3.0写自定义指令的简单步骤记录
2021/06/27 Vue.js