react合成事件

let stopPro = false;
// 1. React 初始化时，将事件处理程序附加到根容器上
function attachEventHandlers(rootContainer) {
  const eventTypes = ['click', 'change', 'input', 'keydown', 'keyup'];
  eventTypes.forEach(eventType => {
    rootContainer.addEventListener(eventType, handleEvent, false);
  });
}

// 2. 捕获到事件后处理事件
// 会从发生事件的Element一直冒泡到rootContainer触发handleEvent
// 所以这里就已经是执行完毕所有的原生事件了
function handleEvent(nativeEvent) {
  stopPro = false;
  // 3. 创建合成事件对象
  const syntheticEvent = createSyntheticEvent(nativeEvent);

  // 4. 查找事件目标和冒泡路径
  // 根据发生事件的Element获取真实的Element链（current => rootContainer）
  const eventPath = getEventPath(nativeEvent.target);

  // 5. 依次调用冒泡路径上的事件处理程序
  for (let i = 0; i < eventPath.length; i++) {
    // 对于这里， 其实在react的源码里面， rdom和vdom其实是彼此可以获取到对方的
    const element = eventPath[i];
    const handlers = element.__reactHandlers || {};
    const handler = handlers[nativeEvent.type];
    if (handler) {
      // 如果有合成事件， 就触发它
      handler(syntheticEvent);
    }
    // 合成事件已经阻止了冒泡
    if (stopPro) break;
  }
}

// 3. 创建合成事件对象
// 这里模拟合成事件的创建
function createSyntheticEvent(nativeEvent) {
  const syntheticEvent = {};
  for (let key in nativeEvent) {
    syntheticEvent[key] = nativeEvent[key];
  }
  syntheticEvent.nativeEvent = nativeEvent;
  syntheticEvent.preventDefault = () => nativeEvent.preventDefault();
  syntheticEvent.stopPropagation = () => {
    // 阻止合成事件冒泡
    stopPro = true;
  }
  return syntheticEvent;
}

// 4. 获取事件冒泡路径
function getEventPath(target) {
  const path = [];
  while (target) {
    path.push(target);
    target = target.parentElement;
  }
  return path;
}

// 示例组件中的事件处理程序
function handleClick(event) {
  console.log('合成事件: ', event);
  console.log('事件目标: ', event.target);
}

// 模拟组件挂载和事件处理程序绑定
function mountComponent(rootContainer) {
  const button = document.createElement('button');
  button.textContent = '点击我';
  button.__reactHandlers = { click: handleClick };
  rootContainer.appendChild(button);
}