React16源码: React中event事件监听绑定的源码实现_16.8之前的react 监听事件-优快云博客

本文链接：https://blog.youkuaiyun.com/Tyro_java/article/details/135984134

文章详细描述了React在组件初始化过程中如何绑定事件，特别关注多媒体元素如iframe、video等的事件处理，以及如何使用trapBubbledEvent和trapCapturedEvent来管理事件监听，确保交互性和优先级。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

event事件监听

1 ）概述

在 react-dom 代码初始化的时候，去注入了平台相关的事件插件
接下去在react的更新过程绑定了事件的操作，在执行到 completeWork 的时候
对于 HostComponent 会一开始就先去执行了 finalizeInitialChildren 这个方法
位置在 packages/react-reconciler/src/ReactFiberCompleteWork.js#L642

2 ）源码

定位到 packages/react-dom/src/client/ReactDOMHostConfig.js#L212

找到 finalizeInitialChildren

export function finalizeInitialChildren(
  domElement: Instance,
  type: string,
  props: Props,
  rootContainerInstance: Container,
  hostContext: HostContext,
): boolean {
   
  setInitialProperties(domElement, type, props, rootContainerInstance);
  return shouldAutoFocusHostComponent(type, props);
}

定位到 packages/react-dom/src/client/ReactDOMComponent.js#L447

找到 setInitialProperties

export function setInitialProperties(
  domElement: Element,
  tag: string,
  rawProps: Object,
  rootContainerElement: Element | Document,
): void {
   
  const isCustomComponentTag = isCustomComponent(tag, rawProps);
  if (__DEV__) {
   
    validatePropertiesInDevelopment(tag, rawProps);
    if (
      isCustomComponentTag &&
      !didWarnShadyDOM &&
      (domElement: any).shadyRoot
    ) {
   
      warning(
        false,
        '%s is using shady DOM. Using shady DOM with React can ' +
          'cause things to break subtly.',
        getCurrentFiberOwnerNameInDevOrNull() || 'A component',
      );
      didWarnShadyDOM = true;
    }
  }

  // TODO: Make sure that we check isMounted before firing any of these events.
  let props: Object;
  switch (tag) {
   
    case 'iframe':
    case 'object':
      trapBubbledEvent(TOP_LOAD, domElement);
      props = rawProps;
      break;
    case 'video':
    case 'audio':
      // Create listener for each media event
      for (let i = 0; i < mediaEventTypes.length; i++) {
   
        trapBubbledEvent(mediaEventTypes[i], domElement);
      }
      props = rawProps;
      break;
    case 'source':
      trapBubbledEvent(TOP_ERROR, domElement);
      props = rawProps;
      break;
    case 'img':
    case 'image':
    case 'link':
      trapBubbledEvent(TOP_ERROR, domElement);
      trapBubbledEvent(TOP_LOAD, domElement);
      props = rawProps;
      break;
    case 'form':
      trapBubbledEvent(TOP_RESET, domElement);
      trapBubbledEvent(TOP_SUBMIT, domElement);
      props = rawProps;
      break;
    case 'details':
      trapBubbledEvent(TOP_TOGGLE, domElement);
      props = rawProps;
      break;
    case 'input':
      ReactDOMInput.initWrapperState