Javascript事件

事件绑定---因为一个元素一次最多只能触发一个事件，但是有时候才需要多个事件按顺序执行，因此就有了attachEvent和addEventListener函数。

实例1-----绑定事件

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>无标题文档</title>
 6 <script>
 7     window.onload=function(){
 8         var oBtn=document.getElementById('btn1');
 9         function a(){
10             alert('a');    
11         };
12         function b(){
13             alert('b');    
14         };
15         //IE11 函数执行的顺序是正确的
16         if(oBtn.attachEvent){
17             oBtn.attachEvent('onclick',a);    
18             oBtn.attachEvent('onclick',b);
19         }//Chrome,Firefox
20         else{
21             oBtn.addEventListener('click',a,false);    
22             oBtn.addEventListener('click',b,false);
23         }    
24     }
25 </script>
26 </head>
27 <body>
28 <input id="btn1" type="button" value="Event" />
29 </body>
30 </html>

实例2-----封装绑定函数

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>无标题文档</title>
 6 <script>
 7     //封装事件绑定函数
 8     function myEvent(obj,Event,fn){
 9         if(obj.attach){
10             obj.attachEvent('on'+Event,fn);    
11         }
12         else{
13             obj.addEventListener(Event,fn,false);    
14         }
15     }
16     window.onload=function(){
17         var oBtn=document.getElementById('btn1');
18         function a(){
19             alert('a');    
20         };
21         function b(){
22             alert('b');    
23         };
24         myEvent(oBtn,'click',a);
25         myEvent(oBtn,'click',b);
26     }
27 </script>
28 </head>
29 <body>
30 <input id="btn1" type="button" value="Event" />
31 </body>
32 </html>

实例3-----绑定函数和this的指向问题

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>无标题文档</title>
 6 <script>
 7     //封装事件绑定函数
 8     function myEvent(obj,Event,fn){
 9         if(obj.attach){
10             obj.attachEvent('on'+Event,fn);    
11         }
12         else{
13             obj.addEventListener(Event,fn,false);    
14         }
15     }
16     //IE78下this==window对象，而不是inputElement
17     window.onload=function(){
18         var oBtn=document.getElementById('btn1');
19         myEvent(oBtn,'click',function(){alert(this)});
20     }
21 </script>
22 </head>
23 <body>
24 <input id="btn1" type="button" value="Event" />
25 </body>
26 </html>

实例4-----解除绑定

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>无标题文档</title>
 6 <script>
 7     window.onload=function(){
 8         var oBtn=document.getElementById('btn1');
 9         //IE下解除绑定,匿名函数无法解除，每一个匿名函数都是new了一次function
10         oBtn.attachEvent('onclick',function(){alert('a');});
11         oBtn.detachEvent('onclick',function(){alert('a');});
12         
13         //chrome,firefox下解除绑定
14         //oBtn.addEventListener('click',function(){alert('a');},false);
15         //oBtn.removeEventListener('click',function(){alert('a');},false);
16     }
17 </script>
18 </head>
19 <body>
20 <input id="btn1" type="button" value="Event" />
21 </body>
22 </html>

实例5-1-----基本拖拽

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>无标题文档</title>
 6 <style>
 7     #div1{width:100px;height:100px;background:#009;position:absolute;}
 8 </style>
 9 <script>
10     window.onload=function(){
11         var oDiv=document.getElementById('div1');
12         oDiv.onmousedown=function(ev){
13                 var oEvent=ev||event;
14                 var disX=oEvent.clientX-oDiv.offsetLeft;
15                 var disY=oEvent.clientY-oDiv.offsetTop;
16                 
17                 document.onmousemove=function(ev){
18                     var oEvent=ev||event;
19                     oDiv.style.left=oEvent.clientX-disX+'px';
20                     oDiv.style.top=oEvent.clientY-disY+'px';    
21                 }
22                 document.onmouseup=function(){
23                     document.onmousemove=null;
24                     document.onmouseup=null;    
25                 }
26         }    
27     }
28 </script>
29 </head>
30 
31 <body>
32 <div id="div1"></div>
33 </body>
34 </html>

实例5-2-----封装拖拽函数

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>无标题文档</title>
 6 <style>
 7     #div1{width:100px;height:100px;background:#009;position:absolute;}
 8     #div2{width:100px;height:100px;background:#333;position:absolute;}
 9     #div3{width:100px;height:100px;background:#309;position:absolute;}
