javascript中的事件模型

事件模型：

1、DOM 0 级模型

• DOM 0 级模型叫原始事件模型，在这个模型中，事件不会传播，即没有事件流的概念；

一、 HTML 代码中直接绑定：

<input type='button' onclock='fun()'>

二、 通过js代码指定的属性

var btn = document.getElementById('.btn')
btn.onClick= fun

• 移除监听函数

  btn.onClick = null
  

IE 事件模型：

• IE事件模型有两个过程

  • 事件处理阶段（target，phase），事件到达目标元素，触发目标元素的监听函数
  • 事件冒泡阶段（bubbling，phase）事件从目标元素冒泡到document，依次检查经过的节点是否绑定了事件监听函数，如果有就执行

• 事件绑定监听函数

  attachEvent(eventType, handler)
  

• 时间移除监听函数

  detachEvent(eventType, handler)
  

• 参数

  • eventType指定的事件类型【这里要加上on】
  • handler是事件处理函数

DOM 2 级模型

• DOM2 级模型，是W3C 标准模型，现在浏览器【除IE6-8之外的浏览器】都支持该模型，子啊时间模型中，一次事件共有三个过程：

  • 事件捕获阶段【capuring,phase】,事件从document一直向下传播到目标元素，依次检查经过的节点，是否绑定了事件监听函数，如果有则执行
  • 事件处理阶段【target,phase】事件到达目标元素，触发目标元素的监听函数
  • 事件冒泡阶段【bubbling,phase】.事件从目标元素冒泡到document，依次检查经过的节点是否绑定了事件监听函数，如果有就执行

• 事件绑定监听函数

  addEventListener(eventType, handler, useCapture)
  

• 事件移除监听函数

  removeEventListener(eventType, handler, useCapture)
  

• 参数

  • eventType 指定的时间类型不要加on
  • handler 是事件处理函数
  • useCaptrue 是 一个布尔值用于指定是否在捕获阶段进行处理，一般设置为false，与IE浏览器保持一直；

JQuery Event模型

• JQuery解决的一个主要问题就是浏览器的兼容问题，它有自己的事件模型实现方式

  • 重定义了JQuery.Event对象, 统一了事件属性和方法, 统一了事件模型
  • 可以在一个事件类型上添加多个事件处理函数, 可以一次添加多个事件类型的事件处理函数
  • 支持自定义事件(事件命名空间)
  • 提供了toggle, hover组合事件
  • 提供了one, live-die, delegate-undelegate
  • 提供了统一的事件封装, 绑定, 执行, 销毁机制
  • $(document).ready();