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方法

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