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 相关文章推荐
JSON扫盲帖 JSON.as类教程
Feb 16 Javascript
js setattribute批量设置css样式
Nov 26 Javascript
JS中eval函数的使用示例
Jul 21 Javascript
jQuery获取对象简单实现方法小结
Oct 30 Javascript
使用impress.js制作幻灯片
Sep 09 Javascript
jquery自定义右键菜单、全选、不连续选择
Mar 01 Javascript
IE和Firefox之间在JavaScript语法上的差异
Apr 22 Javascript
Vue.js实现简单动态数据处理
Feb 13 Javascript
react.js 获取真实的DOM节点实例(必看)
Apr 17 Javascript
vue-router路由与页面间导航实例解析
Nov 07 Javascript
vue中使用cropperjs的方法
Mar 01 Javascript
使用vue-router完成简单导航功能【推荐】
Jun 28 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
php 执行系统命令的方法
2009/07/07 PHP
PHP常用特殊运算符号和函数总结(php新手入门必看)
2013/02/02 PHP
php中 $$str 中 "$$" 的详解
2015/07/06 PHP
举例讲解PHP面对对象编程的多态
2015/08/12 PHP
详解Yii2 rules 的验证规则
2016/12/02 PHP
jquery插件jbox使用iframe关闭问题
2009/02/09 Javascript
asp.net HttpHandler实现图片防盗链
2009/11/09 Javascript
jQuery之字体大小的设置方法
2014/02/27 Javascript
jquery动态调整div大小使其宽度始终为浏览器宽度
2014/06/06 Javascript
javascript在IE下trim函数无法使用的解决方法
2014/09/12 Javascript
PHP中CURL的几个经典应用实例
2015/01/23 Javascript
JavaScript File分段上传
2016/03/10 Javascript
原生js和css实现图片轮播效果
2017/02/07 Javascript
Angular1.x自定义指令实例详解
2017/03/01 Javascript
详解webpack3如何正确引用并使用jQuery库
2017/08/26 jQuery
ionic选择多张图片上传的示例代码
2017/10/10 Javascript
图片文字识别(OCR)插件Ocrad.js教程
2018/11/26 Javascript
Vue使用mixin分发组件的可复用功能
2019/09/01 Javascript
layui.tree组件的使用以及搜索节点功能的实现
2019/09/26 Javascript
[00:30]塑造者的传承礼包-戴泽“暗影之焰”套装展示视频
2014/04/04 DOTA
使用Selenium破解新浪微博的四宫格验证码
2018/10/19 Python
详解Python用户登录接口的方法
2019/04/17 Python
python处理自动化任务之同时批量修改word里面的内容的方法
2019/08/23 Python
python图形用户接口实例详解
2019/12/16 Python
Python selenium 自动化脚本打包成一个exe文件(推荐)
2020/01/14 Python
Django认证系统user对象实现过程解析
2020/03/02 Python
Python 实现打印单词的菱形字符图案
2020/04/12 Python
python和js交互调用的方法
2020/06/23 Python
英国文胸专家:AmpleBosom.com
2018/02/06 全球购物
介绍一下Java中的static关键字
2012/05/12 面试题
精彩自我鉴定
2014/01/16 职场文书
出生公证书
2015/01/23 职场文书
岗位聘任报告
2015/03/02 职场文书
一年级语文教学随笔
2015/08/14 职场文书
爱国之歌(8首)
2019/09/29 职场文书
mysql 联合索引生效的条件及索引失效的条件
2021/11/20 MySQL