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

自定义事件

可以使用标准CustomEvent构造函数和host元素中的dispatchEvent方法来触发自定义事件。

考虑下面的示例，该示例从host元素触发自定义事件。打开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>
预览效果：

现在单击按钮，打开控制台，然后查看自定义事件的真实值，返回true。

现在使用“事件重定目标”移动，它指定事件的目标，可以在与侦听元素相同的作用域中表示该元素。例如，目标可以被视为主文档中的元素，而在主文档中而不是在影子树中使用侦听器。您可以参考“ Polymer shadow dom样式”一章以获取更多说明和示例。

手势事件

手势事件可用于用户交互，从而在触摸和移动设备上定义更好的交互。例如，轻击事件是手势事件的一部分，可在移动设备和台式机设备上始终触发。

您可以参考本章开始时说明的手势事件示例，该示例使用点按事件在模板中添加带注释的事件侦听器。

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

序号	活动类型和说明	特性
1	down 它指定手指/按钮已向下移动。	x-提供事件的clientX坐标。y-提供事件的clientY坐标。sourceEvent-它指定由DOM事件引起的按下动作。
2	up 它指定手指/按钮已向上移动。	x-提供事件的clientX坐标。y-提供事件的clientY坐标。sourceEvent-它指定由DOM事件引起的向上动作。
3	tap 它指定向上和向下动作的发生。	x-提供事件的clientX坐标。y-提供事件的clientY坐标。sourceEvent-它指定由DOM事件引起的轻击动作。
4	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: #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>