js事件机制

事件模型

javascript的事件从window->document>目标元素>document>window，整个一个循环。从window到目标元素这部分叫做捕获阶段，从模板元素到window叫做冒泡阶段。
如下图（网络盗图）

stopPropagation

这个方法能阻止事件继续传播，这就注定了它只能阻止事件在冒泡阶段传播，至于捕获阶段注册的父级事件还是会执行。

<div id="father">
    <h4>事件</h4>
    <div id="son">
        <span>儿子</span>
    </div>
</div>
<script type="text/javascript">
window.onload = function(){
    var father = document.getElementById('father');
    father.addEventListener("click",function(){
        console.log('father click');
    },true);//在捕获阶段注册事件
    var son= document.getElementById('son');
    son.addEventListener("click",function(e){
        e.stopPropagation();
        console.log('son click');

    });//在冒泡阶段注册
}
</script>

在这种情况下子元素无论注册什么类型的事件，父亲节点总会执行事件。这是为什么呢

前面说到事件执行是从上到下，再从下到上，父亲节点在前面总会先执行，等父亲节点事件执行完了再轮到子节点执行，子节点执行完了之后，事件从下往上传播到父亲节点，如果这个时候父亲节点又注册了冒泡事件，则会继续执行（如果子节点事件中使用了stopPropagation方法，则不会执行父亲节点事件），一直到顶级。

preventDefault方法

这个方法只是阻止事件的默认行为，跟事件传播关系不大。