聚合物输入更改事件答案

【问题标题】：Polymer input change event聚合物输入更改事件
【发布时间】：2014-09-16 10:12:40
【问题描述】：

我想要的只是能够从聚合物元素获取输入并在更改时提醒它，而无需创建自定义聚合物元素。

问题： on-change 不做任何事情我怀疑 this.value 会做任何事情

伪代码：

<!DOCTYPE html>
<html>
  <head><!--insert proper head elements here--></head>
  <body>
    <paper-input floatingLabel label="test" on-change="alert(this.value)"></paper-input>
  </body>
</html>

【问题讨论】：

标签： javascript polymer

【解决方案1】：

on-*declarative event handlers 是 Polymer 提供的语法糖，因此 on-change 不能在 Polymer 元素之外工作。您可以使用 querySelector 和 addEventListener 在原版 Javascript 中做同样的事情：

<paper-input floatingLabel label="test"></paper-input>

<script>
  document.querySelector('paper-input').addEventListener('change', function(event) {
    console.log(event.target.value);
  });
</script>

【讨论】：

Declarative event handlers 在 Polymer 3 文档中。

【解决方案2】：

我正在使用纸滑块，发现“on-change”没有任何作用，但“onchange”触发了我想要的。由于 paper-input 是一个 Polymer 元素，它应该与声明性事件处理一起使用。

【讨论】：

onchange="" 是一种处理和覆盖 javascript 事件的旧方法。上面答案中的 addEventListener 是正确的。此外，on-change="" 与 onchange="" 不同。上面列出的原始 on-change 不起作用的原因是因为您需要给它类似： on-change="{{myTestClick}}" 并在代码中执行 myTestClick: function (event, detail, sender) { 警报（“嗨”）；它们旨在从您的元素的实现中使用。不在外面。

【解决方案3】：

我不知道 OP 在键入时是否需要更改回调...但是对于 Polymer 1.0+，可以在键入时收听更改，只需使用 on-input 而不是 on-change "event"

<paper-input label="Enter search term" on-input="search" value="{{searchTerm}}">

【讨论】：

【解决方案4】：

您可以使用以下语法在注释中指定自定义更改事件名称https://www.polymer-project.org/1.0/docs/devguide/data-binding.html#two-way-native：

target-prop="{{hostProp::target-change-event}}"

【讨论】：

【解决方案5】：

<paper-input> 元素将触发“值”属性更改事件（“值”属性更改时的非冒泡 DOM 事件）

元素声明：

<paper-input label="Enter search term" 
             on-value-changed="_onSearchTermChanged" 
             value="{{searchTerm}}">

事件处理：

_onSearchTermChanged: function (event) {
     console.log(event.detail.value);
 }

更多详情请查看Polymer's Change Notification Events

【讨论】：

为什么这在纸质输入文档中没有！看起来这个事件非常重要，但我在它的文档中找不到它。