js基础之事件捕获与冒泡原理基础之事件捕获与冒泡原理
想要了解什么是事件捕获与冒泡，需要先了解什么是事件。
什么是事件？什么是事件？
我们知道，在前端开发中，JavaScript负责定义网页的“行为”。这里所说的“定义”，其实指的是开发者可以通过JavaScript语言
向浏览器描述一些规则，浏览器按照这些规则与用户进行交互。比如开发者希望当用户点击页面上某个按钮的时候，就弹出一
个窗口，显示特定的内容。而当用户真正点击这个按钮的时候，浏览器将按照开发者定义的这个规则，去弹出指定的窗口，显
示指定的内容。
在上面的例子中，浏览器是一切规则的执行者，开发者是这些规则的制定者，而JavaScript只是开发者向浏览器描述这些规则
时所使用的的语言（否则浏览器无法知道开发者想要在什么情况下做什么事）。假如我们通过以下的语句向浏览器描述了一条
规则：
<body>
<button id="btn">点击</button>
<script>
var button = document.getElementById("btn"); //获取页面上的按钮
button.addEventListener("click", function(){ //定义点击事件
alert("我被点击了");
})
</script>
</body>
页面上现在有一个按钮，我们首先使用原生DOM获取这个按钮，然后使用button.addEventListener(“click”, function(){})这样的
语法向浏览器描述了一条规则：当这个按钮被点击（click）时，弹出提示框，显示“我被点击了”。用户点击按钮后网页就会出
现如下提示：
浏览器把这次“点击”称为一个“事件”。“事件”用于描述交互过程中某些特定的关键点（如点击、鼠标滑动、滚轮滚动、按下键
盘、触屏操作等，每个操作都对应特定的事件，不过事件也可能与用户行为无关，比如网页加载完毕也是一个事件）。而浏览
器处理交互最重要的手段就是基于事件来执行开发者定义好的回调函数（如在用户“点击按钮”时“弹出窗口”，而定义“弹出窗
口”行为的就是回调函数，也就是addEventListener中的function）。
定义完这条规则，当用户点击按钮时，浏览器就会弹出上述窗口了。我们称“点击”这个事件是在这个按钮上触发的（因为我们
的回调函数是绑定在这个按钮上的）。
那什么是事件的捕获与冒泡呢？
事件的捕获与冒泡事件的捕获与冒泡
这个问题与HTML的结构息息相关。
在前端开发中，我们使用标签语言HTML来描述网页结构，如一个标题、一个段落、一个表格等，这些网页元素描述了网页上
有哪些需要显示的内容，它们构成了整个网页的“骨骼”，通常是一种嵌套的结构，比如：
<html>
<head>
... //这是对网页内容的元描述
</head>
<body> //这是网页需要渲染的真正内容
<div>
<h1>标题</h1>
<p>这里是一个段落</p>
</div>
下载后可阅读完整内容，剩余3页未读，立即下载
weixin_38703277
- 粉丝: 6
- 资源: 915
我的内容管理
展开
最新资源
- OptiX传输试题与SDH基础知识
- C++Builder函数详解与应用
- Linux shell (bash) 文件与字符串比较运算符详解
- Adam Gawne-Cain解读英文版WKT格式与常见投影标准
- dos命令详解：基础操作与网络测试必备
- Windows 蓝屏代码解析与处理指南
- PSoC CY8C24533在电动自行车控制器设计中的应用
- PHP整合FCKeditor网页编辑器教程
- Java Swing计算器源码示例：初学者入门教程
- Eclipse平台上的可视化开发：使用VEP与SWT
- 软件工程CASE工具实践指南
- AIX LVM详解：网络存储架构与管理
- 递归算法解析：文件系统、XML与树图
- 使用Struts2与MySQL构建Web登录验证教程
- PHP5 CLI模式：用PHP编写Shell脚本教程
- MyBatis与Spring完美整合：1.0.0-RC3详解
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
