单击事件必须在对象上松开鼠标后,才会执行单击事件的处理程序。
<!--(1)模拟电话拨号功能-->
<input type="text" id="num"/><input type="button" value="拨打号码" onclick="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="结算" onclick="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 onmousedown="anxia()" onmouseup="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="怀念啊!我们的青春啊,岁月在记忆中生根发芽" onmousedown="wenzi()" onmouseup="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="按住说话" onmousedown="an()" onmouseup="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;"
onmouseover="mohu()" onmouseout="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 onmouseover="chuxian()" onmouseout="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" onmouseover="da()" onmouseout="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.onload=function(){
onmousemove=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.onload=function(){
onmousemove=function zuobiao(){
var x=window.event.x;
var y=window.event.y;
document.getElementById("zuobiao0").innerHTML="鼠标在页面中当前位置的横坐标X:"+x+" "+"纵坐标Y:"+y;
}
}
</script>
再或:
<script>
window.onload=function(){
onmousemove=function (event){
var e=event||window.event;
document.getElementById("position").innerHTML="鼠标在页面中的当前位置的横坐标X:"+e.screenX+"纵坐标Y:"+e.screenY;
}
}
</script>
<span id="position"></span>