事件捕获和事件冒泡

        如果一个节点和它的一个父节点都绑定了相同事件类型的回调,当事件触发时哪个回调会先执行?尽管网景和微软的处理方式不一致,也不要太过担心。

        Netscape 4 支持事件捕捉( capturing ),从顶层的父节点开始触发事件,从外到内传播。

        微软则支持事件冒泡( bubbling ),从最内层的节点开始触发事件,逐级冒泡直到顶层节点,从内向外传播。

        我认为事件冒泡看起来更合理一些,这也是我们日常开发所用的事件模型。W3C 对此做了让步,将对这两种事件模型的支持都加入标准规范之中。根据 W3C 模型,事件首先被目标元素所捕捉,然后向上冒泡。
        你 可 以 自 行 选 择 要 注 册 的 事 件 处 理 程 序 的 调 用 类 型, 捕 捉 或 冒 泡, 通 过 给addEventListener() 传入第 3 个参数 useCapture 来设置。如果 addEventListener() 的最后一个参数是 true ,事件处理程序以捕捉模式触发 ;如果是 false ,事件处理程序以冒泡模式触发 :
button.addEventListener("click", function(){ /* ... */ }, false);                         // 给最后一个参数传入 false,来设置事件冒泡
        大多数情况下我们都在使用冒泡模式,如果对此不太确定,可以给 addEventListener()的最后一个参数传入 false 。

        当事件冒泡时,可以通过 stopPropagation() 函数来终止冒泡,这个函数是 event 对象中的方法。比如这段代码,任何父节点的事件回调都不会触发 :

  button.addEventListener("click", function(e){
      e.stopPropagation();
     /* ... */
  }, false);

        此外,一些类库比如 jQuery 还支持 stopImmediatePropagation() 函数,用来阻止后续所有的事件触发——哪怕这些事件是注册在同一个节点元素上的也不例外。浏览器同样给事件赋予了默认行为。比如,当你点击一个链接时,浏览器的默认行为是载入新页面,当点击一个复选框时,浏览器会将其选中(或取消选中)。在事件传播阶段(之后)会触发这些默认行为,在任何一个事件处理程序中都可以阻止默认行为。可以通过调用 event 对象的 preventDefault() 函数来阻止默认行为,同样也可以通过在回调中返回 false 来实现同样的效果 :

bform.addEventListener("submit", function(e){
    /* ... */
    return confirm("Are you super sure?");
}, false);

        如果调用 confirm() 返回 false(用户点击了对话框的取消按钮),这个事件回调函数就返回 false,这样就会取消事件,阻止表单的提交。