事件捕获和事件冒泡（前端面试题系列）

DOM事件模型

DOM事件模型分为两种：事件捕获和事件冒泡。

事件捕获以点击事件为例，同类型事件会由根→目标的祖元素→目标的父元素→目标元素

事件冒泡和事件捕获截然相反。从内到外依次触发：目标元素→目标元素的父元素→目标元素的祖元素→根

事件传播

事件捕获和事件冒泡都有事件传播阶段，传播阶段就是事件从触发开始到结束的过程。优先级：先捕获，在冒泡。

两种传播方式的来源：W3C推行的DOM2级事件之前网景和IE在打架，网景用的事件传播方式是捕获，IE用的事件传播方式是冒泡

1、什么是事件冒泡，他是如何工作的

在一个对象上触发某类事件（比如单机onclik事件）这个事件会向这个对象的父级对象传播，从里到外，直至被他处理（父级对象所有同类事件都将被激活），或者他到达了对象层次的最顶层，即document对象（有些浏览器是window）

2、阻止事件冒泡的方法

（1）W3C方法是：event.stopPropagation()；事件处理过程中，阻止冒泡事件，但不会阻止默认行为（跳转至超链接）

（2）IE则是使用event.cancelBubble = true阻止事件冒泡

（3）returnfalse；jq里面事件处理过程中，阻止冒泡事件，也阻止默认行为（不跳转超链接）

封装方法：

function getStyle(elem, type) {
    // 一般浏览器
    if (window.getComputedStyle) {
        return window.getComputedStyle(elem, null)[type]
    } else {
        // ie浏览器
        return elem.currentStyle[type]
    }
}
console.log(getStyle)

阻止默认行为：

W3C的方法是e.preventDefault()，IE则是使用e.returnValue = false

// 假定有链接
<a href="http://hujiapeng.com/" id="testA">hujiapeng.com</a>
var a = document.getElementById("testA");
a.onclick = function (e) {
    if (e.preventDefault) {
        e.preventDefault();
    } else {
        window.Event.returnValue == false;
    }
}