【JavaScript】事件机制

今天药忘吃喽~ 2023-02-24 08:28 21阅读 0赞

### 目录 ###

*   *   *  1. 事件模型
         *  2. 事件循环
         *   *  2.1 单线程
             *  2.2 JS单线程的好处
             *  2.3 任务队列
             *  2.4 宏任务、微任务
             *  2.5 什么是执行栈
         *  3. 事件委托（事件代理）
         *   *  3.1 事件委托的原理
             *  3.2 事件委托的优点
             *  3.3 事件委托的缺点
             *  3.2 事件委托的使用场景

### 1. 事件模型 ###

![在这里插入图片描述][20200708215041138.png]  
事件流总共有三个阶段（IE8及以下版本没有阶段）：

*  捕获阶段：图中1-5
 *  目标阶段：图中5-6
 *  冒泡阶段：图中6-10

（1）捕获事件流：就是事件由页面元素接收，逐级向下，传播到最具体的位置

（2）冒泡事件流：就是事件由最具体的元素接收，逐级向上，传播到页面

**注意：** 默认情况下，事件使用冒泡事件流，不使用捕获事件流。

**那如何才能让事件的冒泡先发生，再触发捕获阶段呢？**

我们可以将捕获阶段的处理函数放在`setTimeout(function(){...捕获阶段的事件需执行的内容...},0)`中，这样就会把捕获阶段获取的事件推到下一个宏事件中执行。冒泡阶段的事件在第一个宏事件中执行，捕获阶段事件在第二个宏事件中执行

### 2. 事件循环 ###

#### 2.1 单线程 ####

JavaScript是一种单线程语言，它主要用来与用户互动。以及操作DOM。

虽然JavaScript是单线程的，但是它有同步和异步的概念，这就解决了代码阻塞的问题。

*  **同步**：如果在一个函数返回的时候，调用者就能够得到预期结果，那么这个函数就是同步的。
 *  **异步**： 如果在函数返回的时候，调用者还不能够得到预期结果，而是需要在将来通过一定的手段得到，那么这个函数就是异步的。

#### 2.2 JS单线程的好处 ####

在 JS 运行的时候可能会阻止 UI 渲染，这说明了两个线程是互斥的。这其中的原因是因为 JS 可以修改 DOM，如果在 JS 执行的时候 UI 线程还在工作，就可能导致不能安全的渲染 UI。这其实也是一个单线程的好处，得益于 JS 是单线程运行的，可以达到节省内存，节约上下文切换时间，没有锁的问题的好处。当然前面两点在服务端中更容易体现，对于锁的问题，形象的来说就是当我读取一个数字 15 的时候，同时有两个操作对数字进行了加减，这时候结果就出现了错误。解决这个问题也不难，只需要在读取的时候加锁，直到读取完毕之前都不能进行写入操作。

#### 2.3 任务队列 ####

下面说一下任务队列：

JavaScript的任务分为两种，同步任务和异步任务

*  同步任务是指，在主线程上排队执行的任务，只有一个任务执行完毕，才能执行下一个任务，
 *  异步任务是指，不进入主线程，而是进入任务队列的任务，只有任务队列通知主线程，某个任务可以执行了，该任务才会进入主线程执行。  
    ![在这里插入图片描述][20200708224038863.png_x]

同步和异步任务分别进入不同的执行环境，同步的进入主线程，即主执行栈，异步的进入任务队列。主线程内的任务执行完毕为空，会去任务队列读取对应的任务，推入主线程执行。 上述过程的不断重复就是我们说的 Event Loop (**事件循环**)。

#### 2.4 宏任务、微任务 ####

异步任务又可以分为**宏任务（ Macro Task ）** 和**微任务（Micro Task）**：

*  **宏任务主要包括：** script( 整体代码)、setTimeout、setInterval、I/O、UI 交互事件、setImmediate(Node.js 环境)
 *  **微任务主要包括：** Promise、MutaionObserver、process.nextTick(Node.js 环境)

来看下面一个题：

console.log(1);
    setTimeout(function(){ 
      console.log(2);
    }, 0);
    Promise.resolve().then(function(){ 
      console.log(3);
    }).then(function(){ 
      console.log(4);
    });
    
    //1
    //3
    //4
    //2

**注意：** promise的then和catch才是microtask，本身的内部代码不是。

所谓的Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。

Promise的函数代码的异步任务会优先于setTimeout的延时为0的任务先执行，原因是任务队列分为宏任务和微任务, 而promise中的then方法的函数会被推入到**微任务**队列中，而setTimeout函数会被推入到**宏任务**![在这里插入图片描述][20200708230551410.png]  
在Event Loop(事件循环)中，每一次循环称为 tick, 每一次tick的任务如下：

