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 相关文章推荐
动态表格Table类的实现
Aug 26 Javascript
JavaScript 对象成员的可见性说明
Oct 16 Javascript
在JavaScript应用中使用RequireJS来实现延迟加载
Jul 01 Javascript
jQuery EasyUI中DataGird动态生成列的方法
Apr 05 Javascript
BootStrap 图标icon符号图标glyphicons不正常显示的快速解决办法
Dec 08 Javascript
Angular.js中ng-include用法及多标签页面的实现方式详解
May 07 Javascript
js移动端图片压缩上传功能
Aug 18 Javascript
关于redux-saga中take使用方法详解
Feb 27 Javascript
bootstrap 弹出框modal添加垂直方向滚轴效果
Jul 09 Javascript
JavaScript中创建原子的方法总结
Aug 26 Javascript
vue实现设置载入动画和初始化页面动画效果
Oct 28 Javascript
使用JS location实现搜索框历史记录功能
Dec 23 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生成随机密码类分享
2014/06/25 PHP
ThinkPHP框架里隐藏index.php
2016/04/12 PHP
php获取小程序码的实现代码(B类接口)
2020/06/13 PHP
该如何加载google-analytics(或其他第三方)的JS
2010/05/13 Javascript
javascript的propertyIsEnumerable()方法使用介绍
2014/04/09 Javascript
判断及设置浏览器全屏模式
2014/04/20 Javascript
JQuery弹出层示例可自定义
2014/05/19 Javascript
JS使用cookie实现DIV提示框只显示一次的方法
2015/11/05 Javascript
AngularJS Bootstrap详细介绍及实例代码
2016/07/28 Javascript
有趣的bootstrap走动进度条
2016/12/01 Javascript
详解vue 中使用 AJAX获取数据的方法
2017/01/18 Javascript
bootstrap table之通用方法( 时间控件,导出,动态下拉框, 表单验证 ,选中与获取信息)代码分享
2017/01/24 Javascript
Vue组件中slot的用法
2018/01/30 Javascript
基于VUE实现的九宫格抽奖功能
2018/09/30 Javascript
react-native滑动吸顶效果的实现过程
2019/06/03 Javascript
js对象属性名驼峰式转下划线的实例代码
2020/09/17 Javascript
Python处理RSS、ATOM模块FEEDPARSER介绍
2015/02/18 Python
浅谈pyqt5在QMainWindow中布局的问题
2019/06/21 Python
python算法与数据结构之冒泡排序实例详解
2019/06/22 Python
Django多数据库的实现过程详解
2019/08/01 Python
django中media媒体路径设置的步骤
2019/11/15 Python
Python 项目转化为so文件实例
2019/12/23 Python
PyTorch里面的torch.nn.Parameter()详解
2020/01/03 Python
Python 将 QQ 好友头像生成祝福语的实现代码
2020/05/03 Python
Python如何获取文件指定行的内容
2020/05/27 Python
CSS3 真的会替代 SCSS 吗
2021/03/09 HTML / CSS
奥地利顶级内衣丝袜品牌英国站:Wolford英国
2016/08/29 全球购物
荷兰家电销售网站:Welhof
2020/12/08 全球购物
如何做好总经理助理
2013/11/12 职场文书
公司法人授权委托书范本
2014/09/12 职场文书
实习介绍信模板
2015/01/30 职场文书
2019最新婚庆对联集锦!
2019/07/10 职场文书
go xorm框架的使用
2021/05/22 Golang
MySQL中的隐藏列的具体查看
2021/09/04 MySQL
javascript实现计算器功能详解流程
2021/11/01 Javascript
java中如何截取字符串最后一位
2022/07/07 Java/Android