从 dom-repeat 中的元素触发 CustomEvent答案

【问题标题】：Fire a CustomEvent from element in dom-repeat从 dom-repeat 中的元素触发 CustomEvent
【发布时间】：2018-05-02 21:19:21
【问题描述】：

您好，我遇到了 dom-repeat 模板的问题。我有一个带有 dom-repeat 的元素，在里面我显示了一个 my-item 元素，我有一个触发自定义事件的按钮，我需要在父元素中获取该事件，但我无法使其工作。对此有什么想法吗？为什么我从来没有接到updateFired(e) 的电话？

元素：我的视图

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

元素：我的项目

<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);
     }

【问题讨论】：

标签： javascript polymer web-component dom-repeat

【解决方案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 });

【讨论】：

@JoseRaulPerera 欢迎您，我很高兴它有帮助。您还可以注意到，您需要为事件提供标志 bubbles 和 composed 以“逃脱”影子 DOM 边界，但是通过这种方式，您正在监听它，您实际上得到了一个发生的事件 inside my-item，因此即使没有它们，您的代码也应该可以工作，只需提供 detail 即可。由于您没有在my-view 中停止传播，因此最好将其停在那里而不是将其冒泡到顶层（也就是说，如果您不需要它，ofc）
谢谢，我将删除它，这样我们就不会在应用程序中出现性能问题或内存泄漏。非常感谢

【解决方案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!');
}

【讨论】：

这将是在 vanilla JS 中附加“常规”点击处理程序的两种不同方法，不涉及 shadowDom。但问题是关于 Polymer、自定义元素以及如何从“外部”监听事件..
感谢@Tiago Machado 是的，Polymer 它不起作用
对不起：/我会试着弄清楚