JavaScript事件背后的原理

最新推荐文章于 2025-04-28 15:15:19 发布

code_ja

最新推荐文章于 2025-04-28 15:15:19 发布

阅读量472

点赞数

分类专栏：事件 JavaScript 文章标签： javascript

本文链接：https://blog.youkuaiyun.com/code_ja/article/details/51913083

版权

JavaScript 同时被 2 个专栏收录

18 篇文章

订阅专栏

事件

3 篇文章

订阅专栏

JavaScript与HTML之间的交互是通过事件实现的。事件：就是文档或浏览器窗口中发生的一些特定的交互瞬间，使用监听器来监听事件，以便在事件发生时执行相应的代码。
当我们在某个元素上添加一个事件时，根据事件执行的前后可以把它当成一个事件流，在DOM事件中规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。首先发生的是事件捕获，然后是实际的目标接收到事件，最后是冒泡阶段，可以在这个阶段对事件做出响应。看个简单的例子：

<html>
<head>
    <title>Example</title>
</head>
<body>
    <div id="myDiv">Click Me</div>
</body>
</html>

在div中有个click事件，单击div元素会按照下图所示的顺序触发事件：
这里写图片描述
在DOM事件流中，实际的目标div在捕获阶段接收到事件，意思是在捕获阶段，事件从document到html再到body后就停止了，接下来就是出于目标阶段，于是事件在div上发生，最后，冒泡阶段发生，事件又传播回文档。
多数支持DOM事件的浏览器都实现了一种特定的行为：DOM2级事件规范明确要求捕获阶段不会涉及事件目标，但IE9、Safari、Chrome、Firefox和Opera9.5及更高版本都会在捕获阶段触发事件对象上的事件。结果，就是有两个机会在目标对象上面操作事件。