为什么setTimeout中的影子DOM事件重新定位？

问题描述 投票：0回答：1

具有从其自身侦听事件的影子DOM的自定义元素，如果可以从setTimeout中读取事件，则将其事件重定向（可能是？）>

<script>
    class Widget extends HTMLElement {
        constructor() {
            super();
            this.attachShadowDom();
            this.registerListener();
        }
        attachShadowDom() {
            let shadow = this.attachShadow({mode: 'open'});
            let templateClone = document.querySelector("#widget-template").content.cloneNode(true);
            shadow.appendChild(templateClone);
        }
        registerListener() {
            this.shadowRoot.querySelector("#my-input").addEventListener("input", (event) => {
                console.log(event.target);
                setTimeout(() => console.log(event.target), 0);
            });
        }
    }
    document.addEventListener("DOMContentLoaded", () => {
        customElements.define("my-widget", Widget);
    });
</script>

<html>
    <my-widget></my-widget>
</html>

<template id="widget-template">
    <input type="text" id="my-input">
</template>

在上面input元素中输入的每个字符都会将两个单独的事件目标记录到控制台：input元素和my-widget元素。我想知道这是否是设计使然？

如果具有影子DOM的自定义元素可以侦听自身的事件，那么（如果？）可以从setTimeout内读取事件，则将其目标重新定位（可能是？）：

影子树背后的想法是封装组件的内部实现细节[...]

因此，为了保留详细信息，浏览器将事件重新定位。
shadow-dom custom-element
1个回答
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.