Perbincangan ringkas tentang pengikatan peristiwa dalam rangka kerja Polimer JavaScript_Pengetahuan asas

Memandangkan ia adalah rangka kerja bahagian hadapan yang lengkap, ia mesti memberikan sokongan yang berkaitan dengan pengikatan acara. Sebenarnya, pengikatan peristiwa telah digunakan dalam contoh terdahulu, tetapi ia tidak diperkenalkan secara sistematik. Idea acara Polimer adalah untuk menamakan fungsi pemprosesan acara sebanyak mungkin dan mentakrifkannya pada VM Saya fikir pendekatan ini sengaja mengasingkan lapisan VM.
Contoh berikut mengikat acara pada kedua-dua butang dan Hos DOM Bayangan di mana ia berada Apabila butang diklik, kedua-dua acara akan dicetuskan.
Lari

<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>

Pendengar digunakan untuk menambah acara pada Hos DOM Shadow semasa (walaupun saya rasa ia tidak berguna). Atribut on-* secara langsung pada elemen DOM juga boleh mengikat peristiwa pada elemen. Kaedah ini terikat kepada peristiwa DOM dan objek yang diluluskan apabila peristiwa dicetuskan ialah objek peristiwa asli.
Selain kaedah pengikatan peristiwa di atas yang ditetapkan secara langsung sebagai sifat, kami juga boleh mengikat peristiwa secara dinamik.
Lari

<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 sentiasa mahu kami menamakan fungsi pemprosesan acara Contohnya, kaedah dengar terbina dalamnya tidak mengikat fungsi pemprosesan acara kepada elemen, tetapi nama fungsi pemprosesan acara. Mungkin tujuan ini adalah untuk mengasingkan VM dan M sepenuhnya, tetapi saya tidak suka ini. Walau bagaimanapun, Shadow DOM Host sendiri juga merupakan objek asli, jadi anda juga boleh menggunakan addEventListener asli namun, kerana ia disediakan dalam rangka kerja, saya tidak mengesyorkan menulis objek asli. Mungkin pemikiran saya terlalu rendah dan saya tidak dapat memahami niat baik reka bentuk Polimer?