10 </style>
11 <script>
12     window.onload=function(){
13         pull('div1');    
14         pull('div2');    
15         pull('div3');    
16     };
17     
18     function pull(id){
19         var oDiv=document.getElementById(id);
20         oDiv.onmousedown=function(ev){
21                 var oEvent=ev||event;
22                 var disX=oEvent.clientX-oDiv.offsetLeft;
23                 var disY=oEvent.clientY-oDiv.offsetTop;
24                 
25                 document.onmousemove=function(ev){
26                     var oEvent=ev||event;
27                     oDiv.style.left=oEvent.clientX-disX+'px';
28                     oDiv.style.top=oEvent.clientY-disY+'px';    
29                 }
30                 document.onmouseup=function(){
31                     document.onmousemove=null;
32                     document.onmouseup=null;    
33                 }
34         }    
35     }
36 </script>
37 </head>
38 
39 <body>
40 <div id="div1"></div>
41 <div id="div2"></div>
42 <div id="div3"></div>
43 </body>
44 </html>

实例5-3-----限制范围的拖拽

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>无标题文档</title>
 6 <style>
 7     #div1{width:100px;height:100px;background:#009;position:absolute;}
 8 </style>
 9 <script>
10     window.onload=function(){
11         pull('div1');    
12     };
13     
14     function pull(id){
15         var oDiv=document.getElementById(id);
16         oDiv.onmousedown=function(ev){
17                 var oEvent=ev||event;
18                 var disX=oEvent.clientX-oDiv.offsetLeft;
19                 var disY=oEvent.clientY-oDiv.offsetTop;
20                 
21                 document.onmousemove=function(ev){
22                     var oEvent=ev||event;
23                     var l=oEvent.clientX-disX;
24                     var t=oEvent.clientY-disY;
25                     if(l<50){
26                        l=0;    
27                     }
28                     else if(l>document.documentElement.clientWidth-oDiv.offsetWidth-50){
29                         l=document.documentElement.clientWidth-oDiv.offsetWidth;    
30                     }
31                     if(t<50){
32                         t=0;
33                     }
34                     else if(t>document.documentElement.clientHeight-oDiv.offsetHeight-50){
35                         t=document.documentElement.clientHeight-oDiv.offsetHeight;
36                     }
37                     oDiv.style.left=l+'px';
38                     oDiv.style.top=t+'px';    
39                 }
40                 document.onmouseup=function(){
41                     document.onmousemove=null;
42                     document.onmouseup=null;    
43                 }
44         }    
45     }
46 </script>
47 </head>
48 
49 <body>
50 <div id="div1"></div>
51 </body>
52 </html>

实例6-----为某一个元素设置捕获setCapture(),仅在IE下有效果，不过win8.1下好像没有作用。

 1 <html>
 2 <head>
 3     <title></title>
 4     <script type="text/javascript">
 5     window.onload=function(){
 6         var oBtn=document.getElementById('btn1');
 7         oBtn.onclick=function(){
 8             alert('aaa');
 9         };
10         //IE捕获事件+释放事件
11         oBtn.setCapture();
12         //oBtn.releaseCapture();
13     };
14     </script>
15 </head>
16 <body>
17     <input id="btn1" type="button" value="setcapture" />
18 </body>
19 </html>

实例7-1-----碰撞检测

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>无标题文档</title>
 6 <style>
 7     #div1{width:100px;height:100px;background:#009;position:absolute;z-index:2;}
 8     #div2{width:100px;height:100px;background:yellow;position:absolute;top:222px;left:99px;z-index:1;}
 9 </style>
