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/**。現在開始在元素中拖動滑鼠，它將顯示狀態，如下面的螢幕截圖所示。

在元素中拖動滑鼠後，它將顯示事件跟蹤的進度，如下面的螢幕截圖所示。

當您停止拖動滑鼠時，它將在元素上結束跟蹤事件，如下面的螢幕截圖所示。

列印頁面