HTML DOM-->鼠标事件：mouseover\mouserout\mousedown\mouseup\mousemove

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>

　　输出：

HTML DOM-->鼠标事件：mouseover\mouserout\mousedown\mouseup\mousemove

1.定义和使用

猜你喜欢