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 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 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 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 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 ></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 ></div>
41 <div ></div>
42 <div ></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 ></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 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 ></div>
53 <div ></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 ></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 >
37 <div ></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 >
56 <div >
57 </div>
58 </div>
59 <div >
60 <div >
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 >
106 <div >
107 </div>
108 </div>
109 <div >
110 <div >
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>事件队列是怎么回事？
- 上一篇 »JavaScript中事件处理机制
- 下一篇 »javaScript中的事件驱动