dom0、dom2、dom3事件

dom0 事件的特点：

1. dom0 事件就是直接通过 onclick 绑定到 html上的事件

    <input onclick="xx"/>

     或者

     input.onclick = function(){  ...  }

2. 清理dom0 事件时，只需给该事件赋值为 null

    input.onclick = null

3. 同一个元素的同一种事件只能绑定一个函数，否则后面的函数会覆盖之前的函数

4. 不存在兼容性问题

---

dom2 事件的特点：

1. dom2 事件是通过 addEventListener 绑定的事件

2.同一个元素的同种事件可以绑定多个函数，按照绑定顺序执行

  function a() {   ...   }

  function b() {   ...   }

   input.addEventListener( "click" ,a)

    input.addEventListener( "click" ,b)

3.清除 dom2 事件时，使用 removeEventListener

     input.removeEventListener( "click" ,a)

 dom2 级事件有三个参数： 第一个参数是事件名（如click）；

　　　　　　　　　            第二个参数是事件处理程序函数；

　　　　　　　　                第三个参数如果是true则表示在捕获阶段调用，为false表示在冒泡阶段调用。

addEventListener():可以为元素添加多个事件处理程序，触发时会按照添加顺序依次调用。

removeEventListener():不能移除匿名添加的函数。

DOM2 包含3个事件：事件捕获阶段、处于目标阶段和事件冒泡阶段

    <span>

             <a>  </a>

    </span>

点击a后capturing(捕捉)阶段事件传播会从document-> span->a，然后发生在a，最后bubbling(冒泡)阶段事件传播会从a->span->document

---

事件冒泡和事件捕获

        DOM2级事件处理添加进去的事件，我们可以控制事件的冒泡或是捕获过程。当addEventListener方法的第三个参数为true时，表示只进行事件捕获，不执行事件冒泡，再捕获的过程中，触发途径标签的对应事件函数。当第三个参数为false，表示执行事件冒泡的过程（默认情况）

---

DOM3级事件

       DOM3级事件在DOM2级事件的基础上添加了更多的事件类型，全部类型如下：

       UI事件，当用户与页面上的元素交互时触发，如：load、scroll

       焦点事件，当元素获得或失去焦点时触发，如：blur、focus

       鼠标事件，当用户通过鼠标在页面执行操作时触发如：dbclick、mouseup

       滚轮事件，当使用鼠标滚轮或类似设备时触发，如：mousewheel

       文本事件，当在文档中输入文本时触发，如：textInput

        键盘事件，当用户通过键盘在页面上执行操作时触发，如：keydown、keypress

        合成事件，当为IME（输入法编辑器）输入字符时触发，如：compositionstart

        变动事件，当底层DOM结构发生变化时触发，如：DOMsubtreeModified

         同时DOM3级事件也允许使用者自定义一些事件。

注意：

1）、cancelBubble可以取消事件冒泡；

2）、stopPropagation可以取消事件冒泡和下沉

---

http://www.jb51.net/article/99094.htm