javascript - Fire a CustomEvent from element in dom-repeat

Question

Hello I have this issue with a dom-repeat template. I have an element with a dom-repeat and inside I'm showing a my-item element, I have a button that fired a custom event and I need to get that event in the parent element but I can't make it work. Any thoughts on this? Why I never get updateFired(e) called?

Element: my-view

<template is="dom-repeat" items="{{employees}}">
      <my-item employee="[[item]]" on-update="updateFired"></my-item>
    </template>
    updateFired(e) {
      console.log(e);
    }

Element: my-item

<div class="container">
        <div>First name: <span>[[employee.first]]</span></div>
        <div>Last name: <span>[[employee.last]]</span></div>
        <button on-click="testClick">Click</button>
    </div>
    testClick(e) {
        const event = new CustomEvent('onUpdate', { bubbles: true, composed: true, detail: this.employee });
        this.dispatchEvent(event);
     }

Answer 1

在您编写事件处理程序的方式中，您的事件名称应该是“ update ”，而不是“ onUpdate ”。on-添加前缀只是为了定义事件处理程序，实际的事件名称应该是它后面的部分。

所以你需要改变

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

至

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

Answer 2

在您的 HTML 上执行以下操作：

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

在你的 javascript 中：

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


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