手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >JavaScript 学习笔记(十五)
JavaScript 学习笔记(十五)
摘要:事件事件是DOM(文档对象模型)的一部分。事件流就是事件发生顺序,这是IE和其他浏览器在事件支持上的主要差别。一、事件流1、冒泡型事件IE上...

事件

事件是DOM(文档对象模型)的一部分。事件流就是事件发生顺序,这是IE和其他浏览器在事件支持上的主要差别。

一、事件流

1、冒泡型事件

IE上的解决方案就是冒泡型事件,它的基本思想是从最特定的目标到最不特定的事件目标(document对象)的顺序触发。

过程:按照DOM的层次结构像水泡一样不断上升至顶端。(从里面的div触发事件再到body,到html最后直到document最顶端)。

2、捕获型事件

可以说跟冒泡是正好相反的,事件从最不精确的对象开始触发,然后直到最精确。

3、DOM事件流

DOM同时支持以上两种事件模型,其中捕获型事件先发生,从document对象开始,最后在document对象结束。

二、事件监听函数

1、IE

每个函数和window对象都有两个方法:

attachEvent()方法:附加事件处理函数

[Object].attachEvent(“事件名”,处理函数fnHandler);

该方法有两个参数。

var fnClick = function() {

alert("你点击了ID为div1的DIV");

}

var oDiv = document.getElementById("div1");

oDiv.attachEvent("onclick", fnClick);

可以附加多个处理函数。

detachEvent()方法:分离移除事件处理函数

2、DOM

addEventListener()方法:分配附加事件处理函数

[Object]. addEventListener (“事件名”,处理函数fnHandler,Boolean);

该方法有三个参数(“事件名”,“分配的函数”,处理函数是冒泡阶段还是捕获阶段)

如果事件处理函数是用于捕获阶段,则第三个参数是true,用于冒泡阶段则为false

var fnClick = function() {

alert("Clicked!");

}

var oDiv = document.getElementById("div");

oDiv.addEventListener("click", fnClick, false);

oDiv.removeEventListener("click", fnClick, false);

可以附加多个处理函数。

removeEventListener()方法:移除事件处理函数

三、事件对象

包含三个方面的信息:

1、引起事件的对象:IE中就是window.event,DOM中是处理函数的为唯一参数;

2、事件发生时的鼠标信息;

3、事件发生时的键盘信息。

IE事件对象

在IE中,事件对象是window对象的一个属性event。也就是说,事件处理函数必须这样访问事件对象:

oDiv.onclick = function() { var oEvent = window.event; }oDiv.onclick = function(){ var oEvent = window.event;}

尽管是window对象的属性,event对象还是只能在事件发生时访问。所有的事件处理函数执行完毕后销毁。

DOM标准的事件对象

event对象必须作为唯一的参数传给事件处理函数。所以,在DOM兼容的浏览器(如Mozilla,Safari和Opera)中访问事件对象,要这么做:

oDiv.onclick = function() {

var oEvent = arguments[0];

}

//也可以这样

oDiv.onclick = function(oEvent) {

//.....

}

【JavaScript 学习笔记(十五)】相关文章:

JavaScript中的函数嵌套使用

JavaScript AOP编程实例

Javascript生成全局唯一标识符(GUID,UUID)的方法

基于JavaScript实现智能右键菜单

JavaScript TO HTML 转换

JavaScript常用数组算法小结

浅析JavaScript中的事件机制

JavaScript中的parse()方法使用简介

JavaScript中反正弦函数Math.asin()的使用简介

JavaScript事件委托实例分析

精品推荐
分类导航