Chrome 源码阅读：跟踪一个鼠标事件的流程

我们通过在关键节点打断点的方式，去分析一个鼠标事件的流程。
我们知道chromium是多进程模子，那么，我们可以推测：一个鼠标消息先从主进程产生，再通过跨进程通讯发送给渲染进程，渲染进程再发送给WebFrame，最后被派发到目标Node上。
于是，起首，我们在主进程，找到鼠标时间的最终消耗点，打上断点，进行分析：

主进程继续往下走，就是把事件通过跨进程通讯框架mojo发送过去的逻辑了：

接下来，我们要换个进程，在渲染进程打上断点，看看消息过来后，怎么走的流程：
起首搜索这个mojom的事件，确认渲染进程断点落脚处：

题外话：这个input_handler.mojom.cc到了渲染进程那就成了input_handler.mojom-blink.cc了。
这两个文件99%相似，只有少量的差别（定名空间、基础范例）：

这两个类的基类是一样的：

这个类的头文件写明了，是由什么工具生成的：

很好奇生成源，我们也去看看：

1. // Copyright 2020 The Chromium Authors
2. // Use of this source code is governed by a BSD-style license that can be
3. // found in the LICENSE file.
5. module blink.mojom;
7. import "cc/mojom/browser_controls_state.mojom";
8. import "cc/mojom/overscroll_behavior.mojom";
9. import "cc/mojom/touch_action.mojom";
10. import "mojo/public/mojom/base/string16.mojom";
11. import "mojo/public/mojom/base/time.mojom";
12. import "third_party/blink/public/mojom/input/gesture_event.mojom";
13. import "third_party/blink/public/mojom/input/handwriting_gesture_result.mojom";
14. import "third_party/blink/public/mojom/input/input_event_result.mojom";
15. import "third_party/blink/public/mojom/input/input_event.mojom";
16. import "third_party/blink/public/mojom/input/pointer_lock_context.mojom";
17. import "third_party/blink/public/mojom/input/pointer_lock_result.mojom";
18. import "third_party/blink/public/mojom/input/ime_host.mojom";
19. import "third_party/blink/public/mojom/input/stylus_writing_gesture.mojom";
20. import "third_party/blink/public/mojom/input/touch_event.mojom";
21. import "third_party/blink/public/mojom/selection_menu/selection_menu_behavior.mojom";
22. import "ui/base/ime/mojom/ime_types.mojom";
23. import "ui/events/mojom/event_constants.mojom";
24. import "ui/events/mojom/event_latency_metadata.mojom";
25. import "ui/events/mojom/event.mojom";
26. import "ui/events/mojom/scroll_granularity.mojom";
27. import "ui/gfx/geometry/mojom/geometry.mojom";
28. import "ui/gfx/range/mojom/range.mojom";
29. import "ui/latency/mojom/latency_info.mojom";
31. [EnableIf=is_android]
32. import "third_party/blink/public/mojom/input/synchronous_compositor.mojom";
34. // These structs are purposely duplicated from ui/events/mojom/event.mojom.
35. // They map WebInputEvent <-> WebInputEvent across mojo.
36. // We have to work at unifying them. The current problem is that the browser
37. // uses WebInputEvents inside the render widget host and input router. Once
38. // we move these to ui::Event's then we can get rid of these duplicated
39. // mojom structs. Ideally the browser would use ui::Event up until we
40. // pass the events into the renderer and just use a StructTraits to perform
41. // conversion from ui::mojom::Event --> blink::WebInputEvent.
42. struct KeyData {
43.   int32 dom_key;
44.   int32 dom_code;
45.   int32 windows_key_code;
46.   int32 native_key_code;
47.   bool is_system_key;
48.   bool is_browser_shortcut;
49.   mojo_base.mojom.String16 text;
50.   mojo_base.mojom.String16 unmodified_text;
51. };
53. struct PointerData {
54.   int32 pointer_id;
55.   float force;
56.   double tilt_x;
57.   double tilt_y;
58.   float tangential_pressure;
59.   int32 twist;
60.   blink.mojom.Button button;
61.   ui.mojom.EventPointerType pointer_type;
62.   int32 movement_x;
63.   int32 movement_y;
64.   bool is_raw_movement_event;
65.   gfx.mojom.PointF widget_position;
66.   gfx.mojom.PointF screen_position;
67.   MouseData? mouse_data;
68.   int32 device_id;
69. };
71. struct WheelData {
72.   float delta_x;
73.   float delta_y;
74.   float wheel_ticks_x;
75.   float wheel_ticks_y;
76.   float acceleration_ratio_x;
77.   float acceleration_ratio_y;
78.   uint8 phase;
79.   uint8 momentum_phase;
80.   blink.mojom.DispatchType cancelable;
81.   uint8 event_action;
82.   uint8 delta_units;
83. };
85. struct MouseData {
86.   int32 click_count;
87.   WheelData? wheel_data;
88. };
90. struct ScrollUpdate {
91.   float velocity_x;
92.   float velocity_y;
93. };
95. struct ScrollData {
96.   float delta_x;
97.   float delta_y;
98.   ui.mojom.ScrollGranularity delta_units;
99.   bool target_viewport;
100.   blink.mojom.InertialPhaseState inertial_phase;
101.   bool synthetic;
102.   int32 pointer_count;
103.   // Used for GestureScrollBegin type only. If this is true, we use the scroll
104.   // sequence to do cursor control rather than scroll.
105.   bool cursor_control;
106.   ScrollUpdate? update_details;
107. };
109. struct PinchBeginData {
110.   bool needs_wheel_event;
111. };
113. struct PinchUpdateData {
114.   float scale;
115.   bool zoom_disabled;
116.   bool needs_wheel_event;
117. };
119. struct PinchEndData {
120.   bool needs_wheel_event;
121. };
123. struct FlingData {
124.   float velocity_x;
125.   float velocity_y;
126.   bool target_viewport;
127.   bool prevent_boosting;
128. };
130. struct TapData {
131.   int32 tap_count;
132.   bool needs_wheel_event;
133. };
135. struct TapDownData {
136.   int32 tap_down_count;
137. };
139. struct GestureData {
140.   gfx.mojom.PointF screen_position;
141.   gfx.mojom.PointF widget_position;
142.   blink.mojom.GestureDevice source_device;
143.   bool is_source_touch_event_set_blocking;
144.   ui.mojom.EventPointerType primary_pointer_type;
145.   int32 primary_unique_touch_event_id;
146.   int32 unique_touch_event_id;
147.   gfx.mojom.Size? contact_size;
148.   ScrollData? scroll_data;
149.   PinchBeginData? pinch_begin_data;
150.   PinchUpdateData? pinch_update_data;
151.   PinchEndData? pinch_end_data;
152.   TapData? tap_data;
153.   TapDownData? tap_down_data;
154.   FlingData? fling_data;
155. };
157. struct TouchPoint {
158.   blink.mojom.TouchState state;
159.   float radius_x;
160.   float radius_y;
161.   float rotation_angle;
162.   PointerData pointer_data;
163. };
165. struct TouchData {
166.   blink.mojom.DispatchType cancelable;
167.   bool moved_beyond_slop_region;
168.   bool touch_start_or_first_move;
169.   bool hovering;
170.   uint32 unique_touch_event_id;
171.   array<TouchPoint> touches;
172. };
174. struct Event {
175.   blink.mojom.EventType type;
176.   int32 modifiers;
177.   mojo_base.mojom.TimeTicks timestamp;
178.   ui.mojom.LatencyInfo latency;
179.   ui.mojom.EventLatencyMetadata event_latency_metadata;
180.   KeyData? key_data;
181.   PointerData? pointer_data;
182.   GestureData? gesture_data;
183.   TouchData? touch_data;
184. };
186. // Represents the current state of overscroll.
187. struct DidOverscrollParams {
188.   gfx.mojom.Vector2dF accumulated_overscroll;
189.   gfx.mojom.Vector2dF latest_overscroll_delta;
190.   gfx.mojom.Vector2dF current_fling_velocity;
191.   gfx.mojom.PointF causal_event_viewport_point;
192.   cc.mojom.OverscrollBehavior overscroll_behavior;
193. };
195. // A struct wrapper for the TouchAction enumeration because
196. // enumerations cannot be optional.
197. struct TouchActionOptional {
198.   cc.mojom.TouchAction touch_action;
199. };
201. // Types related to sending edit commands to the renderer.
202. struct EditCommand {
203.   string name;
204.   string value;
205. };
207. // A structure that indicates selection offsets if the selection could be
208. // established.
209. struct SelectAroundCaretResult {
210.   // The offset differences between the extended selection and the initial
211.   // selection (which is a caret).
212.   int32 extended_start_adjust;
213.   int32 extended_end_adjust;
214.   // The offset differences between the word selection (regardless of the
215.   // extended selection granularity) and the initial selection (which is a
216.   // caret).
217.   int32 word_start_adjust;
218.   int32 word_end_adjust;
219. };
221. // GENERATED_JAVA_ENUM_PACKAGE: org.chromium.blink_public.input
222. // GENERATED_JAVA_CLASS_NAME_OVERRIDE: SelectionGranularity
223. enum SelectionGranularity {
224.   kWord,
225.   kSentence,
226. };
228. // An enumeration that describes the allowed non-directional pan action for the
229. // element under pointer being considered.
230. enum PanAction {
231.   // No pan action allowed.
232.   kNone,
233.   // Pan action is scroll.
234.   kScroll,
235.   // Pan action moves cursor when initial touch move is in horizontal direction,
236.   // or scrolls in the vertical direction.
237.   kMoveCursorOrScroll,
238.   // Pan action is stylus writable.
239.   kStylusWritable,
240. };
242. // Interface exposed by the browser to the renderer.
243. interface WidgetInputHandlerHost {
244.   // When the renderer's main thread computes the touch action, send this to the
245.   // browser.
246.   SetTouchActionFromMain(cc.mojom.TouchAction touch_action);
248.   // Sets the pan action possible for the element under pointer which could be
249.   // one of the actions described under enum PanAction. Note that this is
250.   // different from TouchAction and does not contain directional pan info.
251.   SetPanAction(PanAction pan_action);
253.   // Sent by the compositor when input scroll events are dropped due to bounds
254.   // restrictions on the root scroll offset.
255.   DidOverscroll(DidOverscrollParams params);
257.   // Sent by the compositor when a GSB has started scrolling the viewport.
258.   DidStartScrollingViewport();
260.   // Required for cancelling an ongoing input method composition.
261.   ImeCancelComposition();
263.   // Sends the character bounds after every composition change
264.   // to always have correct bound info.
265.   ImeCompositionRangeChanged(gfx.mojom.Range range,
266.                              array<gfx.mojom.Rect>? character_bounds,
267.                              array<gfx.mojom.Rect>? line_bounds);
269.   // Updates the mouse capture state of this widget. While capture is enabled,
270.   // all mouse events, including those that don't hittest to this widget, will
271.   // be targeted to this widget. This enables Blink to behave correctly when
272.   // a scrollbar is being dragged, or text is being drag-highlighted, even
273.   // when the mouse passes across different RenderWidget areas.
274.   SetMouseCapture(bool capture);
276.   // Updates the browser whether this main frame widget has ongoing autoscroll
277.   // selection. Any further mouse up event should always be dispatched to the
278.   // main frame in addition to it's event target (OOP child frame) if the state
279.   // is active. This API should only ever be called on the InputHandler for a
280.   // main frame's RenderWidgetHost.
281.   SetAutoscrollSelectionActiveInMainFrame(bool autoscroll_selection);
283.   // Requests locking the target of mouse events to a single element and
284.   // removing the cursor from view.  Mostly used by the Pointer Lock API.
285.   // See https://www.w3.org/TR/pointerlock/ for more info. This call is
286.   // also used by Pepper Flash.
287.   // |from_user_gesture| indicates whether this request came from a user
288.   // gesture or not.
289.   // |unadjusted_movement| indicates whether the request asked for raw mouse
290.   // movement data or just what the operating system returns (often accelerated
291.   // mouse movement).
292.   // |result| kSuccess if the mouse has been locked or the appropriate error
293.   // reason if not.
294.   // |context| is one end of a mojo pipe that will stay connected as long as
295.   // the mouse is locked. Is a NullRemote if |result| is not kSuccess.
296.   RequestMouseLock(bool from_user_gesture,
297.                    bool unadjusted_movement)
298.       => (PointerLockResult result,
299.           pending_remote<blink.mojom.PointerLockContext>? context);
300. };
302. // This interface provides the input actions associated with the FrameWidget.
303. // Other input actions may also be dispatched via the WidgetInputHandler
304. // interface. If frame input actions are dispatched the WidgetInputHandler
305. // should be fetched via the associated interface request so that input calls
306. // remain in order. See https://goo.gl/x4ee8A for more details.
307. interface FrameWidgetInputHandler {
308.   // Adds text decorations between a given valid start and end offsets in the
309.   // currently focused editable field.
310.   AddImeTextSpansToExistingText(
311.     uint32 start, uint32 end, array<ui.mojom.ImeTextSpan> ime_text_spans);
313.   // Clears text decorations type between a given valid start and end offsets
314.   // in the currently focused editable field.
315.   ClearImeTextSpansByType(
316.     uint32 start, uint32 end, ui.mojom.ImeTextSpanType type);
318.   // Sets the text composition to be between the given start and end offsets in
319.   // the currently focused editable field.
320.   SetCompositionFromExistingText(
321.       int32 start, int32 end, array<ui.mojom.ImeTextSpan> ime_text_spans);
323.   // Deletes the current selection plus the specified number of characters
324.   // before and after the selection or caret.
325.   ExtendSelectionAndDelete(int32 before, int32 after);
327.   // Deletes the current selection plus the specified number of characters
328.   // before and after the selection or caret.
329.   ExtendSelectionAndReplace(uint32 before,
330.                             uint32 after,
331.                             mojo_base.mojom.String16 replacement_text);
333.   // Deletes text before and after the current cursor position, excluding the
334.   // selection. The lengths are supplied in Java chars (UTF-16 Code Unit),
335.   // not in code points or in glyphs.
336.   DeleteSurroundingText(int32 before, int32 after);
338.   // Deletes text before and after the current cursor position, excluding the
339.   // selection. The lengths are supplied in code points, not in Java chars
340.   // (UTF-16 Code Unit) or in glyphs. Does nothing if there are one or more
341.   // invalid surrogate pairs in the requested range
342.   DeleteSurroundingTextInCodePoints(int32 before, int32 after);
344.   // Selects between the given start and end offsets in the currently focused
345.   // editable field.
346.   SetEditableSelectionOffsets(int32 start, int32 end);
348.   // Stylus Writing - perform Gesture action in input using gesture data.
349.   HandleStylusWritingGestureAction(
350.     blink.mojom.StylusWritingGestureData gesture_data)
351.       => (HandwritingGestureResult result);
353.   // Message payload is the name/value of a WebCore edit command to execute.
354.   ExecuteEditCommand(string command, mojo_base.mojom.String16? value);
356.   // These messages are typically generated from context menus and request the
357.   // renderer to apply the specified operation to the current selection.
358.   Undo();
359.   Redo();
360.   Cut();
361.   Copy();
362.   CopyToFindPboard();
363.   CenterSelection();
364.   Paste();
365.   PasteAndMatchStyle();
366.   Delete();
367.   SelectAll();
368.   CollapseSelection();
370.   // Pushed from the browser to the renderer each time the IME is activated,
371.   // e.g. an editable element becomes focused.
372.   [EnableIf=is_android]
373.   PassImeRenderWidgetHost(pending_remote<ImeRenderWidgetHost> remote);
375.   // Replaces the selected region or a word around the cursor with the
376.   // specified string.
377.   Replace(mojo_base.mojom.String16 word);
379.   // Replaces the misspelling in the selected region with the specified string.
380.   ReplaceMisspelling(mojo_base.mojom.String16 word);
382.   // Requests the renderer to select the region between two points.
383.   // Expects a SelectRange_ACK message when finished.
384.   SelectRange(gfx.mojom.Point base, gfx.mojom.Point extent);
386.   // Sent by the browser to ask the renderer to adjust the selection start and
387.   // end points by the given amounts. A negative amount moves the selection
388.   // towards the beginning of the document, a positive amount moves the
389.   // selection towards the end of the document. Will send show selection menu
390.   // event when needed.
391.   AdjustSelectionByCharacterOffset(
392.       int32 start, int32 end, SelectionMenuBehavior behavior);
394.   // Requests the renderer to select the specified granularity around caret and
395.   // to potentially show the selection handles and / or context menu after
396.   // selection.
397.   // Expects ack with new selection information when finished, or null if the
398.   // selection failed.
399.   SelectAroundCaret(SelectionGranularity granularity, bool should_show_handle,
400.                     bool should_show_context_menu)
401.       => (SelectAroundCaretResult? result);
403.   // Requests the renderer to move the selection extent point to a new position.
404.   // Expects a MoveRangeSelectionExtent_ACK message when finished.
405.   MoveRangeSelectionExtent(gfx.mojom.Point extent);
407.   // Tells the renderer to scroll the currently focused node into view only if
408.   // the currently focused node is a Text node (textfield, text area or content
409.   // editable divs).
410.   ScrollFocusedEditableNodeIntoView();
412.   // Replies when the next PageScaleAnimation has completed. Can only be called
413.   // on the outermost main frame. Can be used to reliably wait for a
414.   // ScrollFocusedEditableNodeIntoView to complete since that may create a
415.   // PageScaleAnimation which can take several frames to complete.
416.   // ScrollFocusedEditableNodeIntoView cannot use a reply callback for this
417.   // since it may be called on a subframe but the scroll will be completed in
418.   // another renderer when it bubbles up to the root. Additionally, the caller
419.   // may not be the one to have called ScrollFocusedEditableNodeIntoView; for
420.   // example, a test that simulates tapping an input box.
421.   WaitForPageScaleAnimationForTesting() => ();
423.   // Requests the renderer to move the caret selection toward the point.
424.   MoveCaret(gfx.mojom.Point point);
425. };
427. // An enumeration describing the active and focus states. If a widget is
428. // focused then it must also be active, therefore there is no focused and
429. // not active value in this enumeration. All widgets in a tab will have
430. // the same active state. Active state is tab specific, and focus state is
431. // frame specific. See
432. // https://www.chromium.org/developers/design-documents/aura/focus-and-activation/
433. enum FocusState
434. {
435.   kFocused,
436.   kNotFocusedAndActive,
437.   kNotFocusedAndNotActive
438. };
440. // Interface exposed by the renderer to the browser. This class represents
441. // an input interface for an associated Widget object. See FrameWidgetInputHandler
442. // for an interface at the frame level.
443. interface WidgetInputHandler {
444.   // Tells widget focus has been changed.
445.   SetFocus(FocusState state);
447.   // Tells widget mouse capture has been lost.
448.   MouseCaptureLost();
450.   // This message notifies the renderer that the next key event is bound to one
451.   // or more pre-defined edit commands. If the next key event is not handled
452.   // by blink, the specified edit commands shall be executed against current
453.   // focused frame.
454.   // Parameters
455.   // * edit_commands
456.   //   See t_p/b/renderer/core/editing/commands/editing_command_type.h
457.   //   Contains one or more edit commands.
458.   // See t_p/b/renderer/core/editing/commands/editor_command.cc for
459.   // detailed definition of webkit edit commands.
460.   //
461.   // This message must be sent just before sending a key event.
462.   SetEditCommandsForNextKeyEvent(array<EditCommand> commands);
464.   // Sends the cursor visibility state to the render widget.
465.   CursorVisibilityChanged(bool visible);
467.   // This message sends a string being composed with an input method.
468.   // Note, the response is specifically for Devtools to learn about completion
469.   ImeSetComposition(mojo_base.mojom.String16 text,
470.                     array<ui.mojom.ImeTextSpan> ime_text_spans,
471.                     gfx.mojom.Range range, int32 start, int32 end) => ();
473.   // This message deletes the current composition, inserts specified text, and
474.   // moves the cursor.
475.    // Note, the response is specifically for Devtools to learn about completion
476.   ImeCommitText(mojo_base.mojom.String16 text,
477.                 array<ui.mojom.ImeTextSpan> ime_text_spans,
478.                 gfx.mojom.Range range, int32 relative_cursor_position) => ();
480.   // This message inserts the ongoing composition.
481.   ImeFinishComposingText(bool keep_selection);
483.   // Request from browser to update text input state.
484.   RequestTextInputStateUpdate();
486.   // Request from browser to update the cursor and composition information which
487.   // will be sent through ImeCompositionRangeChanged. Setting
488.   // |immediate_request| to true  will lead to an immediate update. If
489.   // |monitor_updates| is set to true then changes to text selection or regular
490.   // updates in each compositor frame (when there is a change in composition
491.   // info) will lead to updates being sent to the browser.
492.   RequestCompositionUpdates(bool immediate_request, bool monitor_request);
494.   // Sends an input event to the render widget. The browser should use this
495.   // API if it wants to know about the result of the rendering handling
496.   // the event. The callback may be delayed based on the event running on
497.   // the main thread so DispatchNonBlockingEvent is always preferred if
498.   // you don't require notification.
499.   DispatchEvent(Event event)
500.       => (blink.mojom.InputEventResultSource source,
501.          ui.mojom.LatencyInfo updated_latency,
502.          blink.mojom.InputEventResultState state,
503.          DidOverscrollParams? overscroll,
504.          TouchActionOptional? touch_action);
506.   // Sends a non-blocking input event to the render widget. The behaviour
507.   // of this API is the same as DispatchEvent just that there is no callback
508.   // after the event is processed.
509.   DispatchNonBlockingEvent(Event event);
511.   // Forces input to be flushed and resolves the callback only once the input
512.   // has been fully processed, meaning its effects are visible to the full
513.   // system. In practice, this will force a redraw and wait until the new
514.   // CompositorFrame (containing all changes caused by prior input) has been
515.   // displayed.
516.   WaitForInputProcessed() => ();
518.   // Attach the synchronous compositor interface. This method only
519.   // should be called for Android WebView.
520.   [EnableIf=is_android]
521.   AttachSynchronousCompositor(
522.       pending_remote<SynchronousCompositorControlHost> control_host,
523.       pending_associated_remote<SynchronousCompositorHost> host,
524.       pending_associated_receiver<SynchronousCompositor> compositor_request);
526.   // Return an associated FrameWidgetInputHandler interface so that input
527.   // messages to the frame associated with this widget can be sent
528.   // serially.
529.   GetFrameWidgetInputHandler(
530.       pending_associated_receiver<FrameWidgetInputHandler> interface_request);
532.   // Notifies the renderer whether hiding/showing the browser controls is
533.   // enabled, what the current state should be, and whether or not to
534.   // animate to the proper state.
535.   UpdateBrowserControlsState(cc.mojom.BrowserControlsState constraints,
536.                              cc.mojom.BrowserControlsState current,
537.                              bool animate);
538. };

