学习内容：
1.事件监听
1 <body> 2 <input type="button" onclick="show1()" value="按钮1"> 3 <input type="button" id="bt2" value="按钮2"> 4 <input type="button" id="bt" value="按钮3"> 5 <input type="button" id="re" value="按钮4"> 6 <script> 7 function show1(){ 8 alert("这是第一种监听方式：绑定HTML"); 9 } 10 function show2(){ 11 alert("这是第二种监听方式：绑定DOM"); 12 } 13 document.getElementById("bt2").onclick=show2; 14 15 var bt = document.getElementById("bt"); 16 bt.addEventListener("click",show);//可添加多个事件监听器 17 function show(){ 18 alert("添加了监听事件"); 19 } 20 document.getElemengtById("re").removeEventListener("click",show)//移除监听器 21 </script> 22 23 </body>
2.事件冒泡
事件会从子元素到父元素顺序执行
1 <body onClick="show('body<br>')"> 2 <div onClick="show('div<br>');"> 3 <p onClick="show('p<br>');">click me</p> 4 </div> 5 <div id="display"></div> 6 <script> 7 function show(sText){ 8 var oDiv=document.getElementById("display"); 9 oDiv.innerHTML+=sText; 10 } 11 </script> 12 </body>
3.动图
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>无标题文档</title> 6 <style> 7 #content { 8 margin: 80px 330px; 9 } 10 input { 11 height: 20px; 12 width: 20px; 13 border-radius: 50%; 14 margin-left: 30px; 15 border: none; 16 background-color: cornflowerblue; 17 color: azure; 18 } 19 input:hover { 20 opacity: 0.6; 21 } 22 </style> 23 <script> 24 var img = ["1.jpg","2.jpg","3.jpg","4.jpg","5.jpg","6.jpg","7.jpg","8.jpg"]; 25 var a = document.getElementsByTagName("input");//将所有input存为数组 26 function cImg(va){ 27 var v = va.value-1; 28 document.getElementById("img").src=img[v]; 29 } 30 var n=0; 31 function pre(){ 32 if(n==0){ 33 n=7; 34 }else{ 35 n--; 36 } 37 document.getElementById("img").src=img[n]; 38 } 39 function ne(){ 40 if(n==7){ 41 n=0; 42 }else{ 43 n++; 44 } 45 document.getElementById("img").src=img[n]; 46 } 47 48 timer = setInterval("ne()",2000); 49 function s(){ 50 clearInterval(timer); 51 } 52 function t(){ 53 timer = setInterval("ne()",2000); 54 } 55 window.onload=function(){ 56 57 for(i=0;i<a.length;i++){ 58 a[i].addEventListener("mouseover",s); 59 a[i].addEventListener("mouseout",t); 60 } 61 } 62 </script> 63 </head> 64 65 <body> 66 <div id="content"> 67 <img src="1.jpg" alt="" id="img"> 68 <br/> 69 <input type="button" value="U" onClick="pre()"> 70 <input type="button" value="1" onClick="cImg(this)"> 71 <input type="button" value="2" onClick="cImg(this)"> 72 <input type="button" value="3" onClick="cImg(this)"> 73 <input type="button" value="4" onClick="cImg(this)"> 74 <input type="button" value="5" onClick="cImg(this)"> 75 <input type="button" value="6" onClick="cImg(this)"> 76 <input type="button" value="7" onClick="cImg(this)"> 77 <input type="button" value="8" onClick="cImg(this)"> 78 <input type="button" value="D" onClick="ne()"> 79 </div> 80 </body> 81 </html>