这篇文章主要介绍了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 );
 }
}


模拟的原理并不难,给某元素绑定一个事件处理函数,如果有触发事件的实际操作就会执行相应的事件处理函数,所以要达到事件触发器的功能只要获取到相应的事件处理函数然后执行就差不多了,这是最基本的。

在实际的事件发生时浏览器会生成一个event对象,里面包含了一些事件发生时的属性和信息。如果没有实际的事件发生是没有这个event对象的,所以上面的代码也创建了一个event对象最基本的功能。

还有事件冒泡,如果没有实际的事件发生,自然也不会有冒泡的行为,那么如果要模拟冒泡的功能,就必须不断的查找父元素并检查是否绑定了相同类型的事件,直至到document和window为止,如果结构复杂,这种递归调用的方法性能估计会不怎么样。

最后是浏览器的默认行为,我觉得这个要去模拟相当麻烦,麻烦到不知如何去实现,比如a标签默认的跳转,我测试了jQuery的trigger,也没有实现,但是一些其他的行为貌似又在API手册中有介绍。毕竟这个功能不是很重要,暂时也没做过多的深究。

 

 

最新资讯
卡梅隆对话刘慈欣 三句话不离《三体》

卡梅隆对话刘慈欣 三

《流浪地球》出现之前,中国科幻影视作品的主流观众还是
故宫首晒账本:文创收入15亿 “卖个萌”就做到了

故宫首晒账本:文创收入

近年来,因为IP价值的充分挖掘和一系列文创产品的推出,故
医美App新氧据悉提交美国IPO申请 拟筹资3亿美元

医美App新氧据悉提交

据彭博,知情人士透露 ,腾讯参股的中国整形外科网站新氧
高瓴资本持仓被误读 四季度前五大重仓股4家是中概股

高瓴资本持仓被误读

2018年9月,正值资本寒冬之际,高瓴资本却逆市完成一只规
路透:映客CFO李劲辞职

路透:映客CFO李劲辞职

据路透社报道,映客首席财务官(CFO)李劲将辞职。
消息称爱屋吉屋停运 曾融资2.7亿美元 顺为资本参投

消息称爱屋吉屋停运

据网友爆料,爱屋吉屋官网、APP已经停止运营。三言财经
最新文章
微信小程序CSS3动画下拉菜单效果

微信小程序CSS3动画下

这篇文章主要为大家详细介绍了微信小程序CSS3动画下拉
微信小程序使用swiper组件实现层叠轮播图

微信小程序使用swiper

这篇文章主要为大家详细介绍了微信小程序使用swiper组
微信小程序实现带缩略图轮播效果

微信小程序实现带缩略

这篇文章主要为大家详细介绍了微信小程序实现带缩略图
小程序实现五星点评效果

小程序实现五星点评效

这篇文章主要为大家详细介绍了小程序实现五星点评效果
微信小程序实现笑脸评分功能

微信小程序实现笑脸评

这篇文章主要为大家详细介绍了微信小程序实现笑脸评分
微信小程序自定义轮播图

微信小程序自定义轮播

这篇文章主要为大家详细介绍了微信小程序自定义轮播图