提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

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

JavaScript事件 实现 介绍 触发器
2023-06-13 09:15:27 时间

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

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

复制代码代码如下:


varfireEvent=function(element,event){
 if(document.createEventObject){
  //IE浏览器支持fireEvent方法
  varevt=document.createEventObject();
  returnelement.fireEvent("on"+event,evt)
 }
 else{
  //其他标准浏览器使用dispatchEvent方法
  varevt=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){
 vartype=event.type||event,
  //冒泡的父元素，一直到document、window
  parent=elem.parentNode||
   elem.ownerDocument||
   elem===elem.ownerDocument&&win,
  eventHandler=$.data(elem,type+"Handler");

 isStopPropagation=typeofdata==="boolean"?
  data:(isStopPropagation||false);

 data=data&&isArray(data)?data:[];

 //创建自定义的event对象  
 event=typeofevent==="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手册中有介绍。毕竟这个功能不是很重要，暂时也没做过多的深究。

 

 

相关文章