Polymer-events

提供：Dev Guides
移動先:案内、検索

ポリマー-イベント

イベントは、DOMツリーの状態変更と親要素と通信できる要素によって使用され、イベントの作成、ディスパッチ、およびリスニングに標準のDOM APIを使用します。 *アノテーション付きイベントリスナー*はPolymerによって使用されます。Polymerは、イベントリスナーをDOMテンプレートの小さなチャンクとして定義し、テンプレートのoneventアノテーションを使用してDOM子に追加できます。

例

次の例では、注釈付きイベントリスナーをテンプレートに追加します。 indexlというファイルを作成し、その中に次のコードを挿入します。 

<!doctype html>
<html>
   <head>
      <title>Polymer Example</title>
      <script src = "bower_components/webcomponentsjs/webcomponents-lite.js"></script>
      <link rel = "import" href="bower_components/polymer/polymerl">
      <link rel = "import" href = "annotated-eventlistnersl">
   </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/ に移動します。 出力は次のようになります。

Polymer Annotated Eventlistners

次のスクリーンショットに示すように、テキストをクリックしてコンソールに結果を表示します。

Polymer Annotated Eventlistners

カスタムイベント

カスタムイベントは、標準のCustomEventコンストラクターとホスト要素のdispatchEventメソッドを使用してトリガーできます。

ホスト要素からカスタムイベントをトリガーする次の例を考えてみましょう。 indexlファイルを開き、次のコードを追加します。 

<!doctype html>
<html>
   <head>
      <title>Polymer Example</title>
      <script src = "bower_components/webcomponentsjs/webcomponents-lite.js"></script>
      <link rel = "import" href = "bower_components/polymer/polymerl">
      <link rel = "import" href = "custom-eventl">
   </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-eventlという別のファイルを作成し、次のコードを含めます。 

<link rel = "import" href = "bower_components/polymer/polymer-elementl">

//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/polymer_shadow_dom_and_styling [Polymer shadow dom styling]の章を参照してください。

ジェスチャーイベント

ジェスチャーイベントは、ユーザーインタラクションに使用できます。これにより、タッチデバイスとモバイルデバイスの両方でより良いインタラクションが定義されます。 たとえば、タップイベントは、モバイルデバイスとデスクトップデバイスの両方で一貫して発生するジェスチャイベントの一部です。

この章の冒頭で説明したジェスチャーイベントの例を参照できます。この例では、テンプレートに注釈付きイベントリスナーを追加する on-tap イベントを使用します。

次の表に、さまざまな種類のジェスチャーイベントの種類を示します。

Sr.No. Event Type & Description Properties
1

down

指/ボタンが下に移動したことを示します。

  • x -イベントのclientX座標を提供します。
  • y -イベントのclientY座標を提供します。
  • sourceEvent -DOMイベントによって引き起こされるダウンアクションを指定します。
2

up

指/ボタンが上に移動したことを示します。

  • x -イベントのclientX座標を提供します。
  • y -イベントのclientY座標を提供します。
  • sourceEvent -DOMイベントによって引き起こされるupアクションを指定します。
3

tap

アップアクションとダウンアクションの発生を指定します。

  • x -イベントのclientX座標を提供します。
  • y -イベントのclientY座標を提供します。
  • sourceEvent -DOMイベントによって引き起こされるタップアクションを指定します。
4

track

アップアクションとダウンアクションの発生を指定します。

  • x -イベントのclientX座標を提供します。
  • y -イベントのclientY座標を提供します。
  • 状態-追跡状態を指定するタイプ文字列です。
  • dx -最初のイベントを追跡するときに、ピクセル単位で水平方向に変更を加えます。
  • dy -最初のイベントを追跡するときに、ピクセル単位で垂直方向に変更を加えます。
  • ddx -最後のイベントを追跡するときに、ピクセル単位で水平方向に変更を加えます。
  • ddy -最後のイベントを追跡すると、ピクセル単位で垂直方向に変更が行われます。
  • * hover（）*-現在ホバーされている要素を決定するために使用されます。

例

次の例では、テンプレートでのジェスチャーイベントタイプの使用を指定しています。 indexlというファイルを作成し、その中に次のコードを配置します。 

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

   <body>
      <gesture-event></gesture-event>
   </body>
</html>

ここで、gesture-eventlという別のファイルを作成し、次のコードを含めます。 

<link rel = "import" href = "bower_components/polymer/polymer-elementl">

//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/ に移動します。 要素内でマウスのドラッグを開始すると、次のスクリーンショットに示すように状態が表示されます。

ポリマージェスチャイベント

要素内でマウスをドラッグすると、次のスクリーンショットに示すように、イベントトラッキングの進行状況が表示されます。

ポリマージェスチャイベント

マウスのドラッグを停止すると、次のスクリーンショットに示すように、要素の追跡イベントが終了します。

ポリマージェスチャイベント

「https://www.finddevguides.com/index.php?title=Polymer-events&oldid=17779」から取得
Powered by MediaWiki