第七章

JavaScript事件

1. 什么是事件

所谓事件，就是用户和浏览器上的网页进行交互的一种行为。

快速入门案例：

 

页面装载时，是一个事件，用户点击页面上的某个按钮时，也是一个事件。在早期拨号上网的年代，如果所有的功能都放在服务器端进行处理的话，效率相当之低。所以JavaScript最初被设计出来就是用来解决这个问题的。通过允许一些功能在客户端上发生，以节省到服务器的往返时间。

 

 

1. 事件流

所谓事件流，就是指当我们在一个元素上触发了一个事件以后，外层的元素（包含了被点击的元素的元素）也同样响应这个事件，如果还有外层元素，同样也响应这个事件。

打个比方说：你在地方法院要上诉一件案子，如果地方没有处理此类案件的法院，地方相关部门会帮你继续往上级法院上诉，比如从市级到省级，直至到中央法院，最终使你的案件得以处理。

如下：粉红色盒子是蓝色盒子的父代元素，粉盒绑定了点击事件，蓝色盒子没有绑定点击事件，但是当我们点击蓝色盒子的时候，事件同样会被触发。

 

 

IE和DOM标准所实现的事件流方法刚好相反，IE实现事件流采用的是事件冒泡，DOM实现事件流采用的是事件捕获。

 

① 事件冒泡

IE的事件流叫做事件冒泡。即事件开始时由具体的元素开始接收，然后逐级向上传播到较为不具体的节点（文档）。

下面是定义：

冒泡型事件流：事件的传播是从最特定的事件目标到最不特定的事件目标。即从DOM树的叶子到根。

 

冒泡型事件流示意图：

 

 

② 事件捕获

网景公司所实现的事件流采用的是事件捕获。

Netscape团队提出的是事件捕获，事件捕获的思想是不太具体的节点应该更早的接收事件，而最具体的节点应该最后接收事件。

下面是定义：

捕获型事件流：事件的传播是从最不特定的事件目标到最特定的事件目标。即从DOM树的根到叶子。

捕获型事件流示意图：

 

 

③ DOM标准

DOM标准采用捕获+冒泡。两种事件流都会触发DOM的所有对象，从document对象开始，也在document对象结束。换句话说，起点和终点都是document对象（很多浏览器可以一直捕获/冒泡到window对象）

DOM事件流示意图：

 

 

④ 事件冒泡的优缺点

事件冒泡的优点：事件冒泡允许多个操作被集中处理（把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子级元素上）

如下：点击左边蓝色的小方块，都会触发同样的事件，在一定程度上，很方便

 

 

缺点：如果和父元素绑定了相同的事件的话，父元素的事件也会被触发

如下：本来我们只是想要触发蓝色盒子的事件，但是由于父代元素也绑定了相同的事件，所以在触发蓝色盒子事件的时候，父代元素的事件也同时被触发了。

 

 

⑤ 阻止冒泡

IE和DOM标准实现的方法又不一样

阻止冒泡的方法是cancelBubble和stopPropagation()。之所有有两个，是因为前面那个是在IE浏览器中，后面的是在Mozilla浏览器中。

在DOM标准中阻止冒泡

 

IE中阻止冒泡：

 

 

 

1. 事件处理程序

所谓事件处理程序，就是发生事件的时候进行处理的函数

 

① HTML事件处理程序

第一种方式：

 

第二种方式：

 

Web标准：结构，样式，行为相分离

缺点：HTML代码和JS代码都在一个文档里面，没有达到我们的Web标准

 

② DOM 0级

OM0级事件处理程序就完全将HTML和JavaScript分离开了。这种方法简单而且跨浏览器。

 

缺点：只能为一个元素添加一个事件处理函数。

 

 

③ DOM 2级事件处理程序

DOM2级事件处理程序可以为一个元素添加多个事件处理程序。其定义了两个方法用于添加和删除事件处理程序：addEventListener()和removeEventListener()。

这两个方法都需要3个参数：事件名，事件处理函数，布尔值。

如果这个布尔值为true，则在捕获阶段处理事件，如果为false，则在冒泡阶段处理事件，默认为false。

如下：

 

