你或许没有不知道的那些 React 事件的知识点

骑猪看日落 2022-09-03 01:23 178阅读 0赞

首先我们来看一段很简单的 react 代码

import React from 'react'
    
    class EventDemo extends React.Component { 
    
      render() { 
        return <a href="https://baidu.com/" onClick={ this.clickHandler}>
          click me
        </a>
      }
      // 获取 event
      clickHandler = (event) => { 
        event.preventDefault()
        console.log(event)
      }
    }
    
    export default EventDemo

在函数没有传递参数的情况下，函数会自动获取一个 event 参数，这也是平时书写 JavaScript 事件时的默认参数。我们将 event 打印出来，看看是什么  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDc3NzIx_size_16_color_FFFFFF_t_70]  
同样的原生事件  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDc3NzIx_size_16_color_FFFFFF_t_70 1]  
感觉好像确实差不多。

再次打印当前点击所指的元素

console.log('target', event.target) // 指向当前元素，即当前元素触发
    console.log('current target', event.currentTarget) // 指向当前元素，

![在这里插入图片描述][1ef34da9556a4c059a9674f4b7f84df2.png]

但这一切都是假象！！！！

注意，event 其实是 React 封装的。可以看 `__proto__.constructor` 是 `SyntheticEvent` 组合事件。

不是原生的 Event ，原生的 MouseEvent。

console.log('event', event)

![在这里插入图片描述][0c5d504d31ec4741953341801059676a.png]

console.log('event.__proto__.constructor', event.__proto__.constructor)

![在这里插入图片描述][a84ce12d847a4e778f32a413b46859a2.png]原生 event 如下，其中 `__proto__.constructor` 是 `MouseEvent`

console.log('nativeEvent', event.nativeEvent)
    console.log('nativeEvent target', event.nativeEvent.target)  // 指向当前元素，即当前元素触发
    console.log('nativeEvent current target', event.nativeEvent.currentTarget) // 指向 document ！！！

![在这里插入图片描述][e47bc76a1dcf42b390f3de7078c1fa0f.png]

综上：

> `event` 是 `SyntheticEvent` ，模拟出来 DOM 事件所有能力

> `event.nativeEvent` 是原生事件对象

> 所有的事件，都被挂载到 `document` 上

> 和 `DOM` 事件不一样，和 `Vue` 事件也不一样

#### 事件响应 ####

*  React 在构建虚拟 DOM 的同时，还构建了自己的事件系统；所有事件对象和 `W3C` 规范保持一致
 *  React的事件系统和浏览器事件系统相比，主要增加了两个特性：**事件代理**，**事件自动解绑**

#### 事件代理 ####

*  区别于浏览器事件处理方式，React并未将事件处理函数与对应的 DOM 节点直接关联。而是在顶层使用一个全局事件监听器监听所有事件
 *  React 会在内部维护一个映射表记录事件与组件处理函数的对应关系
 *  当某个事件触发时，React 根据这个内部映射表将事件分派给指定的事件处理函数
 *  若映射表中没有事件处理函数时，React 不会做任何操作
 *  当组件安装或卸载时，相应的事件处理函数会自动被添加到事件监听器的内部映射表中或从表中删除

#### 事件自动绑定 ####

*  React 的每个事件处理回调函数都会自动绑定到组件实例（使用 ES6 语法创建的例外）。事件回调函数中的 this 指向的是组件实例而不是 DOM 元素

#### 合成事件 ####

*  是对浏览器原生事件的封装，与浏览器原生事件有同样的接口，如`stopPropagation(),preventDefault()`等，并且这些接口是跨浏览器兼容的。

**`React` 并不是将事件绑在元素的真实 `DOM` 上，而是在 `document` 处监听所有支持的事件，当事件发生并冒泡至 `document` 处时，React将事件内容封装并交由真正的处理函数运行**

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDc3NzIx_size_16_color_FFFFFF_t_70]: /images/20220829/7f0e0d38205f4d8395127df03486ec96.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDc3NzIx_size_16_color_FFFFFF_t_70 1]: /images/20220829/4f6a21d8bd064f259425a2fb7276d449.png
[1ef34da9556a4c059a9674f4b7f84df2.png]: /images/20220829/87793cc19f304a99b4e812570e6fc19a.png
[0c5d504d31ec4741953341801059676a.png]: /images/20220829/5b02bd2609fb43298ed32d12883876fe.png
[a84ce12d847a4e778f32a413b46859a2.png]: /images/20220829/d3cebcc087834ed6b4ae9ebad77f4383.png
[e47bc76a1dcf42b390f3de7078c1fa0f.png]: /images/20220829/00474a22f98543fc8c15ac9bfb4fa936.png