事件绑定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.删除事件时候,精确删除某个对象,某个类型,某个名称的函数。避免误删。

原文地址:https://www.cnblogs.com/liyu2012/p/5468547.html