Js中级--事件冒泡

最新推荐文章于 2017-08-24 15:43:29 发布

Wendy-lxq

最新推荐文章于 2017-08-24 15:43:29 发布

阅读量460

点赞数 1

分类专栏： JavaScript 文章标签： web前端开发

本文链接：https://blog.csdn.net/u010297791/article/details/53534588

版权

JavaScript 专栏收录该内容

52 篇文章 3 订阅

订阅专栏

1、事件

在浏览器客户端应用平台，基本都是以事件驱动的，即某个事件发生，然后做出相应的动作。

2、事件对象

event : 事件对象 , 当一个事件发生的时候，和当前这个对象发生的这个事件有关的一些详细的信息都会被临时保存到一个指定地方-event对象，供我们在需要的调用。

3、事件冒泡

在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。

所有的现代浏览器都支持事件冒泡，但是在具体实现上还是有一些差别。

HTML DOM模型是个树形结构，元素之间有相互嵌套的关系，比如<div><a href="new_url">Click Me</a> </div>中div是父元素而a是子元素。如果父子元素都绑定了同一个事件比如onClick，当内层的子元素的事件被触发时，该事件会被传递到父元素中。

下面举一个例子分析一下这个过程，如图所示，这是一个简单的界面原型。

在这个基础上，我们实现如下的功能：

我们给span和div1都添加click点击事件，当span和div1捕获到event事件时，弹出当前的id。

实现代码：

<script>
    window.οnlοad=function(){
        var oSpan = document.getElementById("span1");
        var oDiv1= document.getElementById("div1");
        function fn1() {
            alert( this.id );
        }
        //事件函数绑定
        oDiv1.onclick = fn1;//告诉div1，如果他接收到了一个点击事件，那么他就去执行fn1
        oSpan.onclick = fn1;
    };
</script>

结果分析：

得到的结果是，当我们点击div1时，只弹出div1，当点击span时，会同时弹出span1和div1.也就是说click事件首先在span上发生，然后这个事件会沿DOM树向上传播，在每一有事件的节点上都会发生，直至传播至document对象。

事件传递的示意图如下：

再举一个简单的例子说明。

如图所示，刚开始我们设置下面的div隐藏，然后通过js点击按钮时，div出现。

刚开始（没有取消冒泡事件）的Js代码如下所示，但是当我们点击oBtn时，下面的div不会出现。

<script>
    window.οnlοad= function () {
        var oBtn =  document.getElementById("btn");
        var oDiv = document.getElementById("div1");
        oBtn.οnclick= function(){
            oDiv.style.display="block";
        };
        document.οnclick= function () {
            oDiv.style.display="none";
        };
    };
</script>

但是实际上，div是确实出现了然后又隐藏了。为了能够看得清楚这个过程，我将这个执行过程减慢，即加上setTimeout()看一下效果。

<script>
    window.οnlοad= function () {
        var oBtn =  document.getElementById("btn");
        var oDiv = document.getElementById("div1");
        oBtn.οnclick= function(ev){
            oDiv.style.display="block";
        };
        document.οnclick= function () {
            setTimeout(function () {
                oDiv.style.display="none";
            },1000)

        };
    };
</script>

那如何解决这个问题呢？

既然是因为事件冒泡的原因而导致的问题，那么我们就应该通过取消冒泡：ev.cancelBubble=true实现。

代码如下：

<script>
    window.οnlοad= function () {
        var oBtn =  document.getElementById("btn");
        var oDiv = document.getElementById("div1");

        oBtn.οnclick= function(ev){
            oDiv.style.display="block";
            var ev= ev||event;
            ev.cancelBubble=true;
        };
        document.οnclick= function () {
           oDiv.style.display="none";
        };
    };
</script>

4、事件冒泡的应用实例

在很多网站上或者应用上，我们都可以看到分享到哪里的功能，这个功能可以利用事件冒泡的原理实现，而且实现起来也是比较容易的，下面写了一个简单的分享到的小功能实例。

实现代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            width: 98px;
            height:200px;
            background: url("../images/share.png") no-repeat;
            position: absolute;
            left:-100px;
            top:50px;
            border: 1px solid #4db14d;
        }
        #share{
            width: 30px;
            height: 60px;
            background-color: #34b1ff;
            position: absolute;
            right: -30px;
            top:75px;
            color:#fff;
            text-align: center;
        }
    </style>
    <script>
        window.onload = function () {
            var oBox = document.getElementById("box");
            var oShare = document.getElementById("share");

            oBox.οnmοuseοver= function(){
                oBox.style.left='0px';
            };
            oBox.οnmοuseοut= function () {
                oBox.style.left='-100px';
            };
        };
    </script>
</head>
<body>
<div id="box">
    <div id="share">分享到</div>
</div>
</body>
</html>

鼠标经过事件，其实就是需要改变第一个div的左边距离。鼠标移入的时候，左边距离变大，当鼠标离开的时候，左边距离变为负数。

Wendy-lxq

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Js中级--事件冒泡

1、事件在浏览器客户端应用平台，基本都是以事件驱动的，即某个事件发生，然后做出相应的动作。2、事件对象 event : 事件对象 , 当一个事件发生的时候，和当前这个对象发生的这个事件有关的一些详细的信息都会被临时保存到一个指定地方-event对象，供我们在需要的调用。3、事件冒泡在一个对象上触发某类事件（比如单击onclick事件），如果此对象
复制链接

扫一扫

专栏目录