事件模型:
1、DOM 0 级模型
- DOM 0 级模型叫原始事件模型,在这个模型中,事件不会传播,即没有事件流的概念;
一、 HTML 代码中直接绑定:
<input type='button' onclock='fun()'>
1
二、 通过js代码指定的属性
var btn = document.getElementById('.btn')
btn.onClick= fun
12
-
移除监听函数
btn.onClick = null 1
IE 事件模型:
-
IE事件模型有两个过程
- 事件处理阶段(target,phase),事件到达目标元素,触发目标元素的监听函数
- 事件冒泡阶段(bubbling,phase)事件从目标元素冒泡到document,依次检查经过的节点是否绑定了事件监听函数,如果有就执行
-
事件绑定监听函数
attachEvent(eventType, handler) 1
-
时间移除监听函数
detachEvent(eventType, handler) 1
-
参数
- eventType指定的事件类型【这里要加上on】
- handler是事件处理函数
DOM 2 级模型
-
DOM2 级模型,是W3C 标准模型,现在浏览器【除IE6-8之外的浏览器】都支持该模型,子啊时间模型中,一次事件共有三个过程:
- 事件捕获阶段【capuring,phase】,事件从document一直向下传播到目标元素,依次检查经过的节点,是否绑定了事件监听函数,如果有则执行
- 事件处理阶段【target,phase】事件到达目标元素,触发目标元素的监听函数
- 事件冒泡阶段【bubbling,phase】.事件从目标元素冒泡到document,依次检查经过的节点是否绑定了事件监听函数,如果有就执行
-
事件绑定监听函数
addEventListener(eventType, handler, useCapture) 1
-
事件移除监听函数
removeEventListener(eventType, handler, useCapture) 1
-
参数
- eventType 指定的时间类型不要加on
- handler 是事件处理函数
- useCaptrue 是 一个布尔值用于指定是否在捕获阶段进行处理,一般设置为false,与IE浏览器保持一直;
JQuery Event模型
- JQuery解决的一个主要问题就是浏览器的兼容问题,它有自己的事件模型实现方式
- 重定义了JQuery.Event对象, 统一了事件属性和方法, 统一了事件模型
- 可以在一个事件类型上添加多个事件处理函数, 可以一次添加多个事件类型的事件处理函数
- 支持自定义事件(事件命名空间)
- 提供了toggle, hover组合事件
- 提供了one, live-die, delegate-undelegate
- 提供了统一的事件封装, 绑定, 执行, 销毁机制
- $(document).ready();