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

【问题标题】：How to add Event Listener to Web Component Template Elements如何将事件侦听器添加到 Web 组件模板元素
【发布时间】：2020-08-02 01:41:44
【问题描述】：

我正在为我的投资组合构建一个带有一些附加功能的 Twitter 克隆。我正在使用 Web 组件的模板标签来创建推文模板，然后在单击发布推文按钮时使用 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");
}

但我现在收到此错误：未捕获的类型错误：无法设置未定义的属性“onclick” 在 HTMLButtonElement.postTweetButton.onclick (script.js:59)

【问题讨论】：

这样想：模板是宜家商店中的一个包，如果你在那里附加一个点击处理程序，每个人都会得到相同的额外点击处理程序......所以......附加点击处理程序打包后在买家家中解压组装后......在DOM中导入模板，然后设置处理程序。
@Danny'365CSI'Engelman 感谢您的帖子。已将我的帖子更新为我尝试过的内容。
您的 JSFiddle 不完整，我认为未包含的 script.js 包含您所有的元素代码。
@Danny'365CSI'Engelman 我的 JSFiddle 中的所有 Javascript 代码都是我的 script.js 文件中的代码

标签： javascript html dom web-component html-templates

【解决方案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 时，它实际上返回了DocumentFragment 的一个实例。 DocumentFragment 的内在属性是当您将其子项附加到实际的 DOM 树时，它会变为空。所以，片段上的querySelector 没有效果。因此，DocumentFragment 的理想工作流程是先执行所有操作，然后最后附加到 DOM。

【讨论】：

非常感谢您的解决方案和解释。