10 <script>
11     window.onload=function(){
12         var oDiv=document.getElementById('div1');
13         var oDiv2=document.getElementById('div2');
14         oDiv.onmousedown=function(ev){
15                 var oEvent=ev||event;
16                 var disX=oEvent.clientX-oDiv.offsetLeft;
17                 var disY=oEvent.clientY-oDiv.offsetTop;
18                 
19                 document.onmousemove=function(ev){
20                     var oEvent=ev||event;
21                     oDiv.style.left=oEvent.clientX-disX+'px';
22                     oDiv.style.top=oEvent.clientY-disY+'px';    
23 
24                     var l1=oDiv.offsetLeft;
25                     var r1=oDiv.offsetLeft+oDiv.offsetWidth;
26                     var t1=oDiv.offsetTop;
27                     var b1=oDiv.offsetTop+oDiv.offsetHeight;
28                     var l2=oDiv2.offsetLeft;
29                     var r2=oDiv2.offsetLeft+oDiv2.offsetWidth;
30                     var t2=oDiv2.offsetTop;
31                     var b2=oDiv2.offsetTop+oDiv2.offsetHeight;
32 
33                     if(r1<l2 || l1>r2 || b1<t2 || t1>b2)
34                     {
35                         oDiv2.style.background='yellow';
36                     }
37                     else
38                     {
39                         oDiv2.style.background='green';
40                     }
41                 }
42                 document.onmouseup=function(){
43                     document.onmousemove=null;
44                     document.onmouseup=null;    
45                 }
46         }    
47     }
48 </script>
49 </head>
50 
51 <body>
52 <div id="div1"></div>
53 <div id="div2"></div>
54 </body>
55 </html>

