JS中的事件冒泡

来源：互联网发布：淘宝金酷娃玩具拖车编辑：程序博客网时间：2024/05/02 21:45

个人心得：
事件冒泡，是指在父元素上添加的功能（即，js事件）在子元素上也能够实现。
在下列代码中的实现主要体现在：父元素div内的鼠标离开、进入子标签会触发js事件。

注意事项请见代码中注释。

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <style>            div{                border: 1px solid #000000;                width: 300px;                height: 300px;                float:left;                margin: 10px 20px;            }            p{                /*border: 1px solid #000000;*/                height: 50px;                line-height: 50px;                text-align: center;                background-color: gray;                color: white;            }        </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（也可以是其他单词），获取//              标签<font>(通过使用document对文档进行操作，getElementById("")获取id是a的标签。)//              此时变量font就代表标签<font>,可以通过变量font对标签<font>进行操作。                font.innerHTML=a;                //font.(是一种对<font>标签开始操作的语法，意为：font的什么)                //innerHTML是指，对标签<font>文本内容的更替。            }            //事件冒泡            function myEnter(){                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()">            <font id="a">0</font>            <p>鼠标移动事件onmousemove</p>        </div>        <div onmouseover="myEnter()">            <font id="b">0</font>            <p>鼠标移入事件onmouseover</p>        </div>        <div onmouseout="myOut()">            <font id="c">0</font>            <p>鼠标移出事件onmouseout</p>        </div>        <div onmouseenter="myEnter()">            <font id="d">0</font>            <p>鼠标移入事件onmouseenter</p>        </div>        <div onmouseleave="myLeave()">            <font id="e">0</font>            <p>鼠标移出事件onmouseleave</p>        </div>    </body></html>

阅读全文

0 0