JavaScript常用鼠标事件的分类和介绍③

最新推荐文章于 2022-11-21 09:18:11 发布

瞧我的记性又把你当人看了

最新推荐文章于 2022-11-21 09:18:11 发布

阅读量808

点赞数

分类专栏： JS基础分享文章标签： javascript 鼠标实例应用

本文链接：https://blog.csdn.net/a976196371/article/details/52791310

版权

JS基础分享专栏收录该内容

10 篇文章 0 订阅

订阅专栏

在JavaScript 中通过鼠标触发的事件我们常用的有：
①、鼠标点击事件；
②、鼠标移入事件；
③、鼠标移出事件；
④、事件冒泡；
下面就简单的介绍一些这几种事件，以及实例中的应用。
4、事件冒泡：是当有多个相同事件同时触发的时候，事件就会从低到高的传递。
这么说可能不好理解，我举个例子：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            div{padding: 40px;}
        </style>

    </head>
    <body >
        <div style="background: red;" onclick="alert(this.style.background)">
            <div style="background: green;" onclick="alert(this.style.background)">
                <div style="background: blue;" onclick="alert(this.style.background)"></div>
            </div>
        </div>
    </body>
</html>

 在这个例子中我们可以看到，假设外部有一个大的盒子红色、中间有个小的盒子绿色、最里有一个蓝色的盒子。三个盒子镶嵌在一起。
 当我们点击最外面盒子的时候，弹出的是最外层盒子的颜色red。
 当我们点击中间盒子的时候，先弹出了中间盒子的颜色green，随后又弹出的最外层盒子的red。
 当我们点击最中间盒子的时候，弹出的依次是 blue、 green、red。

这就是事件从小到大，从内到外的传递。这个传递的过程就是事件冒泡；
事件冒泡经常用于不同对象同时使用同一事件，但是这样的弊端就是，当同一事件分别设置不同属性的时候，他就可能激活我们不想激活的事件，从而事件相互受到影响，有的还会导致程序错乱。所以有的时候我们需要阻止事件冒泡。

所以说当很多特效放在一起用的时候，阻止冒泡事件是必须做的。

如何阻止事件冒泡呢？
就比如，实例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #box{width: 400px;height: 400px;background: #555;display: none;}
        </style>
        <script type="text/javascript">
            window.onload=function(){
                var oBtn=document.getElementById("btn");
                var oBox=document.getElementById("box");

                oBtn.onclick=function(ev){
                    if(oBox.style.display=='block'){
                        oBox.style.display='none';
                    }
                    else{
                        oBox.style.display='block';
                    }
                    //这里呢是兼容性处理
                    //b 是声明的事件
                    var b=ev || event;
                    //取消事件b的冒泡。
                    b.cancelBubble=true;
                }
                document.onclick=function(ev){
                    oBox.style.display='none';

                }
            }
        </script>
    </head>
    <body>
        <input type="button" name="btn" id="btn" value="点击" />
        <div id="box"></div>
    </body>
</html>

这样点击按钮的时候div能消失，点击document，就是旁边的部分的时候，也能实现div的消失。

瞧我的记性又把你当人看了

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript常用鼠标事件的分类和介绍③

在JavaScript 中通过鼠标触发的事件我们常用的有： ①、鼠标点击事件； ②、鼠标移入事件； ③、鼠标移出事件； ④、事件冒泡；下面就简单的介绍一些这几种事件，以及实例中的应用。 4、事件冒泡：是当有多个相同事件同时触发的时候，事件就会从低到高的传递。这么说可能不好理解，我举个例子：<!DOCTYPE html><html> <head>
复制链接

扫一扫