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

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

阅读 609
评论 4月7日提问
    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. 事件响应从捕获阶段-目标阶段-冒泡阶段,通常只需考虑目标阶段-冒泡阶段
      评论 赞赏
        撰写回答

        登录后参与交流、获取后续更新提醒