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>
扫一扫
502
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
