js实战之-鼠标事件 

 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>

 

posted @ 2013-07-12 16:53  梦飞无颜  阅读(171)  评论(0)  编辑  收藏  举报