事件绑定,常见的是odiv.onclick=function(){..........}; 这种方式绑定事件太单一,如果绑定多个,那么最后一个事件会覆盖掉之前的,也就是说只执行最后一次绑定的事件,这里要说的是addEventListener方法,和IE下的attachEvent方法:
html代码如下:
<html> <head> </head> <style> #box{ height:400px; 400px; background: red; } #son1{ height:300px; 300px; background: green; } #son2{ height:200px; 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下:
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:
oson2.addEventListener('click',function(){alert('first');},true); //先弹出 first oson2.addEventListener('click',function(){alert('second');},true); //后弹出 secondIE:
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');}一样不行。
结论:不管是匿名函数,还是函数声明都视为不同参数,不能成功取消绑定。解决方法就是先声明一个函数,两者传入共同的函数名即可:
先声明函数:
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);
以上就是事件绑定的内容,也是自己的一次回顾。