事件绑定1

事件绑定有两种，传统事件绑定，现代事件绑定。传统事件绑定有内联模式和脚本模式。脚本模式即把一个函数体赋给一个对象的事件属性。

window.onload=function()
{
   var domb=document.getElementById('bd'); 
    domb.onclick=function(){
    alert('按钮点击');
};
};

传统事件绑定存在的问题:

1.同一个对象的事件属性多个函数赋值很多次，前面的会被覆盖掉，只显示最后一个。

解决方法，把第一个函数的事件保存下来，然后再去执行一次。

window.onload=function(){

                 alert('q');
                                      };

        if(typeof window.onload=='function')
        {
             var saved=null;
              saved=window.onload;
           }
     

     window.onload=function(){
                saved();
                 alert('s');
                                      }; 
                            

 

2.同一个事件类型下，不同事件的切换

    解决方法:  当执行了第一个事件后，把第二个事件在第一个事件函数中赋值给点击事件。

把添加事件封装在一个函数中去。并且一并解决上述问题。

//一个对象里面的键值对，也可以用数组形式访问，属性放在中括号里。一个事件函数，里面不应该再放同名的//事件函数。

function addEvent(obj,type,fn)
{
    var saveEvent=null;
    
    if(typeof obj['on'+type]=='function')
    saveEvent=obj['on'+type];
    obj['on'+type]=function(){
        if(saveEvent)
        saveEvent();
        fn.call(this);
    };
}

 

添加事件后必须移除，不然内存会溢出

//删除事件
function removeEvent(obj,type)
{
    if(obj['on'+type])
    obj['on'+type]=null;
    
}

存在的问题:

1.如何避免添加已经添加过的函数。需要遍历事件，重名不添加。

2.删除事件时候，精确删除某个对象，某个类型，某个名称的函数。避免误删。