事件对象、事件冒泡、事件捕获
事件对象：
event:描述或者包含事件的更加详细的信息;
event:不兼容FF;
ev: 兼容IE9+,FF,Chrome,IE8--报undefined;
兼容写法:var oEvent=ev||event;
clientX:X轴的坐标
clientY:Y轴的坐标
冒泡：
子元素的事件可以传递到父元素身上,如果父元素身上有相同事件会触发,否则的话继续冒泡;
取消事件冒泡：
oEvent.cancelBubble = true;
事件捕获：父元素的事件可以传递到子元素身上(事件下沉);
设置捕获：setCapture();
释放捕获: releaseCapture();
window.onload=function(){
var oBox1=document.getElementById("box1");//爷爷
var oBox2=document.getElementById("box2");//父亲
var oBox3=document.getElementById("box3");//儿子
oBox1.onclick=function(){
alert(1);
}
oBox2.onclick=function(ev){ //冒泡触发的必须是相同事件
var oEv=ev||event;
alert(2);
oEv.cancelBubble=true;
}
oBox3.onclick=function(ev){
var oEv=ev||event;
alert(3);
oEv.cancelBubble=true;
}
}
按钮开关及冒泡:
window.onload=function(){
var oHd=document.getElementById("hd");//上面的按钮
var oUl=document.getElementById("list");//下面的列表
var aLi=document.getElementsByTagName('li');
var bOK=true; //给一个开关，现在的状态是开启的
oHd.onclick=function(ev){
var oEv=ev||event;
oEv.cancelBubble=true;
if(bOK){oUl.style.display='block';} //点击第一次显示
else{oUl.style.display='none';}//再次点击隐藏
bOK=!bOK; //点击一次取反
}
for(var i=0;i<aLi.length;i++){
aLi[i].onclick=function(){
oHd.innerHTML=this.innerHTML;
bOK=true; //让下一次的h3点击，ul显示
//oUl.style.display='none';//点击冒泡到document上
}
}
document.onclick=function(){
oHd.innerHTML='请选择';
oUl.style.display='none';
bOK=true;//让下一次的h3点击，ul显示
}
}
