当前位置： 首页 > news >正文

React19源码系列之合成事件机制

news 来源：原创 2025/6/12 22:30:55

React 合成事件原理，包括事件注册和派发两部分。

  • 事件注册从准备事件名开始，通过插件完成注册，将事件绑定在div#root上。
  • 事件派发需收集事件函数放入队列并执行。

例如，React 合成事件原理，如在点击之前的 Mout 阶段注册和监听原生事件，点击触发时提取并执行监听处理函数，模拟捕获和冒泡阶段的流程。

listenToAllSupportedEvents

listenToAllSupportedEvents 是一个在 React 源码中用于监听并处理所有支持的事件的函数。主要功能是为 React 应用的根容器元素（rootContainerElement）添加对所有支持的原生事件的监听。它会对事件监听进行去重处理，避免重复添加相同的事件监听器。同时，对于 selectionchange 事件会进行特殊处理，因为该事件不会冒泡，需要绑定到 document 对象上。

function listenToAllSupportedEvents(rootContainerElement: EventTarget) {// 检查 rootContainerElement 是否已经添加了事件监听器。如果没有，则将 listeningMarker 作为属性添加到 rootContainerElement 上，并将其值设为 true，表示已经添加了事件监听器。if (!(rootContainerElement: any)[listeningMarker]) {(rootContainerElement: any)[listeningMarker] = true;// allNativeEvents 是一个集合，包含了 React 支持的所有原生事件。// 遍历所有支持的原生事件allNativeEvents.forEach(domEventName => {if (domEventName !== 'selectionchange') {// 不在非委托事件集合中（nonDelegatedEvents非委托事件集合）if (!nonDelegatedEvents.has(domEventName)) {// 调用 listenToNativeEvent 函数添加委托的事件监听器。参数false代表冒泡listenToNativeEvent(domEventName, false, rootContainerElement);}// 调用 listenToNativeEvent 函数添加非委托的事件监听器。参数true代表捕获listenToNativeEvent(domEventName, true, rootContainerElement);}});// 获取 rootContainerElement 对应的 document 对象 ownerDocument。const ownerDocument =(rootContainerElement: any).nodeType === DOCUMENT_NODE? rootContainerElement: (rootContainerElement: any).ownerDocument;if (ownerDocument !== null) {if (!(ownerDocument: any)[listeningMarker]) {(ownerDocument: any)[listeningMarker] = true;// 由于 selectionchange 事件不会冒泡，需要将其绑定到 document 对象上。// 调用 listenToNativeEvent 函数添加 selectionchange 事件的非委托监听器。listenToNativeEvent('selectionchange', false, ownerDocument);}}}
}

变量之 allNativeEvents

allNativeEvents集合用于存储 React 所支持的所有原生 DOM 事件，并且根据配置项 enableCreateEventHandleAPI 的状态，决定是否向集合中添加特定的事件。

allNativeEvents 是一个 Set 类型的集合，Set 是 JavaScript 中的一种数据结构，它类似于数组，但成员的值都是唯一的，没有重复的值。

const allNativeEvents: Set<DOMEventName> = new Set();if (enableCreateEventHandleAPI) {allNativeEvents.add('beforeblur');allNativeEvents.add('afterblur');
}

registerDirectEvent

注册一个直接事件。在 React 的事件系统中，它会建立事件注册名（registrationName）和对应的原生 DOM 事件依赖项（dependencies）之间的映射关系，同时将这些依赖的原生 DOM 事件添加到 allNativeEvents 集合中。

函数参数含义：

  • registrationName：类型为 string，代表事件的注册名。在 React 中，开发者通常使用的是像 onClick、onChange 这样的合成事件名，这些就是注册名。
  • dependencies：类型为 Array<DOMEventName>，是一个数组，包含了该注册事件所依赖的原生 DOM 事件名。例如，onClick 可能依赖于 click 这个原生 DOM 事件。
