看了网上的资料,终于能理解冒泡机制,现在写下自己的一点心得,这里边也有从网上找的。
由于HTML中的对象都是层次结构,比如一个Table包含了多个TR,一个TR包含了多个TD,Bubble就是一个事件可以从子节点向所有父节点传递,比如鼠标点击了一个TD,当前的event.srcElement就是这个TD,但是这种冒 泡机制使你可以从TR或者Table处截获这个点击事件,但是如果你event.cancelBubble,则就不能上传事件。
冒泡的顺序是由里向外(div-->body-->html-->document-->window),不过一般把document当做根节点。阻止冒泡的函数可以这么写
function stopFunc(event){
var evt = window.event||event;
if(evt.stopPropagation){
evt.stopPropagation();//火狐
}else{
evt.cancleBuble = true();//ie
}
}
举一个例子,如一个html结构如下:
<body>
<form action="test" name="searchFrm">
<input type="text" id="keyid" name="keyword" >
<input type="submit" value="搜索">
<div id="container" οnmοusedοwn="stopFunc(event)" ></div>
</form>
</body>
当想点击<div>层以外的地方来隐藏这个<div>,那么可以给根节点document绑定一个click事件,一点击html就隐藏<div>。
document.documentElement.onclick = function() {
document.getElementById('need_hide').style.display = 'none';
}
或者这样写也行
document.onclick = function(){
document.getElementById("container").style.display = "none";
}
但是问题来了,现在就算点击这个<div>也使其隐藏了,原因就在于<div>是document的子节点,当给根节点document添加onclick事件后,所有的子元素(div,body,html)都会添加这个事件,所以为了避免这种结果,就需要在该元素被click时取消冒泡,添加stopFunc()方法。
若不取消冒泡,那么在对<div>进行click时,就会进行冒泡传递,被document这个根节点接收click事件,根节点发生的情况就是只要点击根节点,包括它的子元素,这个<div>都会被隐藏。而这个<div>又属于document,所以在点击<div>本身时也会隐藏。
相当于一个循环,根节点自动给它的子元素添加相同的事件,而子元素反过来又会发生冒泡来影响根节点,根节点又会对子元素本身产生影响,相互影响。
如果还想增加一个链接:<a href="#" id="btn_show">显示层</a>,用它来控制该层显示出来,那么仍然需要在该链接被点击时阻止冒泡事件的发生,加上以下代码:
document.getElementById('btn_show').onclick = function(e) {
document.getElementById('need_hide').style.display = 'block';
stopPropagation(e);
}