DOM事件

Javascript与HTML之间的交互是通过事件来实现的。事件，就是文档或浏览器窗口中发 生的一些特定的交互瞬间。

比如:

点击一个DOM元素

键盘按下一个键
输入框输入内容
页面加载完成

事件流

事件流描述的是从页面中接收事件的顺序。

IE的事件流是事件冒泡流(event bubbling)，即事件开始时由最具体的元素(文档中嵌套 层次最深的那个节点)接收，然后逐级向上传播到较为不具体的节点(文档)。

Netscape的事件流是事件捕获流(event capturing)。事件捕获的思想是不太具体的节点应该 更早接收到事件，而最具体的节点应该最后接收到事件。

DOM2级事件规定的事件流包括三个阶段:事件捕获阶段、处于目标阶段和事件冒泡阶段。

事件注册与触发

事件注册

取消事件注册

事件触发

浏览器兼容型(IE6/7/8)

事件注册与取消:attachEvent() / detachEvent()

这两个方法接受相同的2个参数:事件处理程序名称、事件处理程序函数

事件触发:fireEvent(e)

no capture: IE8及更早版本只支持事件冒泡，不支持事件捕获。

浏览器兼容型

事件对象

在触发DOM上的某个事件时，会产生一个事件对象event，这个对象中包含着所有与事件有关的信息。

事件对象属性:

事件对象方法:

阻止事件传播

默认行为

Event.preventDefault() (W3C)

Event.returnValue=false (IE)

事件分类

Event

Window对象

Window对象上的Event事件包括:

Image对象

Image对象上的Event事件包括

UIEvent

MouseEvent

MouseEvent对象属性

MouseEvent顺序

从元素A上方移过:

-mousemove -> mouseover(A) -> mouseenter(A) ->mousemove(A) -> mouseout(A) -> mouseleave(A)
点击元素
-mousedown -> [mousemove] -> mouseup -> click
例子-拖拽div
HTML部分:

<div
 id=”
div1”
></div>

CSS部分:

JS部分代码:

WheelEvent-滚轮事件

WheelEvent对象属性

FocusEvent-焦点事件

FocusEvent属性

relatedTarget

InputEvent-输入事件

onpropertychange(IE)

KeyboardEvent-键盘事件

KeyboardEvent对象属性

事件代理

将事件注册到元素的父节点上。

事件代理也被称为“事件委托”。事件委托利用了事件冒泡，只指定一个事件处理程序，就 可以管理某一类型的所有事件。