面试题：Solid.js 事件处理中如何处理事件冒泡与捕获

Question

在 Solid.js 应用里，有一个嵌套的 DOM 结构，如一个 div 包裹着多个子元素。当点击子元素时，既要捕获事件在父 div 上做一些处理，又要防止事件冒泡到更外层元素。阐述在 Solid.js 中怎样配置事件处理函数来实现这样的需求，并解释 Solid.js 对事件冒泡和捕获的处理机制与原生 JavaScript 的异同。

Answer 1

在Solid.js中实现需求的方法

1. 添加事件处理函数：在Solid.js中，可以通过on指令来为元素添加事件处理函数。对于父div，添加点击事件处理函数来执行需要的处理逻辑。对于子元素，同样添加点击事件处理函数。
2. 阻止事件冒泡：在子元素的点击事件处理函数中，调用event.stopPropagation()方法来阻止事件冒泡到更外层元素。

示例代码如下：

import { createSignal } from 'solid-js';
import { render } from'solid-js/web';

const App = () => {
  const handleParentClick = () => {
    console.log('Parent div clicked');
  };

  const handleChildClick = (event) => {
    event.stopPropagation();
    console.log('Child element clicked');
  };

  return (
    <div on:click={handleParentClick}>
      <button on:click={handleChildClick}>Child Button</button>
      <span on:click={handleChildClick}>Child Span</span>
    </div>
  );
};

render(() => <App />, document.getElementById('app'));

Solid.js与原生JavaScript事件冒泡和捕获处理机制的异同

1. 相同点
   • 事件传播阶段：Solid.js和原生JavaScript都遵循事件传播的三个阶段：捕获阶段、目标阶段和冒泡阶段。在捕获阶段，事件从文档根节点向下传播到目标元素；在目标阶段，事件到达目标元素并执行目标元素的事件处理程序；在冒泡阶段，事件从目标元素向上传播回文档根节点。
   • 阻止冒泡和捕获：都可以通过event.stopPropagation()方法来阻止事件的进一步传播。在捕获阶段调用event.stopPropagation()可以阻止事件继续向下传播到目标元素，在冒泡阶段调用则可以阻止事件向上冒泡到祖先元素。
2. 不同点
   • 事件绑定方式：原生JavaScript通过addEventListener等方法直接在DOM元素上绑定事件处理函数。而Solid.js使用on指令在JSX中声明式地绑定事件处理函数，这种方式更符合声明式编程的风格，并且Solid.js对事件处理有其自身的优化机制，例如自动批处理更新等，以提高性能。
   • 性能优化：Solid.js对事件处理进行了优化，例如它的批处理机制。当一个事件触发导致多个状态更新时，Solid.js会将这些更新批量处理，避免不必要的重渲染，从而提高应用性能。而原生JavaScript本身没有这样的自动批处理机制，开发者需要手动管理以避免频繁的DOM操作和重渲染。