1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <style> 5 #div1 {width:200px; height:200px; background:red;} 6 </style> 7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 8 <title>js-鼠标事件</title> 9 <script> 10 //普通事件：onclick、onmousedown 11 //DOM事件：DOMMouseScroll 12 13 //DOM事件只能通过绑定来添加 14 15 function myAddEvent(obj, sEvent, fn) 16 { 17 if(obj.attachEvent) 18 { 19 obj.attachEvent('on'+sEvent, fn); 20 } 21 else 22 { 23 obj.addEventListener(sEvent, fn, false); 24 } 25 } 26 27 window.onload=function () 28 { 29 var oDiv=document.getElementById('div1'); 30 31 function onMouseWheel(ev) 32 { 33 var oEvent=ev||event; 34 var bDown=true; 35 36 bDown=oEvent.wheelDelta?oEvent.wheelDelta<0:oEvent.detail>0; 37 38 if(bDown) 39 { 40 oDiv.style.height=oDiv.offsetHeight+10+'px'; 41 } 42 else 43 { 44 oDiv.style.height=oDiv.offsetHeight-10+'px'; 45 } 46 47 if(oEvent.preventDefault) 48 { 49 oEvent.preventDefault(); 50 } 51 52 return false; 53 } 54 55 myAddEvent(oDiv, 'mousewheel', onMouseWheel); 56 myAddEvent(oDiv, 'DOMMouseScroll', onMouseWheel); 57 }; 58 </script> 59 </head> 60 61 <body style="height:2000px;"> 62 <div id="div1"></div> 63 </body> 64 </html>