- 事件冒泡
- 取消事件冒泡 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(事件名称,时间函数,是否捕获)
