javaScript中鼠标冒泡事件_在<td>中使用组件鼠标事件会冒泡-优快云博客

本文详细探讨了JavaScript中的鼠标冒泡事件，解释了事件冒泡的概念，如何在DOM元素上捕获和阻止冒泡过程，并通过实例展示了在实际编程中的应用。通过阅读，你将掌握如何有效地管理事件处理程序，提升JavaScript交互体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这里写图片描述

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title></title>


    <style>
        div{
            border: 1px solid cadetblue;
            height: 300px;
            width: 300px;
            float: left;
            margin: 10px 20px;

        }

        div p{
            color: azure;
            background-color: darkseagreen;
            text-align: center;
            line-height: 40px;
        }


    </style>



    <script>
        var a=0;
        var b=0;
        var c=0;
        var d=0;
        var e=0;


        function myMove(){
            a++;
            var font=document.getElementById("a");
            font.innerHTML=a;
        }

        function myOver(){
            b++;
            var font=document.getElementById("b");
            font.innerHTML=b;
        }

        function myOut(){
            c++;
            var font=document.getElementById("c")
            font.innerHTML=c;
        }

        function myEnter(){
            d++;
            var font=document.getElementById("d")
            font.innerHTML=d;
        }

        function myLeave(){
            e++;
            var font=document.getElementById("e")
            font.innerHTML=e;
        }
    </script>

</head>
<body>

    <div onmousemove="myMove()">
        <span id="a">0</span>
        <p>鼠标移动事件onmousemove</p>
    </div>

    <div onmouseover="myOver()">
        <span id="b">0</span>
        <p>鼠标移入事件onmouseover</p>
    </div>

    <div onmouseout="myOut()">
        <span id="c">0</span>
        <p>鼠标移出事件onmouseout</p>
    </div>

    <div onmouseenter="myEnter()">
        <span id="d">0</span>
        <p>鼠标移入事件onmouseenter</p>
    </div>

    <div onmouseleave="myLeave()">
        <span id="e">0</span>
        <p>鼠标移出事件onmouseleave</p>
    </div>


</body>
</html>