zoukankan      html  css  js  c++  java
  • HTML DOM-->鼠标事件:mouseovermouseroutmousedownmouseupmousemove

    1.定义和使用

      mouseover:鼠标移到某元素之上

      mouseout:鼠标从某元素移开

      mousedown:鼠标按钮被按下

      mouseup:鼠标按键被松开

      mousemove:鼠标被移动

      举例:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>js_excise</title>    
        </head>
        <body>
            <ul>
                <li>hello world</li>
            </ul>         
            <script type="text/javascript">
                var listli = document.getElementsByTagName('li')
                for(var i = 0;i<listli.length;i++){
                    //鼠标进入变红色
                    listli[i].addEventListener('mouseover',function(){
                        this.style.backgroundColor = "red"
                    },false)
                    //鼠标离开变蓝色
                    listli[i].addEventListener('mouseout',function(){
                        this.style.backgroundColor = "blue"
                    },false)
                    //鼠标按下字体大2倍
                    listli[i].addEventListener('mousedown',function(){
                        this.style.fontSize = parseInt(window.getComputedStyle(this,null).fontSize)*2+'px'
                    },false)
                    //鼠标按下字体小2倍
                    listli[i].addEventListener('mouseup',function(){
                        this.style.fontSize = parseInt(window.getComputedStyle(this,null).fontSize)/2+'px'
                    },false)
                }
                //鼠标移动
                document.addEventListener('mousemove',function(){
                    console.log('鼠标在移动')
                })
            </script>
        </body>
    </html>

      输出:

  • 相关阅读:
    转: React系统的入门系统
    转: Android官方培训课程中文版(v0.9.5)
    释放Linux系统缓存
    Hyperledger Fabric1.0环境搭建
    JS中的call、apply、bind
    资产和负债
    JS以指定格式获取当前日期
    apache2.4配置ssl
    Apache2.4整合tomcat8
    使用JDK将tomcat变成https访问
  • 原文地址:https://www.cnblogs.com/abner-pan/p/12805173.html
Copyright © 2011-2022 走看看