理解事件流及事件对象

理解事件流及事件对象

事件流：描述的是从页面中接收事件的顺序，包括事件冒泡流和事件捕获流。

       现在大部分浏览器都使用的事件冒泡流。

1. HTML事件处理程序

在html代码中直接镶嵌js代码，实现事件处理程序。

 

2. DOM0级事件处理程序

先把元素取出来，然后单独在js块中以添加属性的形式添加事件（最为常用）。

 

3. DOM2级事件处理程序（IE不兼容）

定义了2中方法，用于处理和删除指定事件处理程序的操作

addEventListener()  和   removeEventListener();

接收三个参数：要处理的事件名，事件处理的程序，布尔值（一般设为false）

注意：事件名前的on要去掉（如click, mouseover等）

          参数中的布尔值true表示事件流为捕获流，事件在捕获阶段执行程序

         false表示事件流为冒泡流，一般浏览器都为事件冒泡流

4. IE事件处理程序

attachEvent()            添加事件

detachEvent()            删除事件

接收两个参数：要处理的事件名，事件处理程序

注意：事件名前的on必须保留（如onclick, onmouseover等）

 

支持IE事件处理程勋的浏览器有：IE、Opera

 

5. 跨浏览器事件处理程序

将各个事件处理程序加以封装

对封装好的跨浏览器事件处理程序进行调用：

eventUtil.addHandler(btn1,”click”,showMess);

function showMess(){alert(“btn1的元素类型是：” + btn1.type);}

事件对象：

在触发DOM上的事件时，都会产生一个对象（事件对象event）

function showEvent( event ){   alert(event.type);    }       //返回对象类型

 

1. DOM中的事件对象

（1）type属性                     用于获取事件类型

（2）target属性                           用于获取事件对象的目标

（3）stopPropagation()方法            阻止事件冒泡

（4）preventDefault()方法              阻止事件默认行为

 

2. IE中的事件对象

（1）type属性                            用于获取对象类型

（2）srcElement属性                        获取对象目标

（3）cancelBubble属性       阻止事件冒泡（true表阻止）

（4）returnValue属性                   阻止事件默认行为（false表阻止）