标签：
JS事件
1、js事件通常和函数结合来使用，这样可以通过发生的事件来驱动函数的执行，从而引起html出现不同的效果。
2、属性（当这些事件的属性发生改变时，会触发function{}的函数）：
1）onabort:当图像加载被中断时，会引发function内的函数。
2）onbur:当元素失去焦点；
3）onfocus:当元素获得焦点，获得焦点，就是文本框里面的内容修改
4）onclick:鼠标点击某个对象
5）ondbclick:鼠标双击某个对象
6）onerror:当加载文档或图像时发生某个错误
7）onchange:当用户改变域的内容（onchange事件常结合对输入的字段验证来使用，常用语表单验证身份证、邮箱注册及登录、区号等等的格式是否正确）
8）onkeydown:某个键盘的键被按下
9）onkeypress:某个键盘的键被按下或按住
10）onkeyup:某个键盘的键被松开
11）onload:某个页面或图像被完成加载
12）onmousedown:某个鼠标按键被按下（onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。）
13）onmousemove:鼠标被移动
14）onmouseout:鼠标从某元素移开
15）onmouseover:鼠标被移动到某元素之上
16）onmouseup:某个鼠标按钮被松开（区别onkeyup）
17）onreset:重置按钮被点击
18）onresize:窗口或框架被调整尺寸
19）onselect:文本被选定
20）onsubmit:提交按钮被点击
21）onunload:用户退出页面
二、事件传输（注意与c#的参数传递区别）
1、整型参数：直接写在括号里
eg.
<body> <div class="t1" onclick="a(0)"></div> //a(0) <div class="t1" onclick="a(1)"></div> </body> <script type="text/javascript"> var t=new Array(); t[0]="url(05.gif)"; t[1]="url(06.gif)"; function a(m) { n.style.backgroundImage=t[m]; if(m==8) { alert("你失败了！"); } } </script>
2.字符串 参数，双引号嵌套，里面要用单引号（不只是在传参的时候）
eg.
<body> <div class="t1" onclick="a(‘abc‘)"></div> <body/> <script type="text/javascript"> function a(n) { alert(n); } </script> 输出结果： abc
3.传自身元素：参数写this，this代表该元素(this是JavaScript中功能最强大的关键字之一。)(形参的传递不止一个)
eg.扫雷游戏
1 <body> 2 //方式一利用this调用自身 3 <div id="d1"> 4 <div class="t1" onclick="a(this,0)"></div> 5 <div class="t1" onclick="a(this,1)"></div> 6 <div class="t1" onclick="a(this,2)"></div> 7 <div class="t1" onclick="a(this,3)"></div> 8 <div class="t1" onclick="a(this,4)"></div> 9 <div class="t1" onclick="a(this,5)"></div> 10 <div class="t1" onclick="a(this,6)"></div> 11 <div class="t1" onclick="a(this,7)"></div> 12 <div class="t1" onclick="a(this,8)"></div> 13 <div class="t1" onclick="a(this,9)"></div> 14 <div class="t1" onclick="a(this,10)"></div> 15 <div class="t1" onclick="a(this,11)"></div> 16 <div class="t1" onclick="a(this,12)"></div> 17 <div class="t1" onclick="a(this,13)"></div> 18 <div class="t1" onclick="a(this,14)"></div> 19 <div class="t1" onclick="a(this,15)"></div> 20 <div class="t1" onclick="a(this,16)"></div> 21 <div class="t1" onclick="a(this,17)"></div> 22 <div class="t1" onclick="a(this,18)"></div> 23 <div class="t1" onclick="a(this,19)"></div> 24 </div> 25 26 </body> 27 28 <script type="text/javascript"> 29 30 var t=new Array();//数组 31 t[0]="url(05.gif)";t[1]="url(06.gif)";t[2]="url(07.gif)";t[3]="url(08.gif)";t[4]="url(09.gif)"; 32 t[5]="url(15.gif)";t[6]="url(16.gif)";t[7]="url(17.gif)";t[8]="url(18.gif)";t[9]="url(19.gif)"; 33 t[10]="url(25.gif)";t[11]="url(26.gif)";t[12]="url(27.gif)";t[13]="url(28.gif)";t[14]="url(29.gif)"; 34 t[15]="url(35.gif)";t[16]="url(36.gif)";t[17]="url(37.gif)";t[18]="url(38.gif)";t[19]="url(39.gif)"; 35 36 37 function a(n,m) 38 { 39 /*var s=new Array(); 40 s=document.getElementsByClassName("t1");*/ 41 n.style.backgroundImage=t[m]; 42 if(m==8) 43 { 44 alert("你失败了！"); 45 } 46 } 47 48 </script> 49 50 方式二 利用document.getElementsByClassName（）返回数组特性 51 利用class数组 52 <div id="d1"> 53 <div class="t1" onclick="a(0)"></div> 54 <div class="t1" onclick="a(1)"></div> 55 <div class="t1" onclick="a(2)"></div> 56 <div class="t1" onclick="a(3)"></div> 57 <div class="t1" onclick="a(4)"></div> 58 <div class="t1" onclick="a(5)"></div> 59 <div class="t1" onclick="a(6)"></div> 60 <div class="t1" onclick="a(7)"></div> 61 <div class="t1" onclick="a(8)"></div> 62 <div class="t1" onclick="a(9)"></div> 63 <div class="t1" onclick="a(10)"></div> 64 <div class="t1" onclick="a(11)"></div> 65 <div class="t1" onclick="a(12)"></div> 66 <div class="t1" onclick="a(13)"></div> 67 <div class="t1" onclick="a(14)"></div> 68 <div class="t1" onclick="a(15)"></div> 69 <div class="t1" onclick="a(16)"></div> 70 <div class="t1" onclick="a(17)"></div> 71 <div class="t1" onclick="a(18)"></div> 72 <div class="t1" onclick="a(19)"></div> 73 </div> 74 75 </body> 76 77 <script type="text/javascript"> 78 79 var t=new Array();//数组 80 t[0]="url(05.gif)";t[1]="url(06.gif)";t[2]="url(07.gif)";t[3]="url(08.gif)";t[4]="url(09.gif)"; 81 t[5]="url(15.gif)";t[6]="url(16.gif)";t[7]="url(17.gif)";t[8]="url(18.gif)";t[9]="url(19.gif)"; 82 t[10]="url(25.gif)";t[11]="url(26.gif)";t[12]="url(27.gif)";t[13]="url(28.gif)";t[14]="url(29.gif)"; 83 t[15]="url(35.gif)";t[16]="url(36.gif)";t[17]="url(37.gif)";t[18]="url(38.gif)";t[19]="url(39.gif)"; 84 85 86 function a(m) 87 { 88 var s=new Array(); 89 s=document.getElementsByClassName("t1"); 90 s[m].style.backgroundImage=t[m]; 91 if(m==8) 92 { 93 alert("你失败了！"); 94 } 95 } 96 97 </script>
三、练习题部分
eg1.图片轮播
（注意
window.setInterval("a()",1000);与window.setTimeout("a()",1000);应用时，一定要注意放的位置。先执行延时再执行代码（如果放在这两句后面的代码就不会执行了）
）
<div id="d" style="background-image:url(328477.jpg)"></div> <input type="button" value="按钮" onclick="b()"/> <input type="button" value="暂停" onclick="c()"/> </body> <script type="text/javascript"> var t= new Array(); t[0]="url(328477.jpg)"; t[1]="url(330527.jpg)"; t[2]="url(343107.jpg)"; var n=0; function a() { if(n==2) { n=0; } else { n++; } document.getElementById("d").style.backgroundImage=t[n];//用 /*window.setTimeout("a()",1000);*/ } /*window.setTimeout("a()",1000);*/ var r= new Array(); function b() { r[0]=window.setInterval("a()",1000);//用数组存储，因为不清楚window.setInterval("a()",1000)类型 } function c() { window.clearInterval(r[0]); } </script>
eg2、广告弹窗
方法一：比较简便 <body> <img src="1-2.jpg"/> <img src="1-2.jpg"/> <img src="1-2.jpg"/> <div id="gg" style="display:none"></div> </body> <script type="text/javascript"> function showg() { document.getElementById("gg").style.display="block"; window.setTimeout("hideg()",5000); } function hideg() { document.getElementById("gg").style.display="none"; } window.setTimeout("showg()",5000); </script> 方式二 （自己做的） <div id="d1"></div> <div id="d2" style="display:none"></div> </body> <script type="text/javascript"> var n=9; function a() { n--; if(n>=0) { window.setTimeout("a()",1000); if(n==5) { document.getElementById("d2").style.display="block"; } if(n==0) { document.getElementById("d2").style.display="none"; } } } window.setTimeout("a()",1000); </script>
eg3.关灯效果
1 <style type="text/css"> 2 #gd 3 { 4 width:100%; 5 height:100%; 6 background-color:#333; 7 filter:alpha(opacity=50);-moz-opacity:0.5;opacity: 0.5; 8 position:fixed; 9 top:0px; 10 left:0px; 11 z-index:1; 12 } 13 </style> 14 </head> 15 16 <body> 17 <div style="z-index:2; height:30px; position:absolute;"><input type="button" value="开关灯" onclick="deng()" /></div> 18 <img src="1-2.jpg"/> 19 <img src="1-2.jpg"/> 20 <img src="1-2.jpg"/> 21 <div id="gd" style="display:none"></div> 22 </body> 23 <script type="text/javascript"> 24 function deng() 25 { 26 //alert("ss"); 27 var s = document.getElementById("gd").style.display; 28 if(s=="block") 29 { 30 document.getElementById("gd").style.display="none"; 31 } 32 else 33 { 34 document.getElementById("gd").style.display="block"; 35 } 36 } 37 </script>
eg4、光棒效果
<body> <table width="600" border="1" cellpadding="0" cellspacing="0"> <tr onmouseover="showcolor(this)" onmouseout="huifu(this)" style="background-color:#3F0"> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr onmouseover="showcolor(this)" onmouseout="huifu(this)" style="background-color:#3F0"> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr onmouseover="showcolor(this)" onmouseout="huifu(this)" style="background-color:#3F0"> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr onmouseover="showcolor(this)" onmouseout="huifu(this)" style="background-color:#3F0"> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr onmouseover="showcolor(this)" onmouseout="huifu(this)" style="background-color:#3F0"> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </table> <select> <option>11</option> <option>11</option> <option>11</option> </select> </body> <script type="text/javascript"> function showcolor(a) { a.style.backgroundColor="white"; } function huifu(b) { b.style.backgroundColor="#3F0"; } </script>
事件冒泡：
当元素嵌套的时候，内部元素激发某个事件后，默认情况下外部元素相应的也会触发。
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 2 <HTML> 3 <HEAD> 4 <TITLE> New Document </TITLE> 5 <META NAME="Generator" CONTENT="EditPlus"> 6 <META NAME="Author" CONTENT=""> 7 <META NAME="Keywords" CONTENT=""> 8 <META NAME="Description" CONTENT=""> 9 </HEAD> 10 11 <BODY> 12 <div onclick="test()"> 13 <div onclick="test()"> 14 <div onclick="test()">阻止事件冒泡</div> 15 </div> 16 </div> 17 </BODY> 18 </HTML> 19 <SCRIPT LANGUAGE="JavaScript"> 20 <!-- 21 //阻止事件冒泡 22 function stopEventBubble(event){ 23 var e=event || window.event; 24 25 if (e && e.stopPropagation){ 26 e.stopPropagation(); 27 } 28 else{ 29 e.cancelBubble=true; 30 } 31 } 32 33 //测试方法，调用时，直接调用test()或者test(event)，前者默认在调用最后一个未对应的参数传递事件 34 function test(evt){ 35 alert(‘hahaha‘); 36 stopEventBubble(evt); 37 } 38 //--> 39 </SCRIPT>
eg.5做一个漂亮的下拉菜单选择框
1 <style type="text/css"> 2 *{margin:0px auto; 3 padding:0px;} 4 .m 5 { 6 width:200px; 7 height:30px; 8 background-color:#339; 9 color:white; 10 font-weight:bold; 11 text-align:center; 12 line-height:30px; 13 vertical-align:middle; 14 } 15 #txt 16 { 17 font-size:14px; 18 text-align:center; 19 } 20 </style> 21 </head> 22 23 <body> 24 <div style="width:100%; height:600px;" onclick="hidemenu()"> 25 <div style="width:200px"> 26 <input id="txt" type="text" value="" style="width:196px; height:28px;" onclick="showmenu()" /> 27 <div id="menu" style="display:none"> 28 <div class="m" onmouseover="change(this)" onclick="selectme(this)">家电</div> 29 <div class="m" onmouseover="change(this)" onclick="selectme(this)">服装</div> 30 <div class="m" onmouseover="change(this)" onclick="selectme(this)">数码</div> 31 <div class="m" onmouseover="change(this)" onclick="selectme(this)">食品</div> 32 <div class="m" onmouseover="change(this)" onclick="selectme(this)">玩具</div> 33 </div> 34 </div> 35 </div> 36 </body> 37 <script type="text/javascript"> 38 39 //第1步、如何显示下拉列表 40 function showmenu() 41 { 42 var d = document.getElementById("menu"); 43 d.style.display="block"; 44 stopEventBubble(event);//由于受外层div嵌套影响，加上阻止事件冒泡 45 } 46 47 //第2步、如何隐藏下拉列表 48 function hidemenu() 49 { 50 var d = document.getElementById("menu"); 51 d.style.display="none"; 52 } 53 54 //第3步、下拉菜单的变色效果 55 function change(a) 56 { 57 huifu();//让他恢复默认的颜色效果，目的只让this本身变色 58 a.style.backgroundColor="#60F"; 59 } 60 //恢复默认 下拉菜单的原本 背景颜色 61 function huifu() 62 { 63 var s = document.getElementsByClassName("m"); 64 for(var i=0; i<s.length;i++) 65 { 66 s[i].style.backgroundColor="#339"; 67 } 68 } 69 70 71 //第4步、点击下拉列表，改变输入框中的value 72 function selectme(a) 73 { 74 document.getElementById("txt").value=a.innerText; 75 } 76 77 78 //阻止事件冒泡函数 79 function stopEventBubble(event){ 80 var e=event || window.event; 81 82 if (e && e.stopPropagation){ 83 e.stopPropagation(); 84 } 85 else{ 86 e.cancelBubble=true; 87 } 88 } 89 </script> 90 </html>
eg6、”踩雷游戏“
1 <style type="text/css"> 2 .d 3 { 4 width:200px; 5 height:200px; 6 float:left; 7 background-color:#039; 8 border:1px solid white; 9 } 10 </style> 11 </head> 12 13 <body> 14 <div id="wai"> 15 16 </div> 17 </body> 18 <script type="text/javascript"> 19 var img = new Array(); 20 img[0]="url(../../WorkTools/%E5%9B%BE%E6%A0%87/20150125090904182_easyicon_net_256.png)"; 21 img[1]="url(../../WorkTools/%E5%9B%BE%E6%A0%87/20150125090904182_easyicon_net_256.png)"; 22 img[2]="url(../../WorkTools/%E5%9B%BE%E6%A0%87/20150125090904182_easyicon_net_256.png)"; 23 img[3]="url(../../WorkTools/%E5%9B%BE%E6%A0%87/20150125090904182_easyicon_net_256.png)"; 24 img[4]="url(../../WorkTools/%E5%9B%BE%E6%A0%87/20150125090904182_easyicon_net_256.png)"; 25 img[5]="url(../../WorkTools/%E5%9B%BE%E6%A0%87/20150125090904182_easyicon_net_256.png)"; 26 img[6]="url(../../WorkTools/%E5%9B%BE%E6%A0%87/20150125090904182_easyicon_net_256.png)"; 27 img[7]="url(../../WorkTools/%E5%9B%BE%E6%A0%87/20150125090904182_easyicon_net_256.png)"; 28 img[8]="url(../../WorkTools/%E5%9B%BE%E6%A0%87/20150125090904182_easyicon_net_256.png)"; 29 jiazai(); 30 31 //利用函数进行div的布局，简单 32 function jiazai() 33 { 34 var s = ""; 35 for(var i=0;i<9;i++) 36 { 37 if(i==2 || i==5) 38 { 39 s=s+" <div class=‘d‘ onclick=‘showimg(this,"+i+")‘></div><div style=‘clear:both‘></div>"; 40 } 41 else 42 { 43 s = s+" <div class=‘d‘ onclick=‘showimg(this,"+i+")‘></div>"; 44 } 45 } 46 47 var d = document.getElementById("wai"); 48 d.innerHTML=s; 49 } 50 51 function showimg(a,b) 52 { 53 a.style.backgroundImage=img[b]; 54 if(b==6) 55 { 56 alert("踩到雷了！"); 57 window.close(); 58 } 59 }
方式二、利用透明度效果（将大DIV设背景图片，小DIV设背景颜色并设置触发的事件（当点击小DIV时它的背景颜色变为透明））
1 <head>
2 <title>无标题文档</title>
3 <style type="text/css">
4 *
5 {
6 margin:0px auto;
7 padding:0px;
8 }
9 #a1 div
10 {
11 width:100px;
12 height:100px;
13 background-color:#09F;
14 border:1px solid black;
15 float:left;
16 }
17 #a1
18 {
19 width:410px;
20 height:410px;
21 background-image:url(../../../Pictures/1437459768106.jpg);
22 }
23 </style>
24 </head>
25
26 <body>
27 <div id="a1">
28 <div id="aa1" onclick="pic(this)"></div>
29 <div id="aa2" onclick="pic(this)"></div>
30 <div id="aa3" onclick="pic(this)"></div>
31 <div id="aa4" onclick="pic(this)"></div>
32 <div id="bb1" onclick="pic(this)"></div>
33 <div id="bb2" onclick="pic(this)"></div>
34 <div id="bb3" onclick="pic(this)"></div>
35 <div id="bb4" onclick="pic(this)"></div>
36 <div id="cc1" onclick="pic(this)"></div>
37 <div id="cc2" onclick="pic(this)"></div>
38 <div id="cc3" onclick="pic(this)"></div>
39 <div id="cc4" onclick="pic(this)"></div>
40 <div id="dd1" onclick="pic(this)"></div>
41 <div id="dd2" onclick="pic(this)"></div>
42 <div id="dd3" onclick="pic(this)"></div>
43 <div id="dd4" onclick="pic(this)"></div>
44 </div>
45 </body>
46 <script type="text/javascript">
47 function pic(a)
48 {
49 a.style.opacity="0";
50 }
51 </script>
eg7、文字的渐入效果（逐渐出现）
1 <style type="text/css"> 2 #shi 3 { 4 font-family:"Times New Roman", Times, serif; 5 font-size:40px; 6 font-weight:bold; 7 color:#60F; 8 height:50px; 9 width:500px; 10 } 11 </style> 12 </head> 13 14 <body> 15 <div id="wai" style="width:0px; height:50px; overflow:hidden;"> 16 <div id="shi">床前明月光</div> 17 </div> 18 </body> 19 <script type="text/javascript"> 20 showshi(); 21 function showshi() 22 { 23 var d = document.getElementById("wai"); 24 if(parseInt(d.style.width)<500) 25 { 26 var w = parseInt(d.style.width)+1; 27 d.style.width= w+"px"; 28 window.setTimeout("showshi()",20); 29 } 30 31 } 32 </script>
网页制作之JavaScript部分3--事件及事件传输方式（函数调用 练习题 ）重要---持续更新中
标签：
原文地址：http://www.cnblogs.com/zyh-club/p/4705705.html
