事件举例:
1.要求实现效果：当鼠标悬停在照片上时更换为另一张照片；当鼠标离开时，还原为本来的图片。
说明：
1.一般来说对于一个事件问题处理起来分为三个步骤：
（1）获取事件
（2）绑定事件
（3）书写事件驱动程序
代码如下
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>实战</title>
<style type="text/css">
*{
margin:0px;
padding:0px;//清除默认样式
}
img{
cursor:pointer;/*定义鼠标的形状，鼠标形状为小手*/
border:1px #66FFFF solid;/*给图片设置一个边框*/
}
</style>
<script type="text/javascript">
//onload的作用是等事件加载完以后才执行此程序
window.onload=function()
{
//获取事件
var img1=document.getElementById("tp");
//绑定事件
img1.onmousemove=function()
{
img1.src="img/7.jpg";//事件驱动程序（修改img的src属性，移入为新的照片）
};
//获取事件
var img2=document.getElementById("tp");
//绑定事件
img2.onmouseout=function()
{
img2.src="img/2.jpg";//事件驱动程序（修改img的src属性，移除为原照片）
};
};
</script>
</head>
<body>
<img src="img/2.jpg" id="tp">
</body>
</html>
效果图如下（因为我不会上传动态效果所以想要看真正效果的可以自己试试）：
此图为鼠标离开时的图片
此图为鼠标移入时的图片
2.当点击按钮时会实现图片的切换
说明：图片切换的实质就是改变图片（img）的src属性
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>实战</title>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
#outer{
width:426px;/*图片的宽高度自适应*/
padding:10px;/*内边距为10*/
margin:50px auto;/*让整个div居中*/
background-color:#66FFFF;/*设置背景颜色*/
text-align:center;/*使按钮居中*/
}
</style>
<script type="text/javascript">
//onload的作用是等事件加载完以后才执行此程序
window.onload=function()
{
//获取按钮事件
var bt1=document.getElementById("pre");
var bt2=document.getElementById("next");
//获取img标签中的第一个元素结点
var img=document.getElementsByTagName("img")[0];
//创建一个数组用来保存图片的路径（即src属性）
var imgarr=["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg"];
//设置数组的索引下标
var index=0;
//获取p标签
var pbq=document.getElementById("pid");
//设置提醒文字
pbq.innerHTML="共有"+imgarr.length+"张图片,当前第"+(index+1)+"张";
//绑定事件
bt1.onclick=function()
{
//书写事件驱动程序
index--;//切换到上一张索引自减
//判断索引是否小于0
if(index<0)
{
index=imgarr.length-1;//目的是可以实现循环切换
}
//修改img的src属性
img.src=imgarr[index];
//当点击按钮以后，重新设置p标签中的显示内容
pbq.innerHTML="共有"+imgarr.length+"张图片,当前第"+(index+1)+"张";
};
//绑定事件
bt2.onclick=function()
{
//书写事件驱动程序
index++;//切换到下一张索引自加
//判断索引是否大于4
if(index>imgarr.length-1)
{
index=0;//目的是可以实现循环切换
}
//修改img的src属性
img.src=imgarr[index];
//当点击按钮以后，重新设置p标签中的显示内容
pbq.innerHTML="共有"+imgarr.length+"张图片,当前第"+(index+1)+"张";
};
};
</script>
</head>
<body>
<div id="outer">
<p id="pid"></p> <!--作用是显示当图片是第几张图片-->
<img src="img/1.jpg">
<button id="pre">上一张</button>
<button id="next">下一张</button>
</div>
</body>
</html>
效果图如下（就随便截了两张，更多效果自己尝试一下）：
