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

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

阅读 4.5k
2 个回答
  1. 移动到按钮上时,会依次触发 mouseovermouseenter 事件,前者冒泡,后者不冒泡
  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 这个链接里试一下

  1. 当鼠标移动到按钮上时,会触发mousehover事件,css也会响应:hover的样式
  2. 当鼠标按下时,会触发mousedown事件
  3. 当鼠标起来时,会触发mouseup事件,之后会触发click事件
  4. 事件响应从捕获阶段-目标阶段-冒泡阶段,通常只需考虑目标阶段-冒泡阶段
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