一个特殊的事件绑定程序（通用于各种浏览器）

做前端，事件绑定是一个关键！全球比较有名的事件绑定程序也比较多，而且在网络广为流传。也不得不承认那些程序是写的不错。今天我自己也写了一个，就目前形式来看，它具有以下特点：

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前端开发