我如何监听 Polymer 1.0 中元素的事件？

Question

我想在不制作自定义元素或模板的情况下使用 Polymer 的 UI 元素（例如铁图标、纸按钮等）。

例如，假设我有：

<paper-button id="my-button">Click me</paper-button>

如何监听 'click' 事件？简单地为 ID 'my-button' 添加事件侦听器到 'click' 是行不通的。

Answer 1

它应该能正常工作？我假设您想在主文档 (index.html) 中使用 Polymer UI 元素，而无需创建任何自定义组件。假设你有

<paper-button id="btn">Click me</paper-button>

在 index.html 中。通过香草 js，

document.querySelector("#btn").addEventListener("click", function (e) {...});

并通过 jQuery、

$("#btn").on("click", function (e, u) {...});

p/s：我会写一个快速的 jsbin 作为演示，但 rawgit 似乎有问题，而且我不知道托管 Polymer Elements 的替代 CDN。

让我明确一点：Polymer 元素，以及扩展的 Web 组件，被设计为与框架无关，如果编码正确，它们将独立工作——就像任何其他元素一样 HTML element. 请不要为了dom-绑定而dom-绑定。如果您仅这样做 a) 在您的用例中需要 Polymer 的糖化（如数据绑定）； b) 你想在你的 index.html 中使用 Polymer 的加糖 - 如果你不这样做，请不要给你的应用增加额外的复杂性。

我找到了一个提供聚合物元素的 cdn，所以：

Look, no dom-bind and elements are working with vanilla js.

Look, no dom-bind and elements are working with jQuery.

Answer 2

你可以试试：

<template is="dom-bind" id="t">
<paper-button id="my-button" on-click="buttonClicked">Click me</paper-button>
</template>

<script>
var template = document.querySelector('#t');
template.buttonClicked= function () {
    alert("he clicked me :)");

   };
</script>

Answer 3

$( "body" ).delegate( "#my-button", "click", function() {
   alert();
});

我如何监听 Polymer 1.0 中元素的事件？

How do I listen to events for elements in Polymer 1.0?

polymer

polymer-1.0