HTMLSlotElement：slotchange 事件

基线 广泛可用

此功能已得到良好建立，并在许多设备和浏览器版本上都能正常运行。它自以下版本起在所有浏览器中都可用 2020年1月.

slotchange 事件在 HTMLSlotElement 实例（<slot> 元素）上触发，当该插槽中包含的节点发生变化时。

注意：如果已插槽节点的子节点发生变化，则不会触发 slotchange 事件——只有在您更改（例如添加或删除）实际节点本身时才会触发。

为了触发 slotchange 事件，必须设置或删除 slot 属性。

此事件不可取消。

语法

在诸如 addEventListener() 之类的方法中使用事件名称，或设置事件处理程序属性。

js
addEventListener("slotchange", (event) => {});

onslotchange = (event) => {};

事件类型

一个通用的 Event。

示例

js
element.setAttribute("slot", slotName);
// element.assignedSlot = $slot
element.removeAttribute("slot");
// element.assignedSlot = null

以下代码段取自我们的 slotchange 示例（也可以在线查看）。

js
let slots = this.shadowRoot.querySelectorAll("slot");
slots[1].addEventListener("slotchange", (e) => {
  let nodes = slots[1].assignedNodes();
  console.log(
    `Element in Slot "${slots[1].name}" changed to "${nodes[0].outerHTML}".`,
  );
});

在这里，我们获取对所有 <slot> 的引用，然后向模板的第二个插槽添加 slotchange 事件监听器——该插槽的内容在示例中发生了更改。

每次插入到插槽中的元素发生更改时，我们都会向控制台记录一条报告，说明哪个插槽发生了更改，以及插槽内的新节点是什么。

规范

规范
DOM 标准
# eventdef-htmlslotelement-slotchange
HTML 标准
# handler-onslotchange

浏览器兼容性

BCD 表格仅在启用了 JavaScript 的浏览器中加载。

另请参阅

HTMLSlotElement