如何将事件侦听器添加到 Web 组件模板元素

Question

我正在为我的投资组合构建一个带有一些附加功能的 Twitter 克隆。我正在使用 Web 组件的模板标签创建推文模板，然后在单击 post 推文按钮时使用 importNode 将其呈现到 DOM 中。这很好用。

我添加了一个编辑按钮，点击后应该运行一个功能：

         tweetTemplate.content.querySelector('#button').onclick = () =>{
            createTweetContainer.style.display = "block";
            console.log("edit button clicked");
        }

但是，这不起作用。单击按钮时，创建推文容器应该可见。我还希望该按钮对于每个导入的模板都是唯一的，因为即使是相同的模板，用户也应该能够编辑该特定推文。

我已经阅读了关于 Web 组件、自定义元素、阴影 DOM 等的多篇教程。但我仍然不知道如何将它们结合在一起以完成这项特定任务。

我们欢迎任何有关后续步骤的帮助。谢谢。

JS FIDDLE: https://jsfiddle.net/manoj1234/zoL5s10g/12/

更新：

我现在已经将事件侦听器添加到导入的节点而不是模板中：

tweetInstance.querySelectorAll('button')[0].onclick = () =>{
    createTweetContainer.style.display = "block";
    console.log("edit button clicked");
}

但我现在收到这个错误：Uncaught TypeError: Cannot set 属性 'onclick' of undefined 在 HTMLButtonElement.postTweetButton.onclick (script.js:59)

Answer 1

只是改变操作顺序。目前，您首先附加到 DOM，然后尝试附加事件处理程序。相反，首先附加事件处理程序，然后附加到 DOM。这是最终版本：

tweetInstance.querySelector('#button').onclick = () => {
    createTweetContainer.style.display = "block";
    console.log("edit button clicked");
}

// Then append to the DOM
pinnedTweet.after(tweetInstance);

发生这种情况的原因是当您使用 importNode 时，它实际上是 returns DocumentFragment 的一个实例。 DocumentFragment 的内在属性是 当您将其子级附加到实际的 DOM 树 时它会变空。所以，片段上的 querySelector 没有效果。因此，使用 DocumentFragment 的理想工作流程是先执行所有操作，然后最后附加到 DOM.

如何将事件侦听器添加到 Web 组件模板元素

How to add Event Listener to Web Component Template Elements

javascript

html

dom

web-component

html-templates