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 相关文章推荐
在视频前插入广告
Nov 20 Javascript
面向对象的Javascript之三(封装和信息隐藏)
Jan 27 Javascript
JQuery给网页更换皮肤的方法
May 30 Javascript
js clearInterval()方法的定义和用法
Nov 11 Javascript
js实现无缝滚动特效
Dec 20 Javascript
JS实现简单的右下角弹出提示窗口完整实例
Jun 21 Javascript
jQuery simpleModal插件的使用介绍
Aug 30 Javascript
AngularJs  unit-testing(单元测试)详解
Sep 02 Javascript
bootstrap table实现单击单元格可编辑功能
Mar 28 Javascript
Node.js+jade抓取博客所有文章生成静态html文件的实例
Sep 19 Javascript
详解Puppeteer 入门教程
May 09 Javascript
layer.js之回调销毁对话框的例子
Sep 11 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网站来路获取代码(针对搜索引擎)
2010/06/08 PHP
ThinkPHP中I(),U(),$this->post()等函数用法
2014/11/22 PHP
php提取字符串中网站url地址的方法
2014/12/03 PHP
php中二维数组排序问题方法详解
2015/08/28 PHP
简单了解WordPress开发中update_option()函数的用法
2016/01/11 PHP
PHP会话操作之cookie用法分析
2016/09/28 PHP
Mac版PhpStorm之XAMPP整合apache服务器配置的图文教程详解
2016/10/13 PHP
php 读写json文件及修改json的方法
2018/03/07 PHP
jquery插件tooltipv顶部淡入淡出效果使用示例
2013/12/05 Javascript
用js一次改变多个input的readonly属性值的方法
2014/06/11 Javascript
了不起的node.js读书笔记之node的学习总结
2014/12/22 Javascript
Nodejs从有门道无门菜鸟起飞必看教程
2016/07/20 NodeJs
JS实现将Asp.Net的DateTime Json类型转换为标准时间的方法
2016/08/02 Javascript
动态JavaScript所造成一些你不知道的危害
2016/09/25 Javascript
JS设计模式之惰性模式(二)
2017/09/29 Javascript
ES6/JavaScript使用技巧分享
2017/12/14 Javascript
使用Vue.js 和Chart.js制作绚丽多彩的图表
2019/06/15 Javascript
layui实现给某一列加点击事件
2019/10/26 Javascript
[05:09]2016国际邀请赛中国区预选赛淘汰赛首日精彩回顾
2016/06/29 DOTA
Python的多态性实例分析
2015/07/07 Python
Python 反转字符串(reverse)的方法小结
2018/02/20 Python
python操作excel的方法
2018/08/16 Python
selenium跳过webdriver检测并模拟登录淘宝
2019/06/12 Python
Python为何不能用可变对象作为默认参数的值
2019/07/01 Python
python绘制无向图度分布曲线示例
2019/11/22 Python
python生成13位或16位时间戳以及反向解析时间戳的实例
2020/03/03 Python
在线服装零售商:SheIn
2016/07/22 全球购物
大学生入党自我鉴定
2013/10/31 职场文书
《三顾茅庐》教学反思
2014/04/10 职场文书
比赛口号大全
2014/06/10 职场文书
2014年扶贫工作总结
2014/11/18 职场文书
2015秋季幼儿园开学寄语
2015/03/25 职场文书
健康证明
2015/06/19 职场文书
JS数组方法some、every和find的使用详情
2021/10/05 Javascript
nginx实现动静分离的方法示例
2021/11/07 Servers