做前端，事件绑定是一个关键！全球比较有名的事件绑定程序也比较多，而且在网络广为流传。也不得不承认那些程序是写的不错。今天我自己也写了一个，就目前形式来看，它具有以下特点：
1、同元素的同事件可以绑定多个函数。
2、解决了this的问题，也是说在绑定函数体内的this指向的是元素。
3、被绑定的那些函数总是按顺序执行的。
4、简单容易理解，完全无视addEventListener和attachEvent之类的东西。
5、在firefox、IE、opera、safari、chrome下工作良好
下面是代码：
function addEvent(obj, type, fn) {
var func = obj['on'+type] || function() {};
obj['on'+type] = function(event) {
event = event || window.event;
func.call(obj,event);
fn.call(obj,event);
}
}
不过用这种方式绑定的话，是不支持虑删除绑的。下面我的代码分析：
obj ：被操作的元素
type ：事件名称
fn ：绑定的函数
第一行：var func = obj['on'+type] || function() {};其功能是保存之前已绑定的事件。或是第1次绑定，则返回一个空函数。目的是方便下面的调用。
第二行：obj['on'+type] = function(event) {}：重新定义obj['on'+type]事件（在原事件的基础上再多执行一个fn函数，你肯定知道n += 3！！！！）
第三行：event = event || window.event ：不要解释吧（修复event，因为IE把事件对象放入了window.event之中）
第四行：func.call(obj, event)：先执行以前被绑定的函数（第1次绑定时，这里为一个空函数），使用call的方式来确保func内的this为元素。
第五行：fn.call(obj, event) ：再执行本次绑定的函数，同样使用call的方式来确保fn内的this为元素。
第四、五行就实现在原有的基础上再多执行一个函数，这样顺序肯定是保持绑定时的顺序的。
转载请注明：转载自web前端开发