移除事件处理程序：

 

 

④ IE事件处理程序

之所以要把IE事件处理程序单独拉出来说一下，是因为IE的事件处理程序和标准的DOM事件处理程序有一点不一样。

IE事件处理程序为attachEvent()和detachEvent()。

由于IE8及更早版本只支持事件冒泡，所以通过attachEvent()添加的事件处理程序都会被添加到冒泡阶段，而且既然都是冒泡，传入的参数也就2个就可以，第3个毫无意义。

 

 

 

5. 事件对象

事件对象就是我们上面所看到的event

用户在触发事件的时候就会生成event对象，event对象里面有与事件相关的属性

快速入门案例：

 

效果：

 

 

event对象所包含的信息：

1. 触发事件的元素

2. 事件发生时鼠标信息  

3. 事件发生时键盘信息

 

① DOM标准里面的event对象

在DOM标准里面，event对象是作为参数被传递到事件处理程序。

event对象究竟包含哪些属性：详见教材P45页

介绍几个常用的属性

type：事件的类型

 

效果：

 

 

srcElement/target：功能是一样的，都是取得事件源，所谓事件源，就是发生事件的元素。

前面一个是IE里面取得事件源，后面一个是DOM标准取得事件源

 

 

button：得到按下鼠标按键的信息，（firefox中0代表左键，1代表中键，2代表右键）

 

效果：

 

 

clientX和clientY：触发事件时鼠标的坐标

注意：坐标值是按照浏览器左上角来进行计算的。

 

② IE中的事件对象

IE中的事件对象和DOM标准中基本一样，但是还是有差别。

在IE中，event对象是作为全局对象存在的。我们就不需要再将event对象作为参数来传递。在事件处理程序里面直接就可以访问到。

 

第二个区别就是在事件属性和方法上略有不同。

 

6. 事件类型

Web浏览器中发生的事件类型非常的多。在DOM3级事件中规定了如下事件：

UI事件

焦点事件

鼠标事件

键盘事件

文本事件

 

① 鼠标事件

在DOM3级里面规定了9种鼠标事件

click：单击鼠标时触发事件

dblclick：双击鼠标时触发事件

 

mousedown：按下鼠标时触发事件

mouseup：放开鼠标时触发事件

 

mousemove：移动鼠标时触发事件

 

mouseenter：进入元素时触发事件，但是只触发一次，进入后代元素的时候，不会再触发事件

mouseover：进入元素时触发事件，并且进入后代元素的时候也会再次触发事件

 

mouseleave：离开元素时触发事件，只会在离开父级元素的时候才会触发事件，离开后代元素并不会触发事件

mouseout：离开元素时触发事件，只要离开了盒子，就会触发事件。

 

HTML代码：

 

CSS代码：

 

JS代码：

 

 

② 键盘事件

键盘事件有3种：keydown，keyup，keypress

keydown：按下按键的时候触发事件

keyup：松开按键的时候触发

keypress：按下按键的时候触发事件

keydown：按下键的时候触发事件，并且如果按着键不放，会一直触发事件。

 

效果：

 

同样，在触发键盘事件的时候，也有相应的属性值被传入到事件对象（event）

比如keyCode属性：

 

效果：

 

可以看出，通过keyCode，我们就可以知道用户按下的是哪一个键。

 

③ HTML事件

UI事件和焦点事件可以一起称之为HTML事件。里面又分为两大类：页面相关事件，表单相关事件

 

页面相关事件

load：当页面全部被加载的时候触发事件

unload：当页面全部被卸载的时候，换句话说，就是页面被关闭时触发事件

abort：图片下载被用户中断的时候

error：发生错误的时候触发事件

resize：当窗口尺寸有调整时触发事件

scroll：当用户滚动有滚动条的时候触发事件

我们这里举一个例子就可以了

scroll

 

 

表单事件

submit：提交表单时触发事件

reset：重置表单时触发事件

focus：控件获取到焦点的时候

blur：控件失去焦点的时候

change：当文本框的值被改变的时候

select：当用户在一个文本框选择一到多个字符的时候

submit和reset

注意点：这两个事件是写在form表单里面的

 

 

focus：获取焦点时触发事件