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

148 阅读 0 评论 98 点赞

我是靠谱客的博主健忘洋葱，最近开发中收集的这篇文章主要介绍javascript的事件触发器介绍的实现，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

事件触发器从字面意思上可以很好的理解，就是用来触发事件的，但是有些没有用过的朋友可能就会迷惑了，事件不是通常都由用户在页面上的实际操作来触发的吗？这个观点不完全正确，因为有些事件必须由程序来实现，如自定义事件，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 );
 }
}