JavaScript鼠标事件

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('我是按钮')">

<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>

JavaScript鼠标事件_第1张图片

你可能感兴趣的:(JavaScript鼠标事件)