Polymer 事件

17 Mar 2025 | 4 分钟阅读

Polymer 事件被 Polymer 元素用来与 DOM 树的状态变化通信到父元素。Polymer 使用标准的 DOM API 来创建、分发和监听事件。

Polymer 使用带注解的事件监听器，并将它们定义为 DOM 模板的小块。可以使用模板中的 on-event 注释将它们添加到 DOM 子节点中。

添加事件监听器

有两种方法可以添加事件监听器

通过提供一个 listeners 对象，该对象将事件映射到事件处理函数名称，可以将事件监听器添加到宿主元素。

也可以使用以下语法将事件监听器添加到 this.$ 集合中的任何元素

示例

<dom-module id="x-custom">
  <template>
    <div>I will respond</div>
    <div>to a tap on</div>
    <div>any of my children!</div>
    <div id="special">I am special!</div>
  </template>
  <script>
    Polymer({
      is: 'x-custom',
      listeners: {
        'tap': 'regularTap',
        'special.tap': 'specialTap'
      },
      regularTap: function(e) {
        alert("Thank you for tapping");
      },
      specialTap: function(e) {
        alert("It was special tapping");
      }
    });
  </script>
</dom-module>

添加带注解的事件监听器

您可以使用模板中的 on-event 注释将事件监听器添加到本地 DOM 子节点。通过使用这种方法，您不需要给元素一个 id 来绑定事件监听器。

示例

<dom-module id="x-custom">
  <template>
    <button on-tap="handleTap">Kick Me</button>
  </template>
  <script>
    Polymer({
      is: 'x-custom',
      handleTap: function() {
        alert('Ow!');
      }
    });
  </script>
</dom-module>

添加和删除监听器

listen() 和 unlisten() 方法用于命令式地添加和删除监听器。

this.listen(this.$.myButton, 'tap', 'onTap');
this.unlisten(this.$.myButton, 'tap', 'onTap');

注意：如果以命令式方式添加了监听器，则必须以命令式方式删除它。这通常在 attached 和 detached 回调中完成。

如果使用 listeners 对象或带注解的事件监听器，Polymer 会自动添加和删除事件监听器。

自定义事件

您可以使用标准的 CustomEvent 构造函数和宿主元素的 dispatchEvent () 方法来触发或激发自定义事件。

让我们举个例子，从宿主元素触发一个自定义事件。创建一个名为 index.html 的文件，并在其中使用以下代码。

<!doctype html>
<html>
   <head>
      <title>Polymer Example</title>
      <script src = "bower_components/webcomponentsjs/webcomponents-lite.js"></script>
      <link rel = "import" href = "bower_components/polymer/polymer.html">
      <link rel = "import" href = "custom-event.html">
   </head>  
   <body>
      <custom-event></custom-event>
      <script>
         document.querySelector('custom-event').addEventListener('customValue', function (e) {
            console.log(e.detail.customval); // true
         })
      </script>
   </body>
</html>

现在，创建另一个名为 custom-event.html 的文件，并在其中使用以下代码。

<link rel = "import" href = "bower_components/polymer/polymer-element.html">
//it specifies the start of an element's local DOM
<dom-module id = "custom-event">
   <template>
      <h2>Custom Event Example</h2>
      <button on-click = "myClick">Click Here</button>
   </template>
   
   <script>
      Polymer ({
         is: "custom-event", myClick(e) {
            this.dispatchEvent(new CustomEvent('customValue', {detail: {customval: true}}));
         }
      });
   </script>
</dom-module>

现在，在点击 "Click Here" 按钮后，您可以看到自定义事件的 true 值。

手势事件

手势事件用于使用户在触摸和移动设备上的交互更加愉快。例如：tap 事件是手势事件的一部分，它在移动和桌面设备上都能一致地触发。

以下是不同支持的手势事件类型列表

表

索引	事件类型	描述	性质
1)	down	down 事件类型用于指定手指/按钮已向下移动。	x: 它提供事件的 clientX 坐标。 y: 它提供事件的 clientY 坐标。 sourceEvent: 它指定由 DOM 事件引起的向下动作。
2)	up	up 事件类型用于指定手指/按钮已向上移动。	x: 它提供事件的 clientX 坐标。 y: 它提供事件的 clientY 坐标。 sourceEvent: 它指定由 DOM 事件引起的向上动作。
3)	tap	tap 事件类型用于指定发生向上和向下动作。	x: 它提供事件的 clientX 坐标。 y: 它提供事件的 clientY 坐标。 sourceEvent: 它用于指定由 DOM 事件引起的 tap 动作。
4)	track	track 事件类型用于在手指/按钮按下时跟踪移动。	x: 它用于提供事件的 clientX 坐标。 y: 它用于提供事件的 clientY 坐标。 state: 它是一个类型字符串，用于指定跟踪状态。 dx: 当您跟踪第一个事件时，它水平方向上以像素为单位进行更改。 dy: 当您跟踪第一个事件时，它垂直方向上以像素为单位进行更改。 ddx: 当您跟踪最后一个事件时，它水平方向上以像素为单位进行更改。 ddy: 当您跟踪最后一个事件时，它垂直方向上以像素为单位进行更改。 hover(): 它用于确定当前悬停的元素。

示例

让我们举个例子来演示在模板中使用手势事件类型。创建一个名为 index.html 的文件，并在其中使用以下代码。

<!doctype html>
<html>
   <head>
      <title>Polymer Example</title>
      <script src = "bower_components/webcomponentsjs/webcomponents-lite.js"></script>
      <link rel = "import" href = "bower_components/polymer/polymer.html">
      <link rel = "import" href = "gesture-event.html">
   </head>
   <body>
      <gesture-event></gesture-event>
   </body>
</html>

创建另一个名为 gesture-event.html 的文件，其中包含以下代码。

<link rel = "import" href = "bower_components/polymer/polymer-element.html">

//it specifies the start of an element's local DOM
<dom-module id = "gesture-event">
   <template>
      <style>
         #box {
            width: 200px;
            height: 200px;
            background: pink;
         }
      </style>
      
      <h2>Gesture Event Types Example</h2>
      <div id = "box" on-track = "myClick">{{track_message}}</div>
   </template>
   
   <script>
      Polymer ({
         is: 'gesture-event', myClick: function(e) {
            switch(e.detail.state) {
               case 'start':
               this.track_message = 'Tracking event started.';
               break;
               case 'track':
                  this.track_message = 'Tracking event is in progress. ' +
                  e.detail.x + ', ' + e.detail.y;
               break;
               case 'end':
                  this.track_message = 'Tracking event ended.';
               break;
            }
         }
      });
   </script>
</dom-module>

输出

在元素中悬停并拖动鼠标，它将显示事件跟踪的进度，如下所示