您的位置:首页 > 其它

理解事件流及事件对象

2015-10-24 12:35 274 查看

理解事件流及事件对象

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

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

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表阻止)
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: