【记录】事件冒泡和事件捕获

1、概念理解

所有浏览器中，都支持事件冒泡，即事件由子元素向祖先元素传播的，就像气泡从水底向水面上浮一样。把事件捕获和冒泡的过程统称为事件的传播。

而在像firefox,chrome,safari这类所谓的标准浏览器中，事件传播还有个阶段，那就是捕获阶段，先发生捕获的过程，再发生冒泡的过程。这个很少有用武之地，所以被人疏忽遗忘也在所难免了，不常用不代表它不存在。

（捕获阶段是一个和冒泡阶段完全相反的过程，即事件由祖先元素向子元素传播，在 IE，opera浏览器中，是不存在这个阶段的。）

从各浏览器提供的注册事件监听的方法中可见一斑：

①attachEvent（适用于ie,opera） 有两个参数，attachEvent(”on”+type,fn)；

②addEventListener（适用于所谓标准浏览器）则有三个参 数，addEventListener(type,fn,boolean)，第三个参数boolean，就是决定注册事件发生在捕获阶段还是冒泡阶段，具体参考如下：

true : 捕获阶段

false : 冒泡阶段

 

2、取消事件冒泡的方法：

只需加个stopBubble方法，即可取消事件冒泡

如：

obj1.onclick = function(){
alert('我点击了obj1');
}
obj2.onclick = function(e){
alert('我点击了obj2');
stopBubble(e);
}

什么时候需要阻止事件冒泡？事实上，现在绝大多数情况下都可以不必在意它。但是当你开始开发动态应用程序（尤其是需要处理键盘和鼠标）的时候，就有这个必要了。

 

 

 

3、另外，阻止事件的传播的方法：

• 在W3c中，使用stopPropagation（）方法
• 在IE下设置cancelBubble = true；

在捕获的过程中stopPropagation()；后，后面的冒泡过程也不会发生了~

 

【收藏一个兼容多浏览器的阻止事件冒泡的函数】
function stopBubble(e){
    //如果传入了事件对象.那么就是非IE浏览器
    if(e && e.stopPropagation){
        //因此它支持W3C的stopPropation()方法
        e.stopPropagation();
    }
    else
    {
        //否则,我们得使用IE的方式来取消事件冒泡
        window.event.cancelBubble = true;
    }
}

 

 

4、阻止事件的默认行为：

• 在W3c中，使用preventDefault()方法；
• 在IE下设置window.event.returnValue = false;

不是所有的事件都能冒泡，例如：blur、focus、load、unload。事件冒泡和捕获应用起来，还有各种问题，有待研究！

 

 拓展学习：

W3SCHOOL 的HTML DOM Event 对象：

http://www.w3school.com.cn/htmldom/dom_obj_event.asp

JS事件、排错、调试、事件捕获：

http://www.cnblogs.com/kiant71/archive/2010/05/29/1751986.html 

 

 

 

参考文章：

http://www.cnblogs.com/zhenn/archive/2011/02/20/1959059.html（振之博文）

http://xiaoc.name/?p=111（90后所写博文）