Question

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

例如，假设我有：

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

如何收听“点击”事件？只需添加一个事件监听器来“点击”ID“我的按钮”就不起作用了。

Answer 1

应该有效吗？我假设你想在主文档（index.html）中使用Polymer UI元素，而不必创建任何自定义组件。说你有

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

index.html中的

。通过vanilla js，

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

并通过jQuery，

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

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

让我明确一点：聚合物元素和扩展的Web组件被设计为与框架无关，如果编码正确，它们将自行工作 - 就像任何其他HTML元素一样。请不要为了dom绑定而进行dom-bind。如果你a）在你的用例中要求聚合物加糖（如数据绑定），你只这样做; b）你想从你的index.html使用聚合物糖 - 如果你不这样做，请不要为你的应用添加额外的复杂性。

我找到了服用聚合物元素的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中监听元素的事件？

3 个答案: