onmousedown与onmouseup及onclick事件示例

来源：互联网发布：二级c语言成绩查询时间编辑：程序博客网时间：2024/05/17 23:39

onmousedown：用户鼠标按下时触发的事件。
onmouseup:鼠标抬起时触发的事件。
onclick:鼠标点击后触发的事件（包含了两个动作，及按下与抬起两个过程。）
示例1：鼠标按下时更换字体背景色，抬起时还原默认颜色。（onmousedown与onmouseup）

<!DOCTYPE html><html><head><meta charset="utf-8" /><title>鼠标按下时更换字体背景色，抬起时还原默认颜色。</title><style> .xuexi{width:200px;height:120px;background:#abcdef;border:1px solid green;}</style><script>  function downClick(){    var dd=document.getElementById("dd");dd.style.background="red";  }  function upClick(){    var dd=document.getElementById("dd");dd.style.background="#abcdef";  }</script></head><body>  <div id="dd" onmousedown="downClick();" onmouseup="upClick();" class="xuexi"></div></body></html>

示例2:鼠标点击改变字体大小（onclick）

<!DOCTYPE html><html><head><meta charset="utf-8" /><title>鼠标点击改变字体大小</title><style> .xuexi{width:200px;height:120px;background:#abcdef;border:1px solid green;}</style><script> function xuexiClick(){    var dd=document.getElementById("dd");dd.style.fontSize=30+'px'; }</script></head><body>  <div id="dd" onclick="xuexiClick();" class="xuexi">我爱学习，学校使我快乐/微笑</div></body></html>

另外还有以下鼠标事件：
onMouseOver 鼠标经过时触发
onMouseOut 鼠标移出时触发
onMouseMove 鼠标移动时触

阅读全文

0 0