onclick、onmousedown、onmouseup和onmousover、onmouseout、onmousemove

单击事件必须在对象上松开鼠标后，才会执行单击事件的处理程序。

<!--（1）模拟电话拨号功能-->
<input type="text" id="num"/><input type="button" value="拨打号码" οnclick="phone()" />
<!--（2）商品结算-->
<ul>
<form name="shangpin">
<li><label>商品名称</label><input type="text" name="name" /></li>
<li><label>商品单价</label><input type="text" name="price" /></li>
<li><label>商品数量</label><input type="text" name="shuliang" /></li>
<li><input type="button" value="结算" οnclick="jiesuan()"/></li>
</form>
</ul>
<script>
function phone(){
var num=document.getElementById("num");
alert(num.value+"正在拨号中...")
}
function jiesuan(){
alert("商品名称："+shangpin.name.value+"\n商品总价："+shangpin.price.value*shangpin.shuliang.value);
}

</script>

------------------------------------------------------------------------------------

鼠标得的按下和松开事件：

（1）用事件模拟超链接标记的功能

<p οnmοusedοwn="anxia()"  οnmοuseup="songkai()" style="cursor: pointer;">

<u>零基础学JavaScrpt</u></p>

<script>
function anxia(){
var e=window.event;
var obj=e.srcElement;
obj.style.color="red"
}
function songkai(){
var e=window.event;
var obj=e.srcElement;
obj.style.color="green"
}
</script>

（2）当在图片上按下鼠标时显示图片下隐藏的文字，松开鼠标时用图片遮挡住文字

<div><img src="img/bianxing_jingang-006.jpg" style="  cursor:pointer; " alt="怀念啊！我们的青春啊，岁月在记忆中生根发芽"  οnmοusedοwn="wenzi()" οnmοuseup="pic()"/></div>
<div id="text" style="position: absolute; top:60px;display: none;" >怀念啊！我们的青春啊~!</div>

<script>
function wenzi(){

var e=window.event;
var obj=e.srcElement;

obj.style.opacity="0";
document.getElementById("text").style.display="block";
}
function pic(){

var e=window.event;
var obj=e.srcElement;
obj.style.opacity="1";
document.getElementById("text").style.display="none";

}

                   </script>

(3)模拟对讲机功能

<span id="duihua" ></span><br>

<input type="button" value="按住说话" οnmοusedοwn="an()" οnmοuseup="song()" />

<script>

 function an(){
        document.getElementById("duihua").innerHTML="长江长江，我是黄河……"
        }
        function song(){
        document.getElementById("duihua").innerHTML="通话完毕"
        }

</script>

--------------------------------------------------------------------------------------------

鼠标的移入和移出事件

（1）动态改变图片的焦点

<img src="img/bianxing_jingang-006.jpg" style="opacity: 1;"
οnmοuseοver="mohu()" οnmοuseοut="qingxi()" />

<script>
function mohu(){
var e=window.event;
var obj=e.srcElement;
obj.style.opacity="0.4";
obj.style.height="150px";
}
function qingxi(){
var e=window.event;
var obj=e.srcElement;
obj.style.opacity="1";
obj.style.height="112px";//变大了
}
</script>

（2）制作一个横向的导航菜单

<style>
li{list-style: none; float: left;width:100px;height: 50px; background-color: green;border-right: 1px white solid;text-align: center;}
a{width:100px;height: 50px; text-decoration: none;color: white; line-height: 50px; }
.menu{display: none;border:1px solid white ;}
.menu0{border-bottom:1px solid white ;width: 100px; height: 30px;line-height: 30px; background: green;}
</style>

<ul>
<li><a href="#">教育网站</a></li>
<li><a href="#">电脑丛书网站</a></li>
<li οnmοuseοver="chuxian()" οnmοuseοut="yincang()"><a href="#">新出图书</a>
<div class="menu">
<div class="menu0">PHP图书</div>
<div class="menu0">HTML图书</div>
<div class="menu0">JAVA图书</div>
</div>
</li>
<li><a href="#">其他网站</a></li>
</ul>
<script>
function chuxian(){
document.getElementsByClassName("menu")[0].style.display="block";
}
function yincang(){
document.getElementsByClassName("menu")[0].style.display="none";
/*.style.display跟innerHTML,setAttribute用法一样，必须指定元素（getElementById()）或getElementsByClassName()[n]*/
}

</script>

（3）实现文字的变色和放大效果

<p id="pp" οnmοuseοver="da()" οnmοuseοut="xiao()" style="color: black;font-size: 16px;">

欢迎购买明日科技图书</p>

<script>
function da()
{
var e=window.event;
var obj=e.srcElement;
obj.style.color="dodgerblue";
obj.style.fontSize="30px";
//font-size在函数中要使用fontSize；
}
function xiao()
{
var e=window.event;
var obj=e.srcElement;
obj.style.color="black";
//font-size在函数中要使用fontSize；
obj.style.fontSize="16px";
}

</script>

-------------------------------------------------------------

鼠标移动事件

（1）当鼠标在页面移动时显示当前位置

<script type="text/javascript">
  window.οnlοad=function(){
   οnmοusemοve=function show_coords(event)
{
x=event.clientX;
y=event.clientY;
var dili=document.getElementById("dili");
dili.innerHTML="X 坐标: " + x + ", Y 坐标: " + y;
}
}

</script>

<p id="dili"></p>

<span id="zuobiao0"></span>
  <script>
window.οnlοad=function(){
    οnmοusemοve=function zuobiao(){
    var x=window.event.x;
    var y=window.event.y;
document.getElementById("zuobiao0").innerHTML="鼠标在页面中当前位置的横坐标X:"+x+"   "+"纵坐标Y："+y;
}
    }

    </script>

再或：

<script>
    window.οnlοad=function(){
    οnmοusemοve=function (event){
    var e=event||window.event;
    document.getElementById("position").innerHTML="鼠标在页面中的当前位置的横坐标X："+e.screenX+"纵坐标Y："+e.screenY;
   
    }
    }
    </script>
    <span id="position"></span>