Js事件流

事件冒泡
取消事件冒泡 e.cancelBubble = true
例子:仿select控件
事件捕获
- 非标准下IE是没有的，在绑定事件中，标准是有的。

冒泡概述

简单来说：父元素有自己的点击方法。子元素也有自己的点击方法或者子元素就不想执行父元素的方法.
这样我们就必须阻止冒泡。

阻止冒泡

让父元素执行父元素的方法，让子元素执行子元素的方法.

<body>
<style>
    *{margin:0px;padding:0px;}
    .div1{background:red;width:400px;height:400px;margin:0 auto;}
    .div2{background:blue;width:200px;height:200px;margin:0 auto;}
</style>
<div class="div1">
<div class="div2">
    测试冒泡
</div>
</div>
</body>
<script>
    document.getElementsByClassName("div1")[0].onclick = function(){
        window.alert("弹出最外层");
    }
    document.getElementsByClassName("div2")[0].onclick = function(e){
        e.cancelBubble = true;
        window.alert("弹出最内层");
    }
</script>

e.cancelBubble=true;这样就阻止冒泡了.

给事件绑定的第二种形式

可以用addEventListener也可以用attachEvent看IE还是谷歌,用的不多

call方法

call方法可以传递2个参数，第一个参数可以改变函数的this.第二个参数开始就是原来函数的参数列表
如果call方法传入的第一个参数是null,那就不改变函数内部this指向.
call方法的核心就是第一个参数，改变this指向

function fn1(){
   window.alert(this);
}
fn1();  //弹出来window
fn1.call() ;//等价于fn1();弹出的结果window
fn1.call(1);  //弹出来1 改变了this

事件绑定的取消

document.oncllick = null;
IE:obj.detachEvent(事件名称,事件函数)
标准:obj.removeEventListenrt(事件名称,时间函数,是否捕获)