Javascript 从dom repeat中的元素触发CustomEvent

您好，我有一个dom重复模板的问题。我有一个带有dom repeat的元素，在里面我显示了一个my item元素，我有一个触发自定义事件的按钮，我需要在父元素中获取该事件，但我无法使其工作。有什么想法吗？为什么我从未被调用

updateFired（e）

元素：我的观点

更新红色（e）{
控制台日志（e）；
}

元素：我的项目

名字：[[employee.First]]
姓氏：[[employee.Last]]
点击
测试点击（e）{
const event=new CustomEvent（'onUpdate'，{bubbles:true，composed:true，detail:this.employee}）；
本次调度事件（事件）；
}

按照编写事件处理程序的方式，事件名称应为“更新””，而不是“更新””。添加的

on-

前缀仅用于定义事件处理程序，实际事件名称应为其后面的部分

所以你需要改变

const event = new CustomEvent('onUpdate', { bubbles: true, composed: true, detail: this.employee });

到

---

在HTML上执行以下操作：

<div id="foo" style="width:20px;height:20px;background-color:#ffcc00;" onclick="javascript:updateFired(event)"></div>

---

在vanilla JS中附加“常规”点击处理程序有两种不同的方式，不涉及阴影。但问题是关于聚合物、自定义元素以及如何从“外部”收听事件。感谢@Tiago Machado是的，因为聚合物它不起作用：/我会设法弄清楚out@JoseRaulPerera不客气，我很高兴这有帮助。您还可以注意到，您需要为事件提供标志

气泡

和

组合

，以“逃逸”阴影DOM边界，但通过这种方式，您正在侦听它，实际上得到了发生在

我的项

内的事件，因此您的代码即使没有它们也可以工作，只需提供细节即可。既然你没有在

my view

中停止传播，那么最好让它停在那里，而不是将其冒泡到顶层（也就是说，如果你在上面不需要它，ofc），谢谢，我会删除它，这样我们就不会在应用程序中出现性能问题或内存泄漏。非常感谢

const event = new CustomEvent('onUpdate', { bubbles: true, composed: true, detail: this.employee });

const event = new CustomEvent('update', { bubbles: true, composed: true, detail: this.employee });

<div id="foo" style="width:20px;height:20px;background-color:#ffcc00;" onclick="javascript:updateFired(event)"></div>

const el = document.getElementById('foo');
el.onclick = showFoo;


function showFoo() {
  alert('Clicked!');
}