事件

最新推荐文章于 2024-07-25 08:06:37 发布

姚希瑶

最新推荐文章于 2024-07-25 08:06:37 发布

阅读量210

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_39178993/article/details/81667107

版权

前端专栏收录该内容

50 篇文章 1 订阅

订阅专栏

JavaScript与HTML之间的交互式通过事件实现的。事件，就是文档或浏览器窗口中发生的一些特定的交互瞬间。可以使用侦听器（或处理程序）来预订事件，以便事件发生时执行相应的代码。这种在传统软件工程中被称为观察员模式的模型，支持页面的行为（JavaScript代码）与页面的外观（HTML和CSS代码）之间的松散耦合。

事件流

当浏览器发展到第四代，浏览器开发团队遇到了一个很有意思的问题：页面的哪一部分会拥有某个特定的时间？要明白这个问题问的是什么，可以想象花在一张之上的一组同心圆。如果你把手指放在圆心上，那么你的手指指向的不是一个圆，而是纸上的所有圆。许多公司的浏览器开发团队在看待浏览器事件方面还是一致的。如果你单击了某个按钮，他们都认为单击事件不仅仅发生在按钮上。换句话说，在单击按钮的同时，你也单击了按钮的容器元素，甚至也单击了整个页面。

事件流描述的是从页面中接受事件的顺序。但有意思的是，IE和Netscape开发团队居然提出了差不多是完全相反的事件流的概念。IE的事件流是事件冒泡流，而Netscape的事件流是事件捕获流。

事件冒泡

IE的事件流叫做事件冒泡，即事件开始是由最具体的元素（文档中嵌套层次最深得那个节点）接受，然后逐级向上传播到较为不具体的节点文档。

举个例子：

<!DOCTYPE html>

<html>

<head>

<title>Event Example</title>

</head>

<body>

<div id="myDiv">Click Me</div>

</body>

</html>

如果你单击了页面中的<div>元素，那么这个click事件会按照如下顺序传播：

（1）<div>

（2）<body>

（3）<html>

（4）document

也就是说，click事件首先在<div>元素上发生，而这个元素就是我们单击的元素。然后，click事件沿DOM树向上传播，在每一级节点上都会发生，直至传播到document对象。下图展示了事件冒泡的过程：

所有现代浏览器都支持事件冒泡，但在具体实现上还是有一些差别。早期版本中的冒泡会跳到document。IE9、Firefox,Chrome和Safari则将事件一直冒泡到window对象。

事件捕获

Netscape团队提出的另一种事件流叫做事件捕获。事件捕获的思想是不太具体的节点应该更早接收到事件，而最具体的节点应该最后接收到事件。事件捕获的用意在于事件到达预定目标之前捕获它。如果扔以前面的HTML页面作为演示事件捕获的例子，那么单击<div>元素就会以下列顺序触发click事件。

（1）document

（2）<html>

（3）<body>

（4）<div>

在事件捕获过程中，document对象首先接收到click事件，然后事件沿DOM树依次向下，一直传播到事件的实际目标，即<div>元素。下图展示事件捕获的过程：

虽然事件捕获是Netscape唯一支持的事件流模型，但IE9、Safari、Chrome、Opera和Firefox目前也都支持这种事件流模型。尽管“DOM2级事件”规范要求事件应该从document对象开始传播，但这些浏览器都是从window对象开始捕获事件的。

事件处理程序

事件就是用户或浏览器自身执行的某种动作。诸如click、load和mouseover，都是事件的名字。而响应某个事件的函数就叫做事件处理程序（或事件侦听器）。事件处理程序的名字以“on”开头，因此click事件的事件处理程序就是onclick,load事件的事件处理程序就是onload。为事件指定处理程序的方式有好几种。

事件对象

在触发DOM上的某个事件时，会产生一个事件对象event，这个对象中包含着所有与事件有关的信息。包括导致事件的元素、事件的类型以及其他与特定事件相关的信息。例如，鼠标操作导致的事件对象中，会包含鼠标位置的信息，而键盘操作导致的事件对象中，会包含与按下的键有关的信息。所有浏览器都支持event对象，但支持方式不同。

事件类型

Web浏览器中可能发生的事件有很多类型。如前所述，不同事件类型具有不同的信息，而“DOM3级事件”规定了一下几类事件。

UI（User Interface,用户界面）事件，当用户与页面上的元素交互时触发；

焦点事件，当元素获得或失去焦点时触发

鼠标事件，当用户通过鼠标在页面上执行操作时触发

滚轮事件，当使用鼠标滚轮（或类似设备）时触发

文本事件，当在文档中输入文本时触发

键盘事件，当用户通过键盘在页面上执行操作时触发

合成事件，当为IME（input Method Editor，输入法编辑器）输入字符时触发

变动事件，当底层DOM结构发生变化时触发

变动名称事件，当元素或属性名变动时触发。此类事件已经被废弃，没有任何浏览器实现它们。

除了这几类事件之外，HTML5也定义了一组事件，而有些浏览器还会在DOM和BOM中实现其他专有事件。这些专有事件一般都是根据开发人员需求定制的，没有什么规范，因此不同浏览器的实现有可能不一致。