Polymer - 事件

事件由元素使用，这些元素可以与 DOM 树的状态变化进行通信，从而与父元素进行通信，并使用标准 DOM API 创建、分派和侦听事件。Polymer 使用**带注释的事件侦听器**，它将事件侦听器定义为 DOM 模板的小片段，并且可以使用模板中的 onevent 注释添加到 DOM 子元素。

示例

以下示例在模板中添加带注释的事件侦听器。创建一个名为 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 = "annotated-eventlistners.html">
   </head>
   
   <body>
      <template id = "myapp" is = "dom-bind">
         //tap event is part of gesture events that fires consistently across both mobile
         //and desktop devices
         <annotated-eventlistners on-tap = "myClick"></annotated-eventlistners>
      </template>
      
      <script>
         var myval = document.querySelector('#myapp');
         myval.myClick =  function(e) {
            console.log('Hello World!!!');
         };
      </script>
   </body>
</html>

输出

要运行应用程序，请导航到创建的项目目录并运行以下命令。

polymer serve

现在打开浏览器并导航到**http://127.0.0.1:8000/**。输出如下所示。

单击文本可在控制台中查看结果，如下面的屏幕截图所示。

自定义事件

可以使用标准的 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>

输出

按上一示例中所示运行应用程序，并导航到**http://127.0.0.1:8000/**。输出如下所示。

现在单击按钮，打开控制台，并查看自定义事件的真值，如下面的屏幕截图所示。

现在来看“事件重新定位”，它指定事件的目标，其中元素可以在与侦听元素相同的范围内表示。例如，在使用主文档中的侦听器（而不是影子树中）时，目标可以被认为是主文档中的元素。您可以参考Polymer shadow dom 样式章节以了解更多解释和示例。

手势事件

手势事件可用于用户交互，它在触摸屏和移动设备上定义了更好的交互。例如，tap 事件是手势事件的一部分，它在移动设备和桌面设备上都能一致地触发。

您可以参考本章开头解释的手势事件示例，该示例使用在模板中添加带注释的事件侦听器的**on-tap**事件。

下表列出了不同类型的手势事件类型。

序号	事件类型和描述	属性
1	down 它指定手指/按钮已按下。	x − 它提供事件的 clientX 坐标。 y − 它提供事件的 clientY 坐标。 sourceEvent − 它指定由 DOM 事件导致的 down 动作。
2	up 它指定手指/按钮已抬起。	x − 它提供事件的 clientX 坐标。 y − 它提供事件的 clientY 坐标。 sourceEvent − 它指定由 DOM 事件导致的 up 动作。
3	tap 它指定 up 和 down 动作的发生。	x − 它提供事件的 clientX 坐标。 y − 它提供事件的 clientY 坐标。 sourceEvent − 它指定由 DOM 事件导致的 tap 动作。
4	track 它指定 up 和 down 动作的发生。	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: #D7D0B7;
         }
      </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>

输出

按上一示例中所示运行应用程序，并导航到**http://127.0.0.1:8081/**。现在开始在元素中拖动鼠标，它将显示状态，如下面的屏幕截图所示。

在元素中拖动鼠标后，它将显示事件跟踪的进度，如下面的屏幕截图所示。

当您停止拖动鼠标时，它将在元素上结束跟踪事件，如下面的屏幕截图所示。

打印页面