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手册中有介绍。毕竟这个功能不是很重要，暂时也没做过多的深究。
相关文章
这篇文章主要介绍了JS如何在数组指定位置插入元素,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-03-03
本章将通过实例讲解如何使用 Bootstrap 按钮。任何带有 class .btn 的元素都会继承圆角灰色按钮的默认外观。但是 Bootstrap 提供了一些选项来定义按钮的样式。具体通过本文实例详解2017-03-03
js中find、findIndex、indexOf的用法和区别
本文主要介绍了js中find、findIndex、indexOf的用法和区别，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-07-07
使用javascript来写复制到剪贴板的代码，一般都是浏览器不兼容的。所以采用flash的方式，模拟一个层，再来复制，就可以做到全部浏览器都适用，具体实现如下，感兴趣的朋友可以参考下哈2013-05-05
本篇主要讲解本地对象Array和Date的各种方法。2010-05-05
这篇文章主要介绍了javascript 判断用户有没有操作页面的相关资料,希望通过本文能帮助到大家，需要的朋友可以参考下2017-10-10
本文主要介绍了一款比较强大的web打印工具lodop实现将winform客户端的打印，移到网页上由客户自行打印，打印要求是根据一定的格式实现套打的过程与方法。具有一定的参考价值，下面跟着小编一起来看下吧2017-01-01
这篇文章主要为大家详细介绍了微信小程序自定义Dialog弹框，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
这篇文章主要为大家详细介绍了支付宝小程序重写tabbar底部导航，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-11-11
JavaScript中iframe实现局部刷新的几种方法汇总
Iframe是一种嵌入网页的框架形式，Web页面可以通过更改嵌入的部分，达到部分内容刷新，通过本文和大家一起学习iframe实现局部刷新的几种方法汇总，对iframe局部刷新相关知识感兴趣的朋友一起学习吧2016-01-01
最新评论