同时为同一事件添加绑定两个属性
同一事件可以同时触发两个属性，如何实现呢？下面以点击事件为例，简单介绍一下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 <style> 7 div{ 8 width:300px; 9 height:300px; 10 background:red; 11 } 12 </style> 13 </head> 14 <body> 15 <div>给你点颜色看看</div> 16 </body> 17 <script> 18 var adiv=document.getElementsByTagName('div')[0] 19 //直接设置两个事件属性会覆盖 20 //adiv.onclick=giveRed 21 //adiv.onclick=giveGreen 22 function giveRed(){ 23 alert("红色") 24 } 25 function giveGreen(){ 26 alert("绿色") 27 } 28 29 //事件绑定，给同一时间绑定多个事件 30 //事件对象.addEventListener('事件',函数,false) 31 //adiv.addEventListener('click',giveRed,false) 32 //adiv.addEventListener('click',giveGreen,false) 33 34 //移除事件绑定的样式 35 //事件对象.addEventListener('事件',函数,false) 36 //adiv.removeEventListener('click',giveRed,false) 37 38 //兼容绑定事件 39 function adda(obj,ev,func){ 40 //判断一下函数是否存在，即简介判断是否是高级浏览器 41 if(obj.addEventListener){ 42 obj.addEventListener(ev,func,false) 43 }else{ 44 obj.attachEvent('on'+ev,func) 45 } 46 } 47 48 //兼容取消绑定 49 function remove_add(obj,ev,func){ 50 //判断一下函数是否存在，即简介判断是否是高级浏览器 51 if(obj.removeEventListener){ 52 obj.removeEventListener(ev,func,false) 53 }else{ 54 obj.detatachEvent('on'+ev,func) 55 } 56 } 57 58 //调用兼容函数 59 adda(adiv,'click',giveRed) 60 adda(adiv,'click',giveGreen) 61 </script> 62 </html>
