Handle Events on Base Components

同学们，咱们今天聊聊在Lightning Web Components里怎么处理事件。这页Slide讲的其实就是事件的黄金法则，用起来很简单，但要想用得巧，有几个关键点你可得记牢。 首先，基本组件的事件处理，完全遵循咱们LWC的标准模式——就是“oneventname”这种写法。比如说，你想处理一个按钮的点击事件，直接加个`onclick`属性就行；要监听一个输入框内容的变化，就用`onchange`。这些标准DOM事件，你不需要做任何额外的配置，原生支持，开箱即用。 那如果遇到基本组件自己特有的自定义事件呢？举个例子，闪电数据表（lightning-datatable）选中某一行的时候，它会触发一个“行选择”事件，名字可能叫`rowselection`。这种事件怎么处理？很简单，去看那个组件的文档标签页，里面会明确写出事件叫什么名字、传递什么数据。你想监听它，就在使用组件的时候加上对应的`on`开头属性，比如`onrowselection`，然后写个处理方法。 反过来，如果你自己有个组件，里面包含了基本组件，你想从你这个组件里向父组件抛一个自定义事件，该怎么做？用`CustomEvent`构造函数。调用的时候，你可以通过一个叫`detail`的属性来携带数据。就像这样： ```javascript this.dispatchEvent(new CustomEvent('myevent', { detail: { message: '你好' } })); ``` 父组件里要监听，也是同样的规矩：用`on`加上你的事件名，比如`onmyevent`，事件对象里的`event.detail`就是你传过来的数据。 好了，基本操作讲完，咱们再来聊聊高阶的心法——事件传播的最佳实践，一共有三条。 第一条：除非万不得已，别用合成事件。什么是合成事件？就是那些能穿过阴影边界（shadow boundary）的事件。LWC组件的封装性很强，默认事件都只在当前组件的模板里流动。当你设置`composed: true`时，事件就会穿过阴影DOM，冒到更上层。这很强大，但也容易导致混乱，因为事件可能意外地触发别处的监听器。所以，能不穿透就别穿透。 第二条：如果你确实需要合成事件，记得在预期处理它的那个目标组件上，把传播停下来。用什么方法？在事件处理方法里调用`event.stopPropagation()`，这样可以防止事件继续向上冒泡，干扰到更不该感知它的组件。 第三条：无论在哪种场景下，都要尽量减少不必要的传播。事件冒泡越深，影响范围越大，越容易产生副作用——比如不小心更新了不该更新的状态，或者触发了多余的逻辑。干净、可控，才是好代码。 默认情况下，LWC里的自定义事件是不会冒泡（bubbles: false）也不会穿过阴影边界（composed: false）的，这其实是一种安全的默认设计。除非你明确传入了`bubbles: true, composed: true`，否则事件就只在当前组件内部自生自灭，不会往外泄漏。所以，你要根据实际需要来决定是否放手让它传出去。 总结一下，处理事件记住三点：标准事件直接用，自定义事件查文档，抛事件用CustomEvent带detail，监听永远是`on`加事件名。至于传播，谨慎使用合成，及时停止，别让事件满天飞。这样你写的组件，既灵活又稳健。 好，这一页就讲到这里，有问题随时提。