实例7-2-----碰撞检测2

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>无标题文档</title>
 6 <style>
 7     #div1{width:100px;height:100px;background:#009;position:absolute;}
 8     .new{border:1px dashed #333;position:absolute;}
 9 </style>
10 <script>
11     window.onload=function(){
12         var oDiv=document.getElementById('div1');
13         
14         oDiv.onmousedown=function(ev){
15                 var oEvent=ev||event;
16                 var disX=oEvent.clientX-oDiv.offsetLeft;
17                 var disY=oEvent.clientY-oDiv.offsetTop;
18 
19                 var newDiv=document.createElement('div');
20                 newDiv.className='new';
21                 //减去2px的边框
22                 newDiv.style.width=oDiv.offsetWidth-2+'px';
23                 newDiv.style.height=oDiv.offsetHeight-2+'px';
24                 newDiv.style.left=oDiv.offsetLeft+'px';
25                 newDiv.style.top=oDiv.offsetTop+'px';
26 
27                 document.body.appendChild(newDiv);
28                 
29                 document.onmousemove=function(ev){
30                     var oEvent=ev||event;
31                     newDiv.style.left=oEvent.clientX-disX+'px';
32                     newDiv.style.top=oEvent.clientY-disY+'px';    
33                 }
34                 
35                 document.onmouseup=function(){
36                     document.onmousemove=null;
37                     document.onmouseup=null;
38 
39                     oDiv.style.left=newDiv.offsetLeft+'px';
40                     oDiv.style.top=newDiv.offsetTop+'px';
41 
42                     document.body.removeChild(newDiv);    
43                 }
44         }    
45     }
46 </script>
47 </head>
48 
49 <body>
50 <div id="div1"></div>
51 </body>
52 </html>

实例8-----拖拽改变父级元素的大小

cursor的种类---VIEW在线演示

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>无标题文档</title>
 6 <style>
 7     #div1{width:100px;height:100px;background:#009;position:relative;}
 8     #div2{width:10px;height:10px;background:red;position:absolute;right:0;bottom: 0;cursor:nw-resize;}
 9 </style>
10 <script>
11     //http://www.w3school.com.cn/tiy/t.asp?f=csse_cursor
12     window.onload=function(){
13         var oDiv=document.getElementById('div1');
14         var oDiv2=document.getElementById('div2');
15         oDiv.onmousedown=function(ev){
16                 var oEvent=ev||event;
17                 var disX=oEvent.clientX-oDiv2.offsetLeft;
18                 var disY=oEvent.clientY-oDiv2.offsetTop;
19                 
20                 document.onmousemove=function(ev){
21                     var oEvent=ev||event;
22                     //加上子div的宽度和高度
23                     oDiv.style.width=oEvent.clientX-disX+oDiv2.offsetWidth+'px';
24                     oDiv.style.height=oEvent.clientY-disY+oDiv2.offsetHeight+'px';    
25                 }
26                 document.onmouseup=function(){
27                     document.onmousemove=null;
28                     document.onmouseup=null;    
29                 }
30         }    
31     }
32 </script>
33 </head>
34 
35 <body>
36 <div id="div1">
37     <div id="div2"></div>
38 </div>
39 </body>
40 </html>

实例9-----阻止鼠标右键行为

 1 <html>
 2 <head>
 3     <title></title>
 4     <script type="text/javascript">
 5     //IE,Chrome
 6         document.oncontextmenu=function(){
 7             return false;
 8         }
 9     //绑定事件必须用preventDefault()    
10         document.addEventListener('contextmenu',function(ev){
11             var oEvent=ev||event;
12             oEvent.preventDefault();
13         },false);
14     </script>
15 </head>
16 <body>
17 
18 </body>
19 </html>

实例10-1-----拖拽的滚动条

 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 #parent {width:400px; height:20px; background:#CCC; position:relative; margin:20px auto;}
 6 #div1 {width:20px; height:20px; background:red; cursor:pointer; position:absolute;}
 7 #div2{width:300px;height:400px;border:1px solid #000;position:relative;top:40px;left:500px;overflow:hidden;}
 8 #div3{position:absolute;}
 9 </style>
10 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
11 <title>无标题文档</title>
12 <script>
13 window.onload=function ()
14 {
15     var oDiv=document.getElementById('div1');
16     var oParent=document.getElementById('parent');
17     var oDiv2=document.getElementById('div2');
18     var oDiv3=document.getElementById('div3');
19     
20     oDiv.onmousedown=function (ev)
21     {
22         var oEvent=ev||event;
23         var disX=oEvent.clientX-oDiv.offsetLeft;
24         
25         document.onmousemove=function (ev)
26         {
27             var oEvent=ev||event;
28             var l=oEvent.clientX-disX;
29             if(l<0)
30             {
31                 l=0;
32             }
33             else if(l>oParent.offsetWidth-oDiv.offsetWidth)
34             {
35                 l=oParent.offsetWidth-oDiv.offsetWidth;
36             }
37             
38             var scale=l/(oParent.offsetWidth-oDiv.offsetWidth);
39             document.title=scale;
40             oDiv3.style.top=-(oDiv3.offsetHeight-oDiv2.offsetHeight)*scale+'px';
41             oDiv.style.left=l+'px';
42         };
43         
44         document.onmouseup=function ()
45         {
46             document.onmousemove=null;
47             document.onmouseup=null;
48         };
49     };
50 };
51 </script>
52 </head>
53 
54 <body>
55 <div id="parent">
56     <div id="div1">
57     </div>
58 </div>
59 <div id="div2">
60     <div id="div3">
61         摘要: 寒假就读了两本书籍，保罗.格雷厄姆的《黑客与画家》从他的创业经历讲述了自己的很多经验以及建议，也有一些新颖思想观点。这本书一共有15章节，也就是15个观点，每一个观点都是基于实践经验。书呆子为什么不受欢迎。-----他们把心思放在了自己感兴趣的地方，没有放在去讨好别人的地方，在以后的某个时刻会激发他们的潜能。黑客与画家。--------------黑客和画家从某种层度上讲有一种契合度，都是在创造属于自己的作品，只是工具和展现形式不一样。不能说的话。--------------在这个社会，有些话可以说，有些不能说，做一个能够适应社会的人。你可以说这个社会不好，但是你生活在这里。良好的坏习惯。
62         摘要: 寒假就读了两本书籍，保罗.格雷厄姆的《黑客与画家》从他的创业经历讲述了自己的很多经验以及建议，也有一些新颖思想观点。这本书一共有15章节，也就是15个观点，每一个观点都是基于实践经验。书呆子为什么不受欢迎。-----他们把心思放在了自己感兴趣的地方，没有放在去讨好别人的地方，在以后的某个时刻会激发他们的潜能。黑客与画家。--------------黑客和画家从某种层度上讲有一种契合度，都是在创造属于自己的作品，只是工具和展现形式不一样。不能说的话。--------------在这个社会，有些话可以说，有些不能说，做一个能够适应社会的人。你可以说这个社会不好，但是你生活在这里。良好的坏习惯。
63     </div>
64 </div>
65 </body>
66 </html>

实例10-2-----完整滚动条

普通事件：onclick、onmouseover等等
DOM事件：DOMMouseScroll    火狐浏览器特有

IE的滚动oEvent.wheelDelta-------------火狐的滚动oEvent.detail

  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 #parent {width:400px; height:20px; background:#CCC; position:relative; margin:20px auto;}
  6 #div1 {width:20px; height:20px; background:red; cursor:pointer; position:absolute;}
  7 #div2 {width:200px; height:300px; border:1px solid black; position:relative; overflow:hidden;}
  8 #div3 {position:absolute;}
  9 </style>
 10 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 11 <title>无标题文档</title>
 12 <script>
 13 //绑定函数
 14 function myAddEvent(obj, sEvent, fn)
 15 {
 16     if(obj.attachEvent)
 17     {
 18         obj.attachEvent('on'+sEvent, fn);
 19     }
 20     else
 21     {
 22         obj.addEventListener(sEvent, fn, false);
 23     }
 24 }
 25 
 26 window.onload=function ()
 27 {
 28     var oDiv=document.getElementById('div1');
 29     var oParent=document.getElementById('parent');
 30     var oDiv2=document.getElementById('div2');
 31     var oDiv3=document.getElementById('div3');
 32     
 33     function onMouseWheel(ev)
 34     {
 35         var oEvent=ev||event;
 36         var bDown=true;
 37         //兼容浏览器，获取向上或向下
 38         bDown=oEvent.wheelDelta?oEvent.wheelDelta<0:oEvent.detail>0;
 39         
 40         if(bDown)
 41         {
 42             setLeft(oDiv.offsetLeft+10);
 43         }
 44         else
 45         {
 46             setLeft(oDiv.offsetLeft-10);
 47         }
 48         
 49         if(oEvent.preventDefault)
 50         {
 51             oEvent.preventDefault();
 52         }
 53         
 54         return false;
 55     }
 56     //让oParent和oDiv2都有滚动事件
 57     myAddEvent(oParent, 'mousewheel', onMouseWheel);
 58     myAddEvent(oParent, 'DOMMouseScroll', onMouseWheel);
 59     myAddEvent(oDiv2, 'mousewheel', onMouseWheel);
 60     myAddEvent(oDiv2, 'DOMMouseScroll', onMouseWheel);
 61     
 62     oDiv.onmousedown=function (ev)
 63     {
 64         var oEvent=ev||event;
 65         var disX=oEvent.clientX-oDiv.offsetLeft;
 66         
 67         document.onmousemove=function (ev)
 68         {
 69             var oEvent=ev||event;
 70             var l=oEvent.clientX-disX;
 71             
 72             setLeft(l);
 73         };
 74         
 75         document.onmouseup=function ()
 76         {
 77             document.onmousemove=null;
 78             document.onmouseup=null;
 79         };
 80     };
 81     //设置left值
 82     function setLeft(l)
 83     {
 84         if(l<0)
 85         {
 86             l=0;
 87         }
 88         else if(l>oParent.offsetWidth-oDiv.offsetWidth)
 89         {
 90             l=oParent.offsetWidth-oDiv.offsetWidth;
 91         }
 92         
 93         oDiv.style.left=l+'px';
 94         var scale=l/(oParent.offsetWidth-oDiv.offsetWidth);
 95         
 96         oDiv3.style.top=-(oDiv3.offsetHeight-oDiv2.offsetHeight)*scale+'px';
 97         
 98         document.title=scale;
 99     }
100 };
101 </script>
102 </head>
103 
104 <body>
105 <div id="parent">
106     <div id="div1">
107     </div>
108 </div>
109 <div id="div2">
110     <div id="div3">
111         该方法将通知 Web 浏览器不要执行与事件关联的默认动作（如果存在这样的动作）。例如，如果 type 属性是 "submit"，在事件传播的任意阶段可以调用任意的事件句柄，通过调用该方法，可以阻止提交表单。注意，如果 Event 对象的 cancelable 属性是 fasle，那么就没有默认动作，或者不能阻止默认动作。无论哪种情况，调用该方法都没有作用。
112         该方法将通知 Web 浏览器不要执行与事件关联的默认动作（如果存在这样的动作）。例如，如果 type 属性是 "submit"，在事件传播的任意阶段可以调用任意的事件句柄，通过调用该方法，可以阻止提交表单。注意，如果 Event 对象的 cancelable 属性是 fasle，那么就没有默认动作，或者不能阻止默认动作。无论哪种情况，调用该方法都没有作用。
113         该方法将通知 Web 浏览器不要执行与事件关联的默认动作（如果存在这样的动作）。例如，如果 type 属性是 "submit"，在事件传播的任意阶段可以调用任意的事件句柄，通过调用该方法，可以阻止提交表单。注意，如果 Event 对象的 cancelable 属性是 fasle，那么就没有默认动作，或者不能阻止默认动作。无论哪种情况，调用该方法都没有作用。
114     </div>
115 </div>
116 </body>
117 </html>

 事件队列是怎么回事？

posted @ 2014-02-06 16:58  Paxster  阅读(226)  评论(0)  编辑  收藏  举报