事件捕获和事件冒泡

DOM2级方法添加事件处理程序的好处是可以添加多个事件处理程序

DOM事件流：

捕获型事件

当你使用捕获型事件时

               | |
---------------| |-----------------
| element1     | |                |
|   -----------| |-----------     |
|   |element2   /          |     |
|   -------------------------     |
|        Event CAPTURING          |
-----------------------------------

：元素1的事件处理函数首先被触发，元素2的事件处理函数最后被触发

冒泡型事件

当你使用冒泡型事件时

               / 
---------------| |-----------------
| element1     | |                |
|   -----------| |-----------     |
|   |element2  | |          |     |
|   -------------------------     |
|        Event BUBBLING           |
-----------------------------------

：元素2 的处理函数首先被触发，元素1其次

W3C 模型

W3c明智的在这场争斗中选择了一个择中的方案。任何发生在w3c事件模型中的事件，首是进入捕获阶段，直到达到目标元素，再进入冒泡阶段

                 | |  / 
-----------------| |--| |-----------------
| element1       | |  | |                |
|   -------------| |--| |-----------     |
|   |element2     /  | |          |     |
|   --------------------------------     |
|        W3C event model                 |
------------------------------------------

作为一个web开发者，你可以选择是在捕获阶段还是冒泡阶段绑定事件处理函数，这是通过addEventListener()方法实现的，如果这个函数的最后一个参数是true，则在捕获阶段绑定函数，反之false，在冒泡阶段绑定函数。

浏览器兼容写法：
function bind(obj, evname, fn) { /*由于IE8以及更早版本只支持事件冒泡，所以不需要第三个参数*/
    if (obj.attachEvent) {
        obj.attachEvent('on' + evname,
                function () {
                    fn.call(obj) /*在使用attachEvent方法的情况下，事件处理程序会在全局作用域中运行，因此this指向window,所以需要修改this指向为当前对象*/
                }
        )
    } else {
        obj.addEventListener(evname, fn, false)
    }
}
 

1.阻止事件冒泡&默认事件：
• 在W3c中，使用stopPropagation（）方法
• 在IE下设置cancelBubble = true；
  在捕获的过程中stopPropagation（）；后，后面的冒泡过程也不会发生了~
2.阻止事件的默认行为，例如click <a>后的跳转~
• 在W3c中，使用preventDefault（）方法；
• 在IE下设置window.event.returnValue = false;