*  执行栈选择最先进入队列的宏任务(通常是script整体代码)，如果有则执行
 *  检查是否存在 Microtask，如果存在则不停的执行，直至清空 microtask 队列
 *  更新render(每一次事件循环，浏览器都可能会去更新渲染)
 *  重复以上步骤

也就是说，事件循环每次只会入栈一个macrotask，主线程执行完成该任务后又会检查microtasks队列并完成里面的所有任务后再执行macrotask的任务。

再看一个题目：

setTimeout(()=>{ 
        console.log('A');
    },0);
    var obj={ 
        func:function () { 
            setTimeout(function () { 
                console.log('B')
            },0);
            return new Promise(function (resolve) { 
                console.log('C');
                resolve();
            })
        }
    };
    obj.func().then(function () { 
        console.log('D')
    });
    console.log('E');

**结果为：C、E、D、A、B**

过程如下：

*  先将A放入宏任务队列
 *  执行func函数，B放入宏任务队列
 *  Promise立即执行，输出C
 *  执行同步任务，输出E
 *  执行Promise的then的函数，输出D
 *  执行宏任务队列，以先进先执行的原则，分别输出A和B

#### 2.5 什么是执行栈 ####

以把执行栈认为是一个存储函数调用的**栈结构**，遵循先进后出的原则。

![在这里插入图片描述][20200815002745238.gif_pic_center]  
当开始执行 JS 代码时，首先会执行一个 main 函数，然后执行我们的代码。根据先进后出的原则，后执行的函数会先弹出栈，在图中我们也可以发现，foo 函数后执行，当执行完毕后就从栈中弹出了。

平时在开发中，大家也可以在报错中找到执行栈的痕迹

function foo() { 
      throw new Error('error')
    }
    function bar() { 
      foo()
    }
    bar()

![在这里插入图片描述][20200815002826897.png_pic_center]  
大家可以在上图清晰的看到报错在 foo 函数，foo 函数又是在 bar 函数中调用的。

当我们使用递归的时候，因为栈可存放的函数是有限制的，一旦存放了过多的函数且没有得到释放的话，就会出现爆栈的问题

function bar() { 
      bar()
    }
    bar()

![在这里插入图片描述][20200815002901975.png_pic_center]

### 3. 事件委托（事件代理） ###

#### 3.1 事件委托的原理 ####

事件委托就是利用**事件冒泡**，只指定一个事件处理程序，就可以管理某一类型的所有事件。

一般来讲，会将一个或一组元素的事件委托到它的父层或者更外层的元素上，真正绑定事件是外层的元素，当事件响应到需要绑定的元素上时，会通过事件冒泡机制从而触发它的外层元素的绑定事件上，然后在外层元素上去执行函数。

#### 3.2 事件委托的优点 ####

**事件委托的优点：**

*  减小内存的消耗

假如有一个列表，列表中有很多列表项，如果我们想要在点击某个列表项时响应一个事件，就可以使用后事件委托的原理，将时间绑定在父级元素上，在执行事件的时候再去匹配判断目标元素。这样，就不需要在每个列表项绑定事件，大大的减少了内存的消耗，提高了效率。

*  动态绑定事件

有时，我们需要动态的新增或者删除元素，那每一次都要给元素重新绑定事件或者解绑事件，这样就很麻烦。如果我们使用事件委托，就可以避免这种麻烦，因为事件绑定在父层元素，和目标元素的事件增减是真没有关系的，执行到目标元素是在真正响应事件执行函数的过程中去匹配的。

#### 3.3 事件委托的缺点 ####

当前，事件委托也不是万能的，它也有一定的局限性。比如：

*  像focus、blur等事件是没有事件冒泡机制的，所以无法实现事件委托
 *  mousemove、mouseout这类事件，虽然是有冒泡的机制，但是只能不断的移动位置去计算定位，对性能消耗很高，因此不适合使用事件委托

#### 3.2 事件委托的使用场景 ####

比如，购物车中有一堆商品，我们可以给商品列表的父级元素绑定删除商品操作的事件，点击想要删除的商品，就会出发父级的函数，通过父级元素就会删除对应的商品。

[20200708215041138.png]: /images/20230209/d2201ab494af444caf7a6a7645f9106a.png?
[20200708224038863.png_x]: /images/20230209/5fe3508b54754e14a40dd90edc2bce38.png
[20200708230551410.png]: https://img-blog.csdnimg.cn/20200708230551410.png?
[20200815002745238.gif_pic_center]: https://img-blog.csdnimg.cn/20200815002745238.gif#pic_center
[20200815002826897.png_pic_center]: https://img-blog.csdnimg.cn/20200815002826897.png#pic_center
[20200815002901975.png_pic_center]: https://img-blog.csdnimg.cn/20200815002901975.png#pic_center