添加事件监听和取消事件监听：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>添加事件监听和取消事件监听</title> <script type="text/javascript"> function show(){ alert("添加了监听事件"); } function cancel(){ alert("失去焦点"); } function remove(){ document.getElementById("b").removeEventListener("click",show); } //当文档加载完成后执行 window.onload=function(){ document.getElementById("b").addEventListener("mouseover",show); document.getElementById("d").onclick=remove; }; </script> </head> <body> <input type="button" id="b" value="按钮"> <input type="button" id="d" value="取消监听"> <input type="button" value="双击" onClick="show()"> <input type="button" value="移上来" onMouseOver="show()"> <input type="text" value="b" onFocus="show()" onBlur="cancel()"> <input type="text" value="a" onChange="show()" onSelect="cancel()"> </body> </html>
事件监听的方法：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>事件的监听方法</title> </head> <body> <a href="http://www.baidu.com" onClick="returnfalse">超链接</a> <input type="button" value="按钮1" onClick="show1()"> <input type="button" value="按钮2" id="button2"> <script type="text/javascript"> function show1(){ alert("这是第一种监听方式：绑定HTML元素属性"); } function show2(){ alert("这是第二种监听方式:绑定DOM对象属性"); } document.getElementById("button2").onclick=show2;//show2是函数名 </script> </body> </html>
轮播图：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>轮播图</title> <script type="text/javascript"> var arr=["./img1/1.jpg","./img1/2.jpg","./img1/3.jpg","./img1/4.jpg","./img1/5.jpg","./img1/6.jpg","./img1/7.jpg"] var v=0 var s=0 function change(curr){ v=curr.value; var i=document.getElementById("imgage") i.src=arr[v]; } function up(){ if(v==0){ v=arr.length-1; } else{ v--; } document.getElementById("imgage").src=arr[v]; } function next(){ if(v==arr.length-1){ v=0; }else{ v++; } document.getElementById("imgage").src=arr[v]; } function cancel(){ clearInterval(s);//清除定时器 } function con(){ s=setInterval("next()",1000); } //当文档全部加载完执行的代码 window.onload=function(){ s=setInterval("next()",1000); var i=document.getElementById("imgage"); i.addEventListener("mouseover",cancel); i.addEventListener("mouseout",con); } </script> </head> <body> <img src="./img1/1.jpg" id="imgage"> <input type="button" value="上一张" onClick="up()"> <input type="button" value="0" onClick="change(this)"> <input type="button" value="1" onClick="change(this)"> <input type="button" value="2" onClick="change(this)"> <input type="button" value="3" onClick="change(this)"> <input type="button" value="4" onClick="change(this)"> <input type="button" value="5" onClick="change(this)"> <input type="button" value="6" onClick="change(this)"> <input type="button" value="下一张" onClick="next()"> </body> </html>
<!doctype html><html><head><meta charset="utf-8"><title>轮播图</title><script type="text/javascript">var arr=["./img1/1.jpg","./img1/2.jpg","./img1/3.jpg","./img1/4.jpg","./img1/5.jpg","./img1/6.jpg","./img1/7.jpg"]var v=0var s=0function change(curr){ v=curr.value;var i=document.getElementById("imgage")i.src=arr[v];}function up(){if(v==0){v=arr.length-1;}else{v--;}document.getElementById("imgage").src=arr[v];}function next(){if(v==arr.length-1){v=0;}else{v++;}document.getElementById("imgage").src=arr[v];}function cancel(){clearInterval(s);//清除定时器}function con(){s=setInterval("next()",1000);}//当文档全部加载完执行的代码window.onload=function(){ s=setInterval("next()",1000);var i=document.getElementById("imgage");i.addEventListener("mouseover",cancel);i.addEventListener("mouseout",con);}</script></head>
<body><img src="./img1/1.jpg" id="imgage"><input type="button" value="上一张" onClick="up()"><input type="button" value="0" onClick="change(this)"><input type="button" value="1" onClick="change(this)"><input type="button" value="2" onClick="change(this)"><input type="button" value="3" onClick="change(this)"><input type="button" value="4" onClick="change(this)"><input type="button" value="5" onClick="change(this)"><input type="button" value="6" onClick="change(this)"><input type="button" value="下一张" onClick="next()"></body></html>