复制代码

可见，这个生成的不止一个事件，包含了大部门用户事件了。去看看所在目录，也开端认识blink的目录结构了：

后面我们再详细介绍这套mojo跨进程通讯框架的细节。

言归正传，我们attach到render进程，继续打断点跟踪鼠标事件。
想在渲染进程找到WidgetInputHandler类对应的消息，只需要在后面加个Impl即可，我们通过符号跳转，找到WidgetInputHandlerImpl类：

接下来，中心弯弯绕绕太多，我们直接在node打个断点，看看鼠标事件如何通报到node具体的处理逻辑中的：

事件起首被捕获并封装为一个MouseEvent或PointerEvent对象。然后通过EventDispatcher类和相关方法，事件被分发到目标Node。对应的HTML元素（通过HTMLElement和特化的TextControlInnerEditorElement）会处理这个事件，然后这个时间触发默认基类的处理器。
WebFrameWidget:继续自WebWidget，但是大部门函数依然是虚函数，用于专门负责处理一个WebFrame（即一个网页框架）的渲染和事件。假如要想表现一个网页，那么需要继续自WebFrameWidget并实现相关纯虚函数。
WebFrameWidgetImpl:是WebFrameWidget在blink里的一个具体实现类。它实现了接口中定义的全部方法，并提供了框架的具体行为。WebFrameWidgetImpl负责实际的绘图逻辑、输入事件处理、视图的更新和巨细调整等。这个实现将抽象的行为具体化，它通过调用Blink渲染引擎的其他组件，如布局引擎、绘图系统等，来完成对Web内容的渲染和事件处理。WebFrameWidgetImpl是Web内容在Blink中被渲染的核心地方，它直接与底层的渲染流水线交互。
讲到这里，也要引出一个重量级的基类：Node：
   Node 类是一个非常重要的基类，它表示文档中的一个节点。Node 类扮演了核心角色，以下是对 Node 类及其作用的更详细介绍：
  

