javascript中onmousemove、onmouseover、onmouseenter 的不同

最新推荐文章于 2020-07-02 15:56:35 发布

秋风_irwin

最新推荐文章于 2020-07-02 15:56:35 发布

阅读量1.2k

点赞数

分类专栏： js基础文章标签： js 事件

本文链接：https://blog.csdn.net/blueblueskyhua/article/details/54744590

版权

js基础专栏收录该内容

14 篇文章 2 订阅

订阅专栏

在比较onmousemove、onmouseover、onmouseenter 的不同之前，首先我们先看看各种onmouse事件的作用：

onmousedown 当元素上按下鼠标按钮时出发
onmousemove 当鼠标指针移动到水元素上时触发
onmouseover 当鼠标指针移动元素上时触发
onmouseout 当鼠标指针移出指定的对象时发生。
onmouseup 当在元素上释放鼠标按钮时触发
onmouseenter 事件在鼠标指针移动到元素上时触发。(不冒泡)
onmouseleave 事件在鼠标移除元素时触发。(不冒泡)

要知道onmouseenter 和onmouseleave事件是不冒泡的
以下例子可以知道onmousemove、onmouseover、onmouseenter的不同之处，以及各个onmouse事件执行先后顺序，在onmouseover、onmouseenter中，over还可以通过子元素的触发。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .bg{
            width: 200px;
            height: 200px;
            background: #ddd;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="bg" id="demo1" onmousemove="mymouseMove()" onmousedown="mymouseDown()" onmouseup="mymouseUp()" onmouseover="mymouseOver()" onmouseout="mymouseOut()" onmouseenter="mymouseEnter()" onmouseleave="mymouseLeave()"> 

    </div>
    <div class="bg" id="demo2" >
         <p>onmouseover: <br> <span id="demo22">鼠标移动到我这!</span></p>
    </div>
    <div class="bg" id="demo3" >
        <p>onmouseenter: <br> <span id="demo33">鼠标移动到我这!</span></p>
    </div>
    <div class="bg" id="demo4" >
         <p>onmousemove: <br> <span id="demo44">鼠标移动到我这!</span></p>
    </div>
</body>
<script>
    var x = 0;
    var y = 0;
    var z = 0;
    function mymouseDown(){
        document.getElementById('demo1').innerHTML = 'down';
        console.log('down');
    }
    function mymouseMove(){
        document.getElementById('demo1').innerHTML = 'move';
        console.log('move');
    }
    function mymouseUp(){
        document.getElementById('demo1').innerHTML = 'up';
        console.log('up');
    }
    function mymouseOver(){
        document.getElementById('demo1').innerHTML = 'over';
        console.log('over');
    }
    function mymouseOut(){
        document.getElementById('demo1').innerHTML = 'out';
        console.log('out');
    }
    function mymouseEnter(){
        document.getElementById('demo1').innerHTML = 'enter';
        console.log('enter');
    }
    function mymouseLeave(){
        document.getElementById('demo1').innerHTML = 'leave';
        console.log('leave');
    }

    document.getElementById('demo2').onmouseover = function(){
        document.getElementById("demo22").innerHTML = x+=1;
    }
    document.getElementById('demo3').onmouseenter = function(){
        document.getElementById("demo33").innerHTML = y+=1;
    }
    document.getElementById('demo4').onmousemove = function(){
        document.getElementById("demo44").innerHTML = z+=1;
    }
</script>
</html>

秋风_irwin

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
javascript中onmousemove、onmouseover、onmouseenter 的不同

在比较onmousemove、onmouseover、onmouseenter 的不同之前，首先我们先看看各种onmouse事件的作用：onmousedown 当元素上按下鼠标按钮时出发onmousemove 当鼠标指针移动到水元素上时触发onmouseover 当鼠标指针移动元素上时触发onmouseout 当鼠标指针移出指定的对象时发生。onmouseup
复制链接

扫一扫

专栏目录