js事件绑定

时间 2019-11-19

原文原文链接

事件绑定，常见的是odiv.onclick=function(){..........}; 这种方式绑定事件太单一，若是绑定多个，那么最后一个事件会覆盖掉以前的，也就是说只执行最后一次绑定的事件，这里要说的是addEventListener方法，和IE下的attachEvent方法：html

html代码以下：浏览器

<html>
 <head>
 </head>
<style>
#box{
    height:400px;
    width:400px;
    background: red;
}
#son1{
    height:300px;
    width:300px;
    background: green;
}
#son2{
    height:200px;
    width:200px;
    background: purple;
}
 </style>
 <script>

</script>
 <body>
    <div id='box'>box
        <div id='son1'>son1
            <div id='son2'>son2

            </div>
        </div>
    </div>
      
 </body>
 </html>

界面以下图：

下面是<script>中的代码(非IE浏览器下addEventListener)：函数

 window.onload=function(){
    var obox=document.getElementById('box');
    var oson1=document.getElementById('son1');
    var oson2=document.getElementById('son2');

    oson2.addEventListener('click',function(){alert('son2 dinaji');})
    oson1.addEventListener('click',function(){alert('son1 dinaji');})
    obox.addEventListener('click',function(){alert('box dinaji');})
}

上述代码的addEventListener（）只有两个参数，其实还有第三个参数：true/false 。默认的是false，表明在冒泡阶段调用事件处理程序，true表明在事件捕获阶段处理程序，

生活中仍是以冒泡阶段处理为多。下面是IE下：code

 window.onload=function(){
    var obox=document.getElementById('box');
    var oson1=document.getElementById('son1');
    var oson2=document.getElementById('son2');

oson2.attachEvent('onclick',function(){alert('son2 dinaji');})
    oson1.attachEvent('onclick',function(){alert('son1 dinaji');})
    obox.attachEvent('onclick',function(){alert('box dinaji');})

}

IE下attachEvent()只有两个参数，没有第三个参数的true或false。由于IE默认的就只能是冒泡阶段捕获，这是当年浏览器大战的缘由，我的猜想，多是由于IE用户量多吧，致使如今默认的都是在冒泡阶段处理。
事件绑定最大的好处是能够绑定多个事件，对同一个元素对象上绑定的多个事件来讲，非IE下这些事件的处理顺序是符合代码绑定的前后顺序的，但在IE下对于多个事件绑定的处理顺序正好相反。如：

非IE：htm

oson2.addEventListener('click',function(){alert('first');},true);  //先弹出 first
oson2.addEventListener('click',function(){alert('second');},true); //后弹出 second

IE：

oson2.attachEvent('onclick',function(){alert('first');});      //后弹出first
oson2.attachEvent('onclick',function(){alert('second');}); //先弹出second

既然能绑定事件，确定能取消绑定事件，非IE下为removeEventListener(),IE 下为detachEvent() ，这里须要注意的是括号内的参数必须和事件绑定时的参数同样，但对于匿名函数来讲，哪怕函数同样也取消不了绑定，由于二者被认为是不一样的，以下代码就取消不了绑定：

oson2.addEventListener('click',function(){alert('first');}); 
oson2.removeEventListener('click',function(){alert('first');}) //取消绑定不成功

本人又用了函数声明式尝试一下发现也不行：对象

oson2.addEventListener('click',function test(){alert('first');});   
oson2.removeEventListener('click',function test(){alert('first');});

如上面两段代码所述把匿名函数function (){alert('first');} 改成function test(){alert('first');}同样不行。事件

结论：无论是匿名函数，仍是函数声明都视为不一样参数，不能成功取消绑定。

解决方法就是先声明一个函数，二者传入共同的函数名便可：

先声明函数：ip

var test=function(){alert('first');};

再把函数名当参数传入：

oson2.addEventListener('click',test);
oson2.removeEventListener('click',test); //成功取消绑定

以上代码是能成功的，但还要注意第三个参数也要一致，上述代码没有第三个参数则默认都是false，若是一个为true，那也不能取消成功：

oson2.addEventListener('click',t,true); //第三个参数为true表示 捕获时执行事件程序
oson2.removeEventListener('click',t);   //默认为false ，不一样的参数，不能取消绑定

二者都为true便可：

oson2.addEventListener('click',t,true);
oson2.removeEventListener('click',t,true);

下面是为解决浏览器兼容封装事件绑定：

function addEvent(element,event,fun){
    if(element.addEventListener)
    {
        element.addEventListener(event,fun);
    }
    else if(element.attachEvent)
    {
        element.attachEvent('on'+event,fun);//注意要加on
    }
}

下面是取消事件绑定的封装：

function removeEvent(element,event,fun){
    if(element.removeEventListener)
     {
        element.removeEventListener(event,fun);
     }
    else if(element.detachEvent)
    {
        element.detachEvent('on'+event,fun);//注意要加on
    }

}

封装后再使用事件绑定和取消绑定就方便不少：

var t=function(){alert(' box ');};
var t1=function(){alert(' son1 ');};
var t2=function(){alert(' son2 ');};

绑定：

addEvent(obox,'click',t);
addEvent(oson1,'click',t1);
addEvent(oson2,'click',t2);

取消绑定：

removeEvent(obox,'click',t);
removeEvent(oson1,'click',t1);
removeEvent(oson2,'click',t2);

以上就是事件绑定的内容，也是本身的一次回顾。