3种事件模型：

原始事件模型

DOM事件模型

IE事件模型


原始事件模型（0级事件模型）

1、事件处理程序被定义为函数实例，然后绑定到DOM元素事件对象上，实现事件的注册。


例子：var btn = document.getElementsByTagName("input")[0];

btn.onclick = function(){

函数体....

}

2、也可以把特定的事件处理函数的函数体直接赋给DOM元素的事件属性


例子：<input type="button" οnclick="alert('hello')"

0级事件模型的优缺点：

优点：使用方便

缺点：元素属性被用来存储事件处理函数的引用，

所以每个元素的每个事件只能注册一个事件处理程序。


DOM事件模型：

1、注册事件

addEventListener(）方法：

语法：addEventListener("type",function,useCapture)

参数：type：是要绑定的事件类型，但是这里没有“on”前缀。

如onclick事件应写作：click

function：事件处理函数，自带一个默认参数，引用event对象

usrCapture：是一个布尔值，

为true时：在事件传播的捕捉阶段触发响应；

为false时：在事件传播的冒泡阶段触发响应

例子：var btn = document.getElementsByTagName("input")[0];

      btn.addEventListener("click",function(){

     btn.value = event.type;

          },true)

2、事件传播

DOM 2级事件模型中，一旦事件被触发，事件流首先从DOM树的顶部（文档节点#document）向下传播，直到目标节点，然后再从目标节点向上传播到DOM树顶。

从上到下的过程被称为捕获阶段，

从下到上的过程被称为冒泡阶段。

终止事件流的冒泡：stopPropagegation()方法


例子：var btn = document.getElementsByTagName("input")[0];

        do{

  btn.addEventListener("click",function(){

  div.innerHTML += " "+this.nodeName+" ";

  },true)

  btn = btn.parentNode;

  }while(btn);

上例中，第三个参数设置为true，注册的是捕获型事件。

所以点击按钮，事件触发顺序为：#document->html->body->button

如果，第三个参数设置为false，注册的是冒泡型事件。

所以点击按钮，事件的触发顺序为：button->body->html->#document


3、销毁事件

removeEventListener()方法：

注意：removeEventListener（）和addEventListener()的第三个参数要保持一致

否则销毁操作是无效的。


IE事件模型：

1、注册事件：

attachEvent()方法：

语法：attachEvent("type",function)

参数：type：元素事件类型，如：onclick

function：事件处理函数

注意：IE时间模型中，事件处理函数中的this指针总是指向window对象，

0型事件模型中，事件处理函数中的this指针总是指向当前注册事件的对象

2、事件传播：

IE事件模型：事件流总是从目标对象向上传递知道树顶，即冒泡型。

终止事件流的冒泡：设置event对象的cancelBubble属性


3、注销事件：

detachEvent()方法


事件处理机制：

Event对象：

当触发事件时，浏览器会自动创建一个event对象，

event对象实际上是Event类型的实例，

默认状态下他会被作为参数传递给事件处理函数


实现访问的兼容性：

var event = event||window.event；


注意：IE和DOM标准浏览器返回的event对象的属性和方法存在差异！！！