DOM0事件、 DOM2事件、DOM3事件、IE事件以及几种事件绑定方式对比

DOM0事件：

特点：

• 所有DOM0事件都有on作为开头

   <input onclick="test()"/>
  

• 清理DOM0事件时，只需给该事件赋值为 null

    input.onclick = null
  

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

• 不存在兼容性问题

常见的事件：

• onchange 域的内容被改变（下拉列表选择改变）
• onclick 当用户点击某个对象时调用的事件
• ondblclick 当用户双击某个对象时调用的事件
• onfocus 元素获得焦点
• onblur 元素失去焦点
• onkeydown 键盘上某个按键被按下
• onkeyup 键盘上某个按键被松开
• onkeypress 键盘上某个按键被按下并松开
• onload 一张页面或一幅图像完成加载
• onmousedown 鼠标按钮被按下
• onmouseup 鼠标按键被松开
• onmouseover 鼠标移到某元素之上
• onmouseout 鼠标从某元素移开
• onmousemove 鼠标被移动
• onreset 重置按钮被点击， 引发Form重置事件
• onresize 窗口（body）或框架被重新调整大小
• onsubmit 确认(提交)按钮被点击， 引发Form提交事件
• onunload （body）用户退出（刷新）页面

DOM2事件：

特点：

• DOM2 事件是通过 addEventListener 绑定的事件

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

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

  function a() {   ...   }
  function b() {   ...   }
  input.addEventListener( "click" ,a)
  input.addEventListener( "click" ,b)
  

• 清除 dom2 事件时，使用 removeEventListener

  input.removeEventListener( "click" ,a)    //不能移除匿名添加的函数
  

三个参数：

• 第一个参数是事件名（如click）
• 第二个参数是事件处理程序函数
• 第三个参数如果是true则表示在捕获阶段调用，为false表示在冒泡阶段调用

事件：事件捕获阶段、处于目标阶段和事件冒泡阶段

事件冒泡和事件捕获

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

DOM3事件：

DOM3级事件在DOM2级事件的基础上添加了更多的事件类型

全部类型：

• UI事件，当用户与页面上的元素交互时触发，如：load、scroll
• 焦点事件，当元素获得或失去焦点时触发，如：blur、focus
• 鼠标事件，当用户通过鼠标在页面执行操作时触发如：dbclick、mouseup
• 滚轮事件，当使用鼠标滚轮或类似设备时触发，如：mousewheel
• 文本事件，当在文档中输入文本时触发，如：textInput
• 键盘事件，当用户通过键盘在页面上执行操作时触发，如：keydown、keypress
• 合成事件，当为IME（输入法编辑器）输入字符时触发，如：compositionstart
• 变动事件，当底层DOM结构发生变化时触发，如：DOMsubtreeModified
• 同时DOM3级事件也允许使用者自定义一些事件
  • cancelBubble可以取消事件冒泡
  • stopPropagation可以取消事件冒泡和下沉

几种事件绑定方式对比

	DOM	DOM2	IE
事件名	事件名以“on”开头	事件名前没有“on”	事件名以“on”开头
冒泡	支持	支持，最后属性设为false	支持
捕获	不支持	支持，最后属性设为true	不支持
阻止冒泡	event.stopPropagation()	event.stopPropagation( )	event.cancelBubble=true
多处理程序注册	不支持	支持	支持,执行顺序与注册顺序相反
删除事件绑定	设置为空或null	用处理程序名删除,匿名绑定不能删除	用处理程序名删除,匿名绑定不能删除
兼容性	全兼容	非IE	IE