阻止事件冒泡现象

首先来解释一下啥是事件冒泡现象

事件冒泡：

多个元素嵌套，有层次关系，这些元素都注册了相同的事件，如果里面的元素的出发了事件，外面的元素该事件也触发

在这里有必要强调一下  相同的事件  不一定完全相同  即   都是 点击事件  或者 都是 鼠标移入事件

来个例子

<div class="at1" id = "1">
        <div class="at2" id = "2">
            <div class="at3" id = "3"></div>
        </div>
</div>

先写出来这三个div的结构

再给他们写好样式

 .at1 {
            width: 300px;
            height: 300px;
            background-color: red;
        }
        .at2 {
            width: 200px;
            height: 200px;
            background-color: yellow;
        }
        .at3 {
            width: 100px;
            height: 100px;
            background-color: pink;
        }

即他们应该是如图所示的结构

然后我们为这三个注册点击事件

my$("1").onclick = function () {
        this.style.backgroundColor = "white";
    }
    my$("2").onclick = function () {
        this.style.backgroundColor = "white";
    }
    my$("3").onclick = function () {
        this.style.backgroundColor = "white";
    }

然后这时候冒泡事件的表现呢  就是这样

你点击黄色的div那么黄色和红色 都会背景颜色变白   即：黄色的事件触发 使得事件冒泡 导致红色div事件触发

你点击粉色的div 那么所有的div都会背景颜色变白   即：粉色的事件触发使得事件冒泡 导致黄色div事件触发 继而导致红色div触发

我们该如何阻止事件冒泡呢?

首先我来说一下事件处理参数对象

这个对象呢  在事件处理的函数中可以验证一下它的存在

你测完会发现  谷歌火狐都有这个事件处理参数对象    而 IE8是undefined  所以呢是ie 8 是不支持的

my$("3").onclick = function () {
        this.style.backgroundColor = "white";
　　　　加一行代码 就能验证  consolo.log(arguments.lenth);
    }
如果你点了div3  那么控制台就会有一个  1 打印出来  说明这个事件处理参数对象是真实存在的

第一种浏览器  火狐浏览器中的阻止事件冒泡 当然这个谷歌也支持
 阻止事件冒泡 是利用这个事件处理参数对象来进行的

我们要利用 所以就把参数传进来

代码如下

my$("3").onclick = function (e) {
   this.style.backgroundColor = "white";
　　e.stopPropagation();
}

第二种浏览器  ie浏览器种的阻止事件冒泡 当然这个谷歌也支持

代码如下

my$("3").onclick = function () {
      this.style.backgroundColor = "white";
　　　　window.event.cancelBubble = true;
}

所以这个代码会牵扯到兼容的问题 我们最后把两种封装成一个兼容代码即可