兼容各主流浏览器的事件绑定（在同一个事件上添加多个处理函数）。
1.绑定方法：
1 //IE attachEvent(事件名, 函数) 2 oBtn.attachEvent('onclick', aaa); 3 oBtn.attachEvent('onclick', bbb); 4 5 //FF addEventListener(事件名, 函数, 是否捕获 false) 6 oBtn.addEventListener('click', aaa, false); 7 oBtn.addEventListener('click', bbb, false);
2.例子：
1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 4 <title>无标题文档</title> 5 <script type="text/javascript"> 6 function aaa(){ 7 alert('a'); 8 } 9 10 function bbb(){ 11 alert('b'); 12 } 13 14 window.onload=function (){ 15 var oBtn=document.getElementById('btn1'); 16 17 /*oBtn.onclick=aaa; 18 oBtn.onclick=bbb; 覆盖掉aaa*/ 19 20 if(oBtn.attachEvent){ 21 oBtn.attachEvent('onclick', aaa); 22 oBtn.attachEvent('onclick', bbb); 23 } 24 else{ 25 oBtn.addEventListener('click', aaa, false); 26 oBtn.addEventListener('click', bbb, false); 27 } 28 }; 29 </script> 30 </head> 31 32 <body> 33 <input id="btn1" type="button" value="aaa" /> 34 </body> 35 </html>
3.如何用于写一个用于时间绑定的公共函数
例子：
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script type="text/javascript"> function bind(obj, evname, fn) { if (obj.addEventListener) { obj.addEventListener(evname, fn, false); } else { obj.attachEvent('on' + evname, function() { fn.call(obj); }); } } function aaa(){ alert('a'); } function bbb(){ alert('b'); } window.onload=function (){ var oBtn=document.getElementById('btn1'); bind(oBtn, 'click', aaa); bind(oBtn, 'click', bbb); }; </script> </head> <body> <input id="btn1" type="button" value="aaa" /> </body> </html>
4.解除绑定（以IE为例）：
1 <script type="text/javascript"> 2 window.onload=function () 3 { 4 var oBtn=document.getElementById('btn1'); 5 6 //IE attachEvent/detachEvent 7 //FF addEventListener/removeEventListener 8 var a=function (){ 9 alert('dafsdf'); 10 }; 11 12 oBtn.attachEvent('onclick', a); 13 oBtn.detachEvent('onclick', a); 14 }; 15 </script>
注意：匿名函数解除不掉绑定（因为即使两个匿名函数长的一样，但是不是同一个函数）