onload :页面加载时触发
onclick:鼠标点击时触发
onmouseover:鼠标滑过时触发
onmouseseout:鼠标离开时触发
onfoucs:获得焦点时触发
onblur:失去焦点时触发
onchange:域的内容改变时发生
以下介绍三个事件,分别时:onclick,onmouseover,onmouseout
<style>
.btn{
width:140px; height:30px; line-height:30px;
background:yellow; color:red; font-size:14px;
text-align:center; border-radius:5px;
cursor: pointer; margin-top:30px;
}
</style>
<body>
<input type="button" value="弹出" onclick="alert('我是按钮')">
<!--鼠标滑过按钮时调用mouseoverFn的函数-->
<div id ="btn1" class="btn" onmouseover = "mouseoverFn(this,'pink' )" >开始</div>
<div id ="btn2" class="btn" onmouseout = "mouseoutFn(this,'green')">结束</div>
<script type="text/javascript">
function mouseoverFn(btn1,bgColor){
//鼠标滑过按钮时,按钮的背景变为粉色
btn1.style.background=bgColor;
}
function mouseoutFn(btn2,bgColor){
//鼠标离开按钮时,按钮的背景变为绿色
btn2.style.background=bgColor;
}
</script>
</body>