function registerDirectEvent(registrationName: string,dependencies: Array<DOMEventName>,
) {
// registrationNameDependencies 是一个对象，用于存储事件注册名和其对应的原生 DOM 事件依赖项的映射关系。通过这行代码，将 registrationName 作为键，dependencies 数组作为值，存储到 registrationNameDependencies 对象中。这样，在后续处理事件时，就可以根据注册名找到对应的原生 DOM 事件。registrationNameDependencies[registrationName] = dependencies;// 使用 for 循环遍历 dependencies 数组，将其中的每个原生 DOM 事件名添加到 allNativeEvents 集合中。由于 Set 集合的特性，相同的事件名不会重复添加。for (let i = 0; i < dependencies.length; i++) {allNativeEvents.add(dependencies[i]);}
}

const registrationNameDependencies: {[registrationName: string]: Array<DOMEventName>,
} = {};

 示例：

// 假设 registrationNameDependencies 已经定义
const registrationNameDependencies = {};
// 假设 allNativeEvents 已经定义
const allNativeEvents = new Set();// 注册一个直接事件
registerDirectEvent('onClick', ['click']);// 查看映射关系
console.log(registrationNameDependencies); 
// 输出: { onClick: ['click'] }// 查看 allNativeEvents 集合
console.log(allNativeEvents); 
// 输出: Set { 'click' }

变量之 nonDelegatedEvents

事件委托是一种利用事件冒泡原理，将事件处理程序绑定到父元素上，从而处理子元素上触发的相同类型事件的技术。

不支持委托的事件如下。

const nonDelegatedEvents: Set<DOMEventName> = new Set(['beforetoggle',//'cancel','close','invalid','load',//'scroll',//'scrollend','toggle',//...mediaEventTypes,
]);const mediaEventTypes: Array<DOMEventName> = ['abort',//'canplay','canplaythrough','durationchange','emptied','encrypted','ended','error','loadeddata','loadedmetadata','loadstart','pause','play','playing','progress','ratechange','resize','seeked','seeking','stalled','suspend','timeupdate','volumechange','waiting',
];

listenToNativeEvent

为指定的 EventTarget 对象（如 DOM 元素）添加原生事件监听器。该函数会根据传入的参数决定是在捕获阶段还是冒泡阶段监听事件，并调用 addTrappedEventListener 函数来实际添加事件监听器。

函数参数含义：

  • domEventName：类型为 DOMEventName，代表要监听的原生 DOM 事件名称，例如 'click'、'mousemove' 等。
  • isCapturePhaseListener：类型为 boolean，用于指定是否在捕获阶段监听事件。如果值为 true，则在捕获阶段监听；如果值为 false，则在冒泡阶段监听。
  • target：类型为 EventTarget，表示要添加事件监听器的目标对象，通常是一个 DOM 元素。

function listenToNativeEvent(domEventName: DOMEventName,isCapturePhaseListener: boolean,// 是否捕获target: EventTarget,// 容器
): void {// 初始化事件系统标志let eventSystemFlags = 0;// 设置捕获阶段标志if (isCapturePhaseListener) {// IS_CAPTURE_PHASE是常量， 1 << 2 = 4 eventSystemFlags |= IS_CAPTURE_PHASE;}// addTrappedEventListener 函数会根据这些参数实际为目标对象添加事件监听器。addTrappedEventListener(target,domEventName,eventSystemFlags, //事件系统标志isCapturePhaseListener,// 是否在捕获阶段监听的标志);
}

addTrappedEventListener

addTrappedEventListener 函数的主要功能是为指定的目标元素添加原生事件监听器，同时支持根据事件类型和配置决定监听的阶段（捕获阶段或冒泡阶段）以及是否使用被动监听器。它会根据不同的情况对事件监听器进行封装和处理，并最终调用相应的函数来添加事件监听器，同时返回一个取消监听的函数。

 函数参数含义：

  • targetContainer：类型为 EventTarget，表示要添加事件监听器的目标元素，通常是一个 DOM 元素。
  • domEventName：类型为 DOMEventName，代表要监听的原生 DOM 事件名称，如 'click'、'touchstart' 等。
  • eventSystemFlags：类型为 EventSystemFlags，是一个用于存储事件系统相关标志的变量，用于表示事件的不同状态或特性。
  • isCapturePhaseListener：类型为 boolean，用于指定是否在捕获阶段监听事件。true 表示在捕获阶段监听，false 表示在冒泡阶段监听。
  • isDeferredListenerForLegacyFBSupport：可选参数，类型为 boolean，用于支持旧版的 Facebook 相关功能的延迟监听器。
