Rumah > hujung hadapan web > tutorial js > Perbincangan ringkas tentang pengikatan peristiwa dalam rangka kerja Polimer JavaScript_Pengetahuan asas

Perbincangan ringkas tentang pengikatan peristiwa dalam rangka kerja Polimer JavaScript_Pengetahuan asas

WBOY
Lepaskan: 2016-05-16 15:48:19
asal
1314 orang telah melayarinya

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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?

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan