让页面听你的：JS 交互入门

讲

例子那张「点一下翻面」的卡，拆开看看

朵朵想给自己的 studio 也加一张像本站这样「点一下翻面」的复习卡。她把 AI 给的代码贴进去——没反应。盯着页面许愿没有用：页面不听愿望，只听一套固定的循环。这节课就把那张卡拆开，看页面到底在听什么。

名词三个词记牢：事件＝页面上发生的事（点击、输入、滚动）；状态＝程序记住的「当下是什么样」，通常存在变量里；时间线＝让几件事按顺序发生的安排。

定义交互＝事件 → 状态 → 重绘的循环

一切交互都是这三拍：事件触发（用户点了一下）→ 状态更新（变量记下新值）→ 重绘（把新状态画回页面）。用户看到新画面，再点一下，循环重来：

三拍循环是一切交互的骨架——这页的选择题、复习卡、点亮按钮，全是它。

最小的完整例子，一个会计数的赞按钮：

<button id="btn">赞 0</button>
<script>
var n = 0;                                // 状态：程序记住的当下
document.getElementById('btn')
  .addEventListener('click', function(){  // 事件：当按钮被点
    n = n + 1;                            // 状态更新
    this.textContent = '赞 ' + n;         // 重绘：把状态画回页面
  });
</script>

第三个词时间线先挂个号：交互不只「一问一答」，还能让几件事按顺序发生——setTimeout（等一会儿再做）就是最小的时间线。真正的编排功夫，2.2d 正面开讲。最后一条铁律：改交互之前，先写一句预测——「点第三下，按钮该显示什么」。写了预测再动手，调试就从抓瞎变成了做实验。

泛化换个角度：三拍循环是一切互动系统的骨架

游戏是「按键→血量变化→画面刷新」，电梯是「按钮→目标楼层入队→轿厢运行」，自动售货机是「投币→余额更新→出货亮灯」——凡是「你动它一下、它有反应」的系统，拆开都是事件、状态、重绘。看懂这个循环，你不但能拆任何交互，还能把 bug 报得像工程师：不说「按钮坏了」，而说「事件挂上了、状态也变了，是画面没刷」——给编程智能体这样报障，它一次就能修对地方。

例

补充三例——两个常见用法，一个易错。

做

卡