function addTrappedEventListener(targetContainer: EventTarget,//挂载的目标元素domEventName: DOMEventName,//事件名称eventSystemFlags: EventSystemFlags,// 0isCapturePhaseListener: boolean,//是否捕获isDeferredListenerForLegacyFBSupport?: boolean,
) {// 创建事件监听器包装器//就是将浏览器事件进行分类，分为不同的优先级，每类优先级返回不同的函数let listener = createEventListenerWrapperWithPriority(targetContainer,domEventName,eventSystemFlags,);let isPassiveListener: void | boolean = undefined;// 判断是否为被动监听器if (passiveBrowserEventsSupported) {if (domEventName === 'touchstart' ||domEventName === 'touchmove' ||domEventName === 'wheel') {isPassiveListener = true;}}// 处理旧版支持的目标元素targetContainer =// 如果启用了旧版的 Facebook 相关支持（enableLegacyFBSupport 为 true）并且使用了延迟监听器（isDeferredListenerForLegacyFBSupport 为 true），则将目标元素替换为其所属的 document 对象。enableLegacyFBSupport && isDeferredListenerForLegacyFBSupport? (targetContainer: any).ownerDocument: targetContainer;// 处理旧版支持的监听器let unsubscribeListener;// 根据监听阶段和被动标志添加事件监听器// isCapturePhaseListener为true，表示在捕获阶段监听if (isCapturePhaseListener) {// 非被动监听if (isPassiveListener !== undefined) {unsubscribeListener = addEventCaptureListenerWithPassiveFlag(targetContainer,domEventName,listener,isPassiveListener,// 被动标识为true);} else {unsubscribeListener = addEventCaptureListener(targetContainer,domEventName,listener,);}} else {// 表示在冒泡阶段监听// 非被动监听if (isPassiveListener !== undefined) {unsubscribeListener = addEventBubbleListenerWithPassiveFlag(targetContainer,domEventName,listener,isPassiveListener,// 被动标识为true);} else {unsubscribeListener = addEventBubbleListener(targetContainer,domEventName,listener,);}}
}

createEventListenerWrapperWithPriority

根据传入的事件信息（目标容器、事件名称、事件系统标志），获取该事件的优先级，并根据不同的优先级返回对应的事件调度函数。最后，将该调度函数绑定到特定的参数上并返回。

函数参数含义：

  • targetContainer：类型为 EventTarget，表示要添加事件监听器的目标元素，通常是一个 DOM 元素。
  • domEventName：类型为 DOMEventName，代表要监听的原生 DOM 事件名称等。
  • eventSystemFlags：类型为 EventSystemFlags，是一个用于存储事件系统相关标志的变量，用于表示事件的不同状态或特性。
function createEventListenerWrapperWithPriority(targetContainer: EventTarget,domEventName: DOMEventName,eventSystemFlags: EventSystemFlags,// 事件系统标识
): Function {// 获取事件的优先级const eventPriority = getEventPriority(domEventName);let listenerWrapper;switch (eventPriority) {// 如果事件优先级是 DiscreteEventPriority（离散事件优先级），则将 listenerWrapper 赋值为 dispatchDiscreteEvent 函数。离散事件通常是一些需要立即处理的用户交互事件，如点击、键盘输入等。case DiscreteEventPriority:// 离散事件listenerWrapper = dispatchDiscreteEvent;break;// 如果事件优先级是 ContinuousEventPriority（连续事件优先级），则将 listenerWrapper 赋值为 dispatchContinuousEvent 函数。连续事件一般是一些连续的用户交互，如滚动、拖拽等。case ContinuousEventPriority:// 连续事件listenerWrapper = dispatchContinuousEvent;break;// 如果事件优先级是 DefaultEventPriority（默认事件优先级）或者是其他未匹配的优先级，则将 listenerWrapper 赋值为 dispatchEvent 函数。case DefaultEventPriority:// 默认事件default:listenerWrapper = dispatchEvent;break;}return listenerWrapper.bind(null,domEventName,eventSystemFlags,targetContainer,);
}

 不同优先级的派发函数：

