HTMLSlotElement: slotchange 事件
當 <slot> 元素 (HTMLSlotElement 例項) 中包含的節點發生變化時，會在此元素上觸發 slotchange 事件。
注意： 如果被插槽的節點內的子節點發生變化，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 |
瀏覽器相容性
載入中…
另見
HTMLSlotElement