javacript事件小计(冒泡和捕获)

//javascript事件:
//1.绑定事件
//DOM标准(支持捕获或冒泡):
document.getElementById("box1").addEventListener("click",function(){
console.log(this.id);
},false);//最后一个参数决定是事件捕获(true)的时候触发还是事件冒泡(false)的时候触发
//IE8(仅支持冒泡):
document.getElementById("box1").attachEvent("onclick",function(){
alert("b1");
});

//其他区别:

IE8上同一个元素上绑定同样的事件,最后一次绑定的先执行
DOM标准上同一个元素上绑定同样的事件,首先绑定的先执行
DOM标准中可以使用this获得当前事件正在执行的元素,而IE8中只能使用event.srcElement获得最底层触发的元素上

//关于this指向:
当使用<div onclick="show()">ji</div>进行绑定的时候都不能够使用this进行指向当前执行元素,需要手动传递进去 onclick="show(this)"
当使用 div.onclick=function(){}或addEventListener或attachEvent绑定的时候this可以指向正在执行的元素(IE8中使用event.srcElement获得最底层触发的元素上)
//2.移除事件
//DOM标准,注意不能使用匿名函数
var func3=function(){
console.log(this.id);
}
var func3_ext=function(){
console.log(this.id+"ext");
}
document.getElementById("box3").addEventListener("click",func3,false);
document.getElementById("box3").addEventListener("click",func3_ext,false);

document.getElementById("box3").removeEventListener("click",func3);

//IE8,注意不能使用匿名函数
var func2=function(){
alert("b2");
}
document.getElementById("box2").detachEvent("onclick",func2);

//3.阻止事件的默认行为:
DOM标准:event.preventDefault()
IE8:event.returnValue=false;

//4.阻止事件继续传播
DOM标准: event.stopPropagation();
IE8: event.cancelBubble=true;

//5.利用冒泡事件的小技巧
//给父元素绑定一个事件,当点击很多子元素的时候,只在父元素的事件里进行处理,这可以对页面进行优化(使用event.srcElement或event.target获取触发这个事件的元素)