当一个按钮被点击时，发生了什么

Question

当用户点击一个按钮时，页面上发生了哪一系列的事件

Answer 1

1. 移动到按钮上时，会依次触发 mouseover，mouseenter 事件，前者冒泡，后者不冒泡
2. 鼠标按下时，广播 mousedown 事件
3. 如果此时其它元素有焦点，那么该元素会先失去焦点，并广播 blur 事件
4. 如果失去焦点的元素是 <input>，<textarea>，且它们的内容有变化，则它们会广播 change 事件
5. 按钮获得焦点，广播 focus 事件
6. 如果因此影响到 DOM，那么会等待 DOM 变更
7. 如果鼠标没有离开按钮，按钮广播 mouseup 事件
8. 最后广播 click 事件

需要注意的是，因为（3）（4）（5）和 Event loop 的存在，DOM 可能在这个时间点出现变化，导致一些操作没有办法按照预期完成，比如：

1. 一个搜索框
2. 输入的时候自动搜索，结果以 dropdown 形式展示在下面
3. 点击 dropdown 里的条目可以跳转
4. 搜索框 blur 时 dropdown 移除
5. 此时，dropdown 可能无法点击

你可以在 https://codepen.io/meathill/pen/LYVwoLG 这个链接里试一下

Answer 2

1. 当鼠标移动到按钮上时，会触发mousehover事件，css也会响应:hover的样式
2. 当鼠标按下时，会触发mousedown事件
3. 当鼠标起来时，会触发mouseup事件，之后会触发click事件
4. 事件响应从捕获阶段-目标阶段-冒泡阶段，通常只需考虑目标阶段-冒泡阶段