31、JavaScript 事件处理与异步编程全解析

最新推荐文章于 2025-11-15 19:21:46 发布

algae

最新推荐文章于 2025-11-15 19:21:46 发布

阅读量1

点赞数

CC 4.0 BY-SA版权

分类专栏： Head First JavaScript精要文章标签： JavaScript 事件处理异步编程

本文链接：https://blog.youkuaiyun.com/algae/article/details/155441609

Head First JavaScript精要专栏收录该内容

47 篇文章 ¥499.90

订阅专栏¥69.90

会员秒杀 ¥9.9 重磅福利

超级会员免费看

JavaScript 事件处理与异步编程全解析

1. 事件队列

浏览器会维护一个事件队列，像页面加载、用户点击、定时器触发、表单提交以及网络数据到达等事件都会被添加到这个队列中。浏览器会按从旧到新的顺序逐个处理队列中的事件，每次只处理一个事件。所以，事件处理函数应尽量简洁高效，否则事件队列可能会堆积，导致浏览器响应变慢，甚至出现“慢速脚本对话框”。以下是一个事件队列示例：
- 页面加载
- 用户点击
- 定时器触发
- 表单提交
- 用户再次点击
- 另一个定时器触发
- 表单再次提交
- 网络数据到达

2. 异步编程之鼠标移动事件

在一个寻宝游戏中，需要编写代码，当鼠标在地图上移动时显示坐标。这里会用到 mousemove 事件，通过元素的 onmousemove 属性设置处理函数。以下是相关代码：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Pirates Booty</title>
  <script>
    window.onload = init;
    function init() {
      var map = document.getElementById("map");
      map.onmousemove = showCoords;