【www.gdgbn.com--浏览器】

该事件绑定函数具有如下特点：

1、在事件函数中，this指向的是当前元素

2、每个事件其实是一个有序列，按顺序执行这个序列。

3、正确的传递了event对象。对于event对象在w3c标准与ie中的不同之处可以做出修复，本例修复了事件冒泡与阻止默认行为。

4、本机测试通过ie、firefox、chrome、opera、safari（可以说通用主流浏览器）

5、支持删除事件绑定

// ---------- 事件绑定与删除绑定 ---------- //
function bindevent(element, eventname, func) {
    var events = element["the"+eventname];    //用于保存某个事件序列
    if(!events) {  //如果不存在一个序列，则创建它，并加入html标记当中的onevent = function(){}形式的绑定
        events = element["the"+eventname] = [];
        if (element["on"+eventname]) { events.push(element["on"+eventname]); }
    }
   
    //检测是否为重复绑定
    for(var i=0; i         if(events[i] === func) { flag = true; break; }
    }
   
    // 非重复绑定，则加入该函数事件
    if(i >= events.length) { events.push(func); }
   
    // 重新定义这个事件的执行方式
    element["on"+eventname] = function(event) {
        event = event || (function() { //修复ie的事件对象
            var e = window.event;
            e.preventdefault = function() { e.returnvalue = false; }
            e.stoppropagation = function() { e.cancelbubble = true; }
            //根据需要继续修复
            return e;
        })();
        //顺序执行这些函数
        for(var i=0; i     }
}

// 删除事件绑定
function unbindevent(element, eventname, func) {
    var events = this["the"+eventname];
    //如果不存在一个事件序列
    if(!events) { return false; }
   
    //检测该函数是否存在该事件序列当中
    for(var i=0; i         if(func === events[i]) {
            [].splice.call(events, i, 1);
            return true;
        }
    }
   
    // 函数不存在该事件序列当中
    return false;
}

测试代码

<script type="text/网页特效" src="event.js"></script>
<script type="text/javascript">
bindevent(window, "load", function() {
    var ul = document.getelementbyid("test");
    var a = document.getelementbyid("baidu");
   
    bindevent(ul, "click", function(e){
        alert("我是" + this + "元素, 你点击了我!");
    });
   
   
    bindevent(a, "click", function(e) {
        alert("我是" + this + "，你点击了我！");
    });
   
});
</script>

 

hello,world!


 

hello,http://www.111cn.net" id="baidu">百度!


 
• afasdfsa
    sfk
   
• sdklfajsfjk
    end
   
• of
  
  
  
   
  1. 附加的第一项
      
  2. 附加的第二项
      
  3. 附加的第三项
     

上面代码测试可以通过现在主流的浏览器如有本机测试通过ie、firefox、chrome、opera、safari（可以说通用主流浏览器）

本文来源：http://www.gdgbn.com/bangongshuma/29791/