React的合成事件

  • Z时代
  • 2024-01-10
  • 分类：综合

react

React的事件处理使用合成事件(SyntheticEvent)，不是原生事件。

1. 合成事件的异步访问

合适事件为了节约性能，使用对象池。当一个合成事件对象被使用完毕，即调用该对象的同步代码执行完毕，该对象会被再次利用。
其属性会被重置为null。所以异步访问合适事件的属性，是无效的。

解决方法有两种：

1.1 用变量记录事件属性值

用变量记录合成事件的属性值，在异步程序中访问，就没有任何问题了。

function onClick(event) {
  console.log(event); // => nullified object.
  console.log(event.type); // => "click"
  const eventType = event.type; // => "click"
  setTimeout(function() {
    console.log(event.type); // => null
    console.log(eventType); // => "click"
  }, 0);
}

1.2 用e.persist()方法

e.persist()方法，会将当前的合成事件对象，从对象池中移除，就不会回收该对象了。对象可以被异步程序访问到。

2. 合成事件阻止冒泡

2.1 e.stopPropagation

只能阻止合成事件间冒泡，即下层的合成事件，不会冒泡到上层的合成事件。事件本身还都是在document上执行。最多只能阻止document事件不能再冒泡到window上。

2.2 e.nativeEvent.stopImmediatePropagation

能阻止合成事件不会冒泡到document上。

可以实现点击空白处关闭菜单的功能：

在菜单打开的一刻，在document上动态注册事件，用来关闭菜单。
点击菜单内部，由于不冒泡，会正常执行菜单点击。
点击菜单外部，执行document上事件，关闭菜单。
在菜单关闭的一刻，在document上移除该事件，这样就不会重复执行该事件，浪费性能。

也可以在window上注册事件，这样可以避开document。

以上是 React的合成事件 的全部内容， 来源链接： utcz.com/z/382425.html

回到顶部