JavaScript の Polymer フレームワークにおけるイベント バインディングについての簡単な説明_基礎知識

これは完全なフロントエンド フレームワークであるため、イベント バインディングに関連するサポートを提供する必要があります。実際、イベント バインディングはこれまでの例で使用されていましたが、体系的に導入されていませんでした。 Polymer のイベントのアイデアは、イベント処理関数に可能な限り名前を付けて VM 上で定義するというもので、これは VM 層を意図的に分離することだと思います。
次の例では、ボタンとボタンが配置されている Shadow DOM ホストの両方にイベントをバインドします。ボタンがクリックされると、両方のイベントがトリガーされます。

を実行します

<script> var Polymer = { dom: 'shadow' }; </script>
<base href="http://www.web-tinker.com/share/" />
<link rel="import" href="polymer/polymer.html" />

<dom-module id="demo-test">
 <template>
  <button on-click="clickHandler">求点击 (=~ω~=)</button>
 </template>
 <script>
  Polymer({
   is: 'demo-test',
   listeners: {
    'click': 'clickHandler'
   },
   clickHandler: function(e) {
    console.log(e.target);
   } 
  });
 </script>
</dom-module>

<demo-test></demo-test>

リスナーは、現在の Shadow DOM ホストにイベントを追加するために使用されます (役に立たないと思いますが)。 DOM 要素に直接ある On-* 属性も、イベントを要素にバインドできます。これらのメソッドは DOM イベントにバインドされており、イベントがトリガーされたときに渡されるオブジェクトはネイティブ イベント オブジェクトです。
プロパティとして直接設定される上記のイベント バインド メソッドに加えて、イベントを動的にバインドすることもできます。

を実行します

<script> var Polymer = { dom: 'shadow' }; </script>
<base href="http://www.web-tinker.com/share/" />
<link rel="import" href="polymer/polymer.html" />

<dom-module id="demo-test">
 <template>
  <button>求点击 (=~ω~=)</button>
 </template>
 <script>
  Polymer({
   is: 'demo-test',
   ready: function() {
    // Polymer 内置
    this.listen(this, 'click', 'clickHandler');
    // 原生
    this.addEventListener('click', this.clickHandler);
   },              
   clickHandler: function(e) {     
    console.log(e);
   }
  });
 </script>
</dom-module>

<demo-test></demo-test>

Polymer は常に、イベント処理関数に名前を付けることを要求します。たとえば、その組み込みの listen メソッドは、イベント処理関数を要素にバインドするのではなく、イベント処理関数名をバインドします。おそらくこれの目的はVMとMを完全に分離することですが、私はこれが好きではありません。ただし、Shadow DOM Host 自体もネイティブ オブジェクトなので、ネイティブの addEventListener を直接使用することも可能ですが、フレームワークで提供されているため、ネイティブ オブジェクトを記述することはお勧めしません。私の考えが低すぎて、Polymer のデザインの善意が理解できないのでしょうか？