dispatchDiscreteEvent：处理最高优先级事件（如点击、键盘输入），立即执行。

dispatchContinuousEvent：处理中等优先级事件（如滚动、拖拽），允许中断。

dispatchEvent：处理默认优先级事件（如加载、错误），按顺序执行。

具体派发函数是如何执行的，在后续的文章会做记录。

 工具函数之 getEventPriority

function getEventPriority(domEventName: DOMEventName): EventPriority {switch (domEventName) {// Used by SimpleEventPlugin:case 'beforetoggle':case 'cancel':case 'click':case 'close':case 'contextmenu':case 'copy':case 'cut':case 'auxclick':case 'dblclick':case 'dragend':case 'dragstart':case 'drop':case 'focusin':case 'focusout':case 'input':case 'invalid':case 'keydown':case 'keypress':case 'keyup':case 'mousedown':case 'mouseup':case 'paste':case 'pause':case 'play':case 'pointercancel':case 'pointerdown':case 'pointerup':case 'ratechange':case 'reset':case 'resize':case 'seeked':case 'submit':case 'toggle':case 'touchcancel':case 'touchend':case 'touchstart':case 'volumechange':// Used by polyfills: (fall through)case 'change':case 'selectionchange':case 'textInput':case 'compositionstart':case 'compositionend':case 'compositionupdate':// Only enableCreateEventHandleAPI: (fall through)case 'beforeblur':case 'afterblur':// Not used by React but could be by user code: (fall through)case 'beforeinput':case 'blur':case 'fullscreenchange':case 'focus':case 'hashchange':case 'popstate':case 'select':case 'selectstart':return DiscreteEventPriority;//离散事件优先级case 'drag':case 'dragenter':case 'dragexit':case 'dragleave':case 'dragover':case 'mousemove':case 'mouseout':case 'mouseover':case 'pointermove':case 'pointerout':case 'pointerover':case 'scroll':case 'touchmove':case 'wheel':// Not used by React but could be by user code: (fall through)case 'mouseenter':case 'mouseleave':case 'pointerenter':case 'pointerleave':return ContinuousEventPriority;// 连续事件优先级case 'message': {// We might be in the Scheduler callback.// Eventually this mechanism will be replaced by a check// of the current priority on the native scheduler.const schedulerPriority = getCurrentSchedulerPriorityLevel();switch (schedulerPriority) {case ImmediateSchedulerPriority:return DiscreteEventPriority;// 离散事件优先级case UserBlockingSchedulerPriority:return ContinuousEventPriority;// 连续事件优先级case NormalSchedulerPriority:case LowSchedulerPriority:// TODO: Handle LowSchedulerPriority, somehow. Maybe the same lane as hydration.return DefaultEventPriority;//默认事件优先级case IdleSchedulerPriority:return IdleEventPriority;// 空闲事件default:return DefaultEventPriority;}}default:return DefaultEventPriority;// 默认事件}
}

addEventCaptureListenerWithPassiveFlag 

为指定的目标元素添加一个在事件捕获阶段触发的事件监听器，并且支持设置被动监听器标志。被动监听器是一种特殊的监听器，使用它可以提高滚动等触摸事件的性能，因为它不会阻止默认行为（即不会调用 preventDefault 方法）。

函数参数含义：

  • target：类型为 EventTarget，表示要添加事件监听器的目标元素，例如 DOM 元素、document 对象或 window 对象等。
  • eventType：类型为 string，代表要监听的事件类型，如 'touchstart'、'touchmove'、'wheel' 等。
  • listener：类型为 Function，是一个回调函数，当指定的事件在目标元素上触发并处于捕获阶段时，该回调函数将被执行。
  • passive：类型为 boolean，用于指定是否使用被动监听器。如果值为 true，则表示使用被动监听器，即监听器不会阻止默认行为；如果值为 false，则不使用被动监听器。

function addEventCaptureListenerWithPassiveFlag(target: EventTarget,eventType: string,listener: Function,passive: boolean,// 父函数调用传进来的是true
): Function {target.addEventListener(eventType, listener, {capture: true,passive,//passive代表不会执行preventDefault});return listener;
}

addEventCaptureListener 

为指定的目标元素（target）添加一个在事件捕获阶段触发的事件监听器。

事件捕获是事件传播的第一个阶段，事件从文档根节点开始，依次向下传播到触发事件的具体元素。该函数借助原生的 addEventListener 方法达成此功能，并且返回所添加的事件监听器函数。

function addEventCaptureListener(target: EventTarget,eventType: string,listener: Function,
): Function {// 第三个参数 为true 代表捕获 target.addEventListener(eventType, listener, true);return listener;
}

工具函数之 addEventBubbleListener

addEventBubbleListener 为指定的目标元素（target）添加一个在事件冒泡阶段触发的事件监听器。

事件冒泡是指事件从最具体的元素开始触发，然后依次向上传播到其父元素，直到传播到文档根节点。

 函数参数含义：

  • target：类型为 EventTarget，表示要添加事件监听器的目标元素。在 Web 开发中，EventTarget 可以是 DOM 元素（如 div、button 等）、document 对象或 window 对象等。
  • eventType：类型为 string，代表要监听的事件类型，例如 'click'、'mouseover'、'keydown' 等。
  • listener：类型为 Function，是一个回调函数，当指定的事件在目标元素上触发并冒泡到该元素时，这个回调函数将被执行。
  • 返回值：返回类型为 Function，即返回添加的事件监听器函数本身。
function addEventBubbleListener(target: EventTarget,eventType: string,listener: Function,
): Function {target.addEventListener(eventType, listener, false);return listener;
}

addEventBubbleListenerWithPassiveFlag

为指定的目标元素添加一个在事件冒泡阶段触发的事件监听器，并且支持设置被动监听器标志。事件冒泡是指事件从最具体的元素开始触发，然后依次向上传播到其父元素，直到传播到文档根节点。被动监听器的作用是提高滚动等触摸事件的性能，因为它不会阻止默认行为（即不会调用 preventDefault 方法）。

function addEventBubbleListenerWithPassiveFlag(target: EventTarget,eventType: string,listener: Function,passive: boolean,
): Function {target.addEventListener(eventType, listener, {passive,});return listener;
}

全局常量 HTMLNodeType

export const ELEMENT_NODE = 1;
export const TEXT_NODE = 3;
export const COMMENT_NODE = 8;
export const DOCUMENT_NODE = 9;
export const DOCUMENT_TYPE_NODE = 10;
export const DOCUMENT_FRAGMENT_NODE = 11;

全局常量之事件优先级

// NoEventPriority 表示没有事件优先级
const NoEventPriority: EventPriority = NoLane;// DiscreteEventPriority 表示离散事件优先级，被映射到 SyncLane。离散事件通常是一些用户交互事件，如点击、键盘输入等，这些事件需要立即处理，以保证用户操作的即时响应。SyncLane 是同步车道，在这个车道上的更新任务会立即执行。
const DiscreteEventPriority: EventPriority = SyncLane;// ContinuousEventPriority 表示连续事件优先级，对应 InputContinuousLane。连续事件一般是一些连续的用户交互，如滚动、拖拽等。InputContinuousLane 是用于处理连续输入事件的车道，这些事件需要在一定的时间内持续处理，以保证交互的流畅性。
const ContinuousEventPriority: EventPriority = InputContinuousLane;// DefaultEventPriority 是默认事件优先级，映射到 DefaultLane。当没有明确指定事件优先级时，会使用默认优先级。DefaultLane 是一个通用的车道，用于处理大多数普通的更新任务
const DefaultEventPriority: EventPriority = DefaultLane;// IdleEventPriority 表示空闲事件优先级，与 IdleLane 对应。空闲事件是那些可以在浏览器空闲时执行的任务，例如一些非关键的渲染更新或数据处理。IdleLane 上的任务会在浏览器有空闲时间时才会被执行，以避免影响用户交互的性能。
const IdleEventPriority: EventPriority = IdleLane;

全局常量之事件状态

// IS_EVENT_HANDLE_NON_MANAGED_NODE：值为 1，对应的二进制表示是 00001。这个标志用于表示事件是否处理非托管节点。
export const IS_EVENT_HANDLE_NON_MANAGED_NODE = 1;// IS_NON_DELEGATED：使用位左移运算符 << 将 1 左移 1 位，得到值 2，二进制表示为 00010。该标志表示事件是否为非委托事件。
export const IS_NON_DELEGATED = 1 << 1;// IS_CAPTURE_PHASE：将 1 左移 2 位，值为 4，二进制表示为 00100。用于表示事件是否处于捕获阶段。
export const IS_CAPTURE_PHASE = 1 << 2;// IS_PASSIVE：将 1 左移 3 位，值为 8，二进制表示为 01000。表示事件监听器是否为被动监听器。
export const IS_PASSIVE = 1 << 3;// IS_LEGACY_FB_SUPPORT_MODE：将 1 左移 4 位，值为 16，二进制表示为 10000。用于表示是否启用旧版 Facebook 支持模式。
export const IS_LEGACY_FB_SUPPORT_MODE = 1 << 4;// IS_LEGACY_FB_SUPPORT_MODE 的二进制表示是 10000，IS_CAPTURE_PHASE 的二进制表示是 00100，按位或运算后得到 10100，对应的十进制值为 20。这个标志表示在旧版 Facebook 支持模式下且处于捕获阶段时，点击事件不应该被延迟处理。
export const SHOULD_NOT_DEFER_CLICK_FOR_FB_SUPPORT_MODE =IS_LEGACY_FB_SUPPORT_MODE | IS_CAPTURE_PHASE;

事件传播机制

在 DOM 事件模型中，事件的传播分为三个阶段：捕获阶段、目标阶段和冒泡阶段。

  • 捕获阶段：事件从文档根节点开始，依次向下传播到触发事件的具体元素。
  • 目标阶段：事件到达触发事件的目标元素。
  • 冒泡阶段：事件从目标元素开始，依次向上传播到文档根节点。

在添加事件监听器时，可以通过设置 capture 参数为 true 或 false 来指定监听器是在捕获阶段还是冒泡阶段触发。因此，在移除事件监听器时，也需要传入 capture 参数来明确要移除的是哪个阶段的监听器。

被动监听

在JavaScript中，被动监听（Passive Event Listeners）是一种事件监听机制，主要用于优化页面的滑动性能，特别是在移动设备上。

被动监听器（Passive Event Listeners）告诉浏览器该事件监听器是否会调用preventDefault函数来阻止事件的默认行为。

当事件监听器的passive属性设置为true时，表示该监听器不会调用preventDefault来阻止默认行为，这样浏览器可以更高效地处理滚动和其他交互事件，从而提升页面性。

委托事件与非委托事件

事件委托（Event Delegation） 和 非委托事件（直接绑定） 是两种处理 DOM 事件的基本模式。

它们的核心区别体现在 事件绑定位置、执行机制 和 性能优化 三个方面：

1. 事件绑定位置

  • 非委托事件：直接绑定到目标元素上
// 为每个按钮单独绑定点击事件
document.querySelectorAll('button').forEach(button => {button.addEventListener('click', handleClick);
});
  • 委托事件：绑定到父元素或根元素，利用事件冒泡机制捕获子元素事件
// 在父容器上统一处理所有按钮点击事件
document.querySelector('div').addEventListener('click', (e) => {if (e.target.tagName === 'BUTTON') {handleClick(e);}
});

2. 执行机制

非委托事件：

  • 每个元素独立响应：每个绑定元素都有独立的事件处理函数
  • 事件流路径完整：从 window 到目标元素，再冒泡回 window
  • 开销与元素数量成正比：绑定元素越多，内存占用和事件处理成本越高

委托事件：

  • 统一处理，动态匹配：事件在父元素上被捕获，通过 e.target 判断实际触发元素
  • 事件流优化：仅需在父元素上维护一个事件监听器
  • 动态元素自动生效：新增的子元素无需重新绑定事件

 
3. 性能与维护性

事件监听器(捕获与冒泡触发时机)

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>#box {height: 200px;width: 500px;background-color: orange;}#content {height: 50px;width: 50px;background-color: aqua;margin: 10px;}</style></head><body><p>事件监听器</p><div id="box"><div id="content"></div></div></body><script>const box = document.getElementById("box");const content = document.getElementById("content");box.addEventListener("click",(e) => {console.log("box-click", e);},true);content.addEventListener("click",(e) => {console.log("content-click", e);},true);</script>
</html>

操作：点击 content 块。

1、情况（设置捕获）

box.addEventListener("click",(e) => {console.log("box-click", e);},true
);content.addEventListener("click",(e) => {console.log("content-click", e);},true
);
box.addEventListener("click",(e) => {console.log("box-click", e);},true
);content.addEventListener("click",(e) => {console.log("content-click", e);},true
);

代码打印结果一致：

2、默认情况（Chrome 浏览器 冒泡）

box.addEventListener("click",(e) => {console.log("box-click", e);}
);content.addEventListener("click",(e) => {console.log("content-click", e);}
);

3、情况（设置冒泡）

box.addEventListener("click",(e) => {console.log("box-click", e);},false
);content.addEventListener("click",(e) => {console.log("content-click", e);},false
);

4、情况（一个设置捕获、一个设置冒泡）

content.addEventListener("click",(e) => {console.log("content-click", e);},false
);
box.addEventListener("click",(e) => {console.log("box-click", e);},true
);

box.addEventListener("click",(e) => {console.log("box-click", e);},true
);
content.addEventListener("click",(e) => {console.log("content-click", e);},false
);

注册顺序不同、打印结果一致：（可以看出捕获的先行执行）

5、情况（一个设置捕获、一个设置冒泡）

content.addEventListener("click",(e) => {console.log("content-click", e);},true
);
box.addEventListener("click",(e) => {console.log("box-click", e);},false
);

注册顺序不同、打印结果一致：（可以看出捕获的先行执行）

不可打印字符

不可打印字符（Non-printable Character）是指在计算机字符集中 无法通过常规打印机或显示器显示为可见符号 的字符。它们通常用于控制文本的格式、传输协议或系统功能，而非直接呈现给用户。

特点：

  1. 不可见性：在文本中显示为空白或特殊符号（如 \n、\t），但本质上不占用可视化空间。
  2. 功能性：用于文本格式化、设备控制或数据传输，例如：
    • 换行符（\n）控制文本换行
    • 传输结束符（ETX）标记数据传输终止
    • 制表符（\t）实现段落缩进

相关文章：

  • 数据库学习笔记(十五)--变量与定义条件与处理程序
  • 核方法、核技巧、核函数、核矩阵
  • Java 语言特性(面试系列2)
  • 关于Android camera2预览变形的坑
  • [创业之路-415]：经济学 - 价值、使用价值、交换价值的全面解析
  • MS9292+MS9332 HD/DVI转VGA转换器+HD环出带音频
  • HarmonyOS开发：设备管理使用详解
  • GISBox如何导入Revit格式的BIM数据？
  • Kotlin基础语法二
  • AI驱动下的商品详情API：2025年电商平台的智能化数据交互新趋势
  • ＜component :is=““＞
  • 【C++】回调函数，是什么，怎么用？
  • iview组件库：关于分页组件的使用与注意点
  • Spring Boot 分层架构与数据流转详解
  • uniapp的请求封装，如何避免重复提交请求
  • php利用createSheet生成excel表格（控制行高列宽、文本自动换行及表头字体样式）
  • RestClient
  • 基于数字孪生的水厂可视化平台建设：架构与实践
  • 【python深度学习】Day 50 预训练模型+CBAM模块
  • Lighttpd 配置选项介绍
  • 淘宝如何建网站/百度推广账号登陆入口
  • 网站设计网站开发/拼多多代运营一般多少钱
  • 个人品牌网站建设/网络推广好做吗?
  • 网站推广需要几个人做/网络推广的公司更可靠
  • 南宁手机平台网站建设/网站怎么搭建
  • 网站开发流程及详解/做seo用哪种建站程序最好