zoukankan      html  css  js  c++  java
  • 事件是异步还是同步?

    初学前端的时候,资料上说事件是异步的。
    根据 mdn 的描述也是异步的。

    事件(Event)是指一种用于处理在网页的生命周期中发生的各种事件的异步调用的设计模式,也指一些不同种类事件的命名、描述和使用。

    当时也不关心,会用就行。


    后来,遇到了 HTMLElement.click

    var dom = document.querySelector('xxx')
    dom.addEventListener('click',function(){ console.log(' dom is clicked ') })
    
    function test (){
        dom.click()
        console.log(' after dom.click() ')
    }
    test() // 'dom is clicked'  ' after dom.click() '
    

    手动触发事件,事件触发到函数执行并不是异步的。

    所以当时认为事件是同步的。


    有ajax这样的 xhr的readyStateChange事件困扰我很久。

    还是不清楚事件是异步还是同步。查了资料,也没明白。


    我现在想的是,事件是一个过程:

    1. 行为触发 (异步)
    2. 事件处理 (同步)

    这样就说的通了。

    行为触发:什么时候用户点击、返回响应,这都是未知的也就是异步的。

    事件处理:系统接收到事件触发,找到对应dom的回调函数、并执行的过程是同步的。

    dom.click()直接触发,所以立即执行。

    --------------2020-8-27 更新--------------
    至于click事件是在 微任务中还是同步 暂时无从验证

    通过 dispatch、Element.Click() 触发的click事件,事件回调是同步执行的。
    dispatch触发后未发生事件冒泡,仅在Event.target上触发。

    https://juejin.im/post/6844903657264136200#heading-5
    这篇文章的观点是click事件是异步的,列举了click事件冒泡后回调执行晚于promise
    https://github.com/ruanyf/es6tutorial/issues/691
    这篇文章反驳了上述文章的案例

    w3c文档-列举了事件的异步或同步
    [w3c文档-关于同步异步事件的说明]https://w3c.github.io/uievents/#sync-async

  • 相关阅读:
    对我影响最大的三位老师
    自我介绍
    第二周作业
    2019第一次作业
    PTA编程总结3
    币值转换
    PTA编程总结2
    PTA编程总结1
    秋季学期学习总结
    人生路上对你影响最大的三位老师
  • 原文地址:https://www.cnblogs.com/AFu-1993/p/12319673.html
Copyright © 2011-2022 走看看