事件

事件是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) {

//.....

}

转载于:https://www.cnblogs.com/johnwonder/archive/2010/02/22/1671545.html

JavaScript 学习笔记之事件相关推荐

JavaScript 学习笔记 - 挂载事件 Demo
JavaScript 学习笔记 - 挂载事件 Demo 例子 addEventListener 监听事件挂载事件的同时带上参数 dispatchEvent 触发事件 removeEventListe ...
JavaScript学习笔记06【高级——JavaScript中的事件】
w3school 在线教程:https://www.w3school.com.cn JavaScript学习笔记01[基础--简介.基础语法.运算符.特殊语法.流程控制语句][day01] JavaS ...
JavaScript学习笔记04【高级——DOM和事件的简单学习、BOM对象】
w3school 在线教程:https://www.w3school.com.cn JavaScript学习笔记01[基础--简介.基础语法.运算符.特殊语法.流程控制语句][day01] JavaS ...
JavaScript学习笔记（三）---事件、正则表达式、ES6、运动
JavaScript学习笔记(三)---事件.正则表达式.ES6.运动 27.insertbefore 28.滚动条及事件 29.事件及事件对象 30.鼠标事件对象的属性 31.案例:图片随鼠标移动 ...
JavaScript学习笔记（五）---cookie、Proxy、服务器、PHP语言、http协议、同步异步、事件轮循机制、ajax编写、接口
JavaScript学习笔记(五)---cookie.Proxy.服务器.PHP语言.http协议.同步异步.事件轮循机制.ajax编写.接口 1.cookie 1.1cookie概念 1.2cook ...
前端获取div里面的标签_web前端教程JavaScript学习笔记DOM
web前端教程JavaScript学习笔记 DOM一DOM(Document Object Model): 文档对象模型其实就是操作 html 中的标签的一些能力我们可以操作哪些内容获取一个元素 ...
JavaScript学习笔记07【6个经典案例——电灯开关、轮播图、自动跳转首页、动态表格、表格全选、表单验证】
Java后端学习路线笔记汇总表[黑马程序员] w3school 在线教程:https://www.w3school.com.cn JavaScript学习笔记01[基础--简介.基础语法.运算符. ...
JavaScript学习笔记05【高级——DOM对象】
w3school 在线教程:https://www.w3school.com.cn JavaScript学习笔记01[基础--简介.基础语法.运算符.特殊语法.流程控制语句][day01] JavaS ...
JavaScript学习笔记02【基础——对象（Function、Array、Date、Math）】
w3school 在线教程:https://www.w3school.com.cn JavaScript学习笔记01[基础--简介.基础语法.运算符.特殊语法.流程控制语句][day01] JavaS ...

JavaScript 学习笔记之事件

一、事件流

1、冒泡型事件

2、捕获型事件

3、DOM事件流

二、事件监听函数

1、IE

2、DOM

三、事件对象

JavaScript 学习笔记之事件相关推荐

最新文章

热门文章

JavaScript 学习笔记 之事件

一、事件流

1、冒泡型事件

2、捕获型事件

3、DOM事件流

二、事件监听函数

1、IE

2、DOM

三、事件对象

JavaScript 学习笔记 之事件相关推荐

最新文章

热门文章

JavaScript 学习笔记之事件

JavaScript 学习笔记之事件相关推荐