如何将事件侦听器添加到 Web 组件模板元素
How to add Event Listener to Web Component Template Elements
我正在为我的投资组合构建一个带有一些附加功能的 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)
只是改变操作顺序。目前,您首先附加到 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.
我正在为我的投资组合构建一个带有一些附加功能的 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)
只是改变操作顺序。目前,您首先附加到 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.