同時為同一事件新增繫結兩個屬性
阿新 • • 發佈：2018-12-19
同一事件可以同時觸發兩個屬性，如何實現呢？下面以點選事件為例，簡單介紹一下：
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 functiongiveRed(){ 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>