• 层次结构:
  Node 类位于 DOM（文档对象模子）层次结构中的基础位置。在 DOM 中，全部的元素、文本内容和属性都被视为节点。因此，Node 类提供了一系列的基础方法和属性，用于管理节点之间的关系（例如父子关系和兄弟关系）、节点的遍历以及节点的基本操纵（比如插入、更换、删除）。
  
• 事件模子:
  Node 类照旧事件模子的一部门。在 Blink 中，事件通常会在节点之间传播，遵循捕获阶段、目标阶段和冒泡阶段。Node 类提供了事件处理的相关方法，比如绑定事件监听器、分发事件等。当事件发生时，比如用户的点击或键盘操纵，它会被分发到精确的 Node 对象，并且通过事件监听器进行相应的处理。
  
• 渲染:
  虽然 Node 类自己并不直接处理渲染，但它的派生类，如 Element 和特化后的 HTMLElement，会存储与渲染相关的属性（例如样式信息）。这些类将 Node 的基础功能扩展到了渲染管线中，这样渲染引擎就可以利用这些信息来出现视觉元素。
  
• 范例多样性:
  DOM 中有差别范例的节点，包括但不限于元素节点（Element）、文本节点（Text）、注释节点（Comment）和文档节点（Document）。Node 类是这些具体节点范例的基类，通过继续和多态，差别范例的节点可以拥有特化的行为，并且仍旧可以大概通过 Node 类的接口进行通用处理。
  
• API 和脚本接口:
  Node 类还提供了一系列的 API，供 JavaScript 脚本访问和操纵节点。开辟者可以通过这些 API 查询节点信息、修改节点结构、动态添加或移除节点等。这为开辟者提供了强盛的能力来改变页面内容和行为。
  

  总的来说，Node 类是 Blink 和 Web 开辟者用来操纵和理解 Web 页面结构的基础，它为构建、遍历和交互提供了基本的框架。通过 Node 及其派生类，Blink 渲染引擎可以大概将结构化的 HTML 文档转化为用户可以看到和交互的网页。
  未完待续 ....

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。