windcanvas/dom-event

HTML+CSS+JavaScript详细讲解DOM

DOM-event

HTML+CSS+JavaScript详细讲解DOM 1、理解事件流

2、使用事件处理程序

3、不同的事件类型

一、事件流

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

• IE的事件流是事件冒泡流

• Netscape的事件流是事件捕获流

1、事件冒泡

事件冒泡，即事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收，然后逐级向上转播至最不具体的节点(文档)。

2、事件捕获

事件捕获的**是不太具体的节点应该更早接收到事件，而最具体的节点最后接收到事件。

二、事件处理程序

1、HTML事件处理程序

2、DOM0级事件处理程序

较传统的方式：把一个函数赋值给一个事件的处理程序属性用得比较多的方法 (简单 跨浏览器的优势)

3、DOM2级事件处理程序

DOM2级事件定义了两个方法：

用于处理指定和删除事件处理程序的操作：

addEventListener()和removeEventListener()。

它们都接收三个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值 。

4、IE事件处理程序

attachEvent()添加事件

detachEvent()删除事件

这两个方法接收相同的两个参数：事件处理程序名称与事件处理函数

不使用第三个参数的原因：IE以及更早的浏览器版本只支持事件冒泡！

5、跨浏览器的事件处理程序

三、事件对象

事件对象event

1、DOM中的事件对象

(1)、type:获取事件类型

(2)、target：事件目标

(3)、stopPropagation() 阻止事件冒泡

(4)、preventDefault() 阻止事件的默认行为

2、IE中的事件对象

(1)、type:获取事件类型

(2)、srcElement：事件目标

(3)、cancelBubble=true阻止事件冒泡

(4)、returnValue=false阻止事件的默认行为