zoukankan      html  css  js  c++  java
  • 使用HTML DOM 来分配事件 —— onmouseover和onmouseout ,onmousedown和onmouseup

    onmouseover 和 onmouseout 事件

    onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。

    一个小例:鼠标未在上面前  移到上面后

    (1)关键代码
    <body> <div onmouseover="mOver(this)" onmouseout="mOut(this)"
    style="background-color:green;120px;height:20px;padding:40px;color:#ffffff;">把鼠标移到上面</div> <script> function mOver(obj) { obj.innerHTML="谢谢" } function mOut(obj) { obj.innerHTML="把鼠标移到上面" } </script>
    (2)关键代码 (两种方法均可实现)
    <div onmouseover="innerHTML='谢谢'" onmouseout="innerHTML='把鼠标移到上面'"
    style="120px;height:20px;padding:40px;color:#ffffff;">把鼠标移到上面</div>

     

    onmousedown、onmouseup 以及 onclick 事件

    onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时,会触发 onmousedown 事件,当释放鼠标按钮时,会触发 onmouseup 事件,最后,当完成鼠标点击时,会触发 onclick 事件。

    例:

    未按鼠标前点击鼠标时松开后

    (1)关键代码
    <div onmousedown="mDown(this)" onmouseup="mUp(this)"style="background-color:green;color:#ffffff;
    90px;height:20px;padding:40px;font-size:12px;">请点击这里</div> <script> function mDown(obj) { obj.style.backgroundColor="#1ec5e5"; obj.innerHTML="请释放鼠标按钮" } function mUp(obj) { obj.style.backgroundColor="green"; obj.innerHTML="请按下鼠标按钮" } </script>
    (2)关键代码 (两种方法均可)
    <div onmousedown="style.backgroundColor='#1ec5e5',innerHTML='请释放鼠标'"
    onmouseup="style.backgroundColor='red',innerHTML='请按下鼠标'"
    style="color:#ffffff;90px;height:20px;padding:40px;font-size:12px;">请点击这里</div>
  • 相关阅读:
    【环境部署】centos7安装mysql-5.7.19 group-replication
    centos7远程安装oracle11g R2详细教程-解决一切问题
    docker:构建nginx+php-fpm镜像(一):构建nginx自启动镜像
    python virtualenv 安装运行saltstack
    自动化运维:flask-bootstrap + highstock整合
    自动化运维web环境搭建:Nginx+Django+uwsgi
    计算机二级-word错题总结
    SVPWM学习笔记2
    SVPWM自学笔记
    电力拖动自动控制系统_学习笔记2
  • 原文地址:https://www.cnblogs.com/lshdashi/p/7705386.html
Copyright © 2011-2022 走看看