Une brève discussion sur la liaison d'événements dans le framework Polymer de JavaScript_Connaissances de base

Comme il s'agit d'un framework front-end complet, il doit fournir un support lié à la liaison d'événements. En fait, la liaison d'événements a été utilisée dans des exemples précédents, mais elle n'a pas été introduite systématiquement. L'idée événementielle de Polymer est de nommer autant que possible les fonctions de traitement d'événements et de les définir sur la VM. Je pense que cette approche consiste à isoler intentionnellement la couche VM.
L'exemple suivant lie un événement à la fois au bouton et à l'hôte Shadow DOM où il se trouve Lorsque vous cliquez sur le bouton, les deux événements seront déclenchés.
Courez

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

Les auditeurs sont utilisés pour ajouter des événements à l'hôte Shadow DOM actuel (même si je pense que c'est inutile). Les attributs On-* directement sur les éléments DOM peuvent également lier des événements à un élément. Ces méthodes sont liées aux événements DOM et l'objet transmis lorsque l'événement est déclenché est l'objet événement natif.
En plus des méthodes de liaison d'événements ci-dessus qui sont définies directement en tant que propriétés, nous pouvons également lier des événements de manière dynamique.
Courez

<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 veut toujours que nous nommions les fonctions de traitement d'événements. Par exemple, sa méthode d'écoute intégrée ne lie pas une fonction de traitement d'événements à un élément, mais un nom de fonction de traitement d'événements. Le but est peut-être d'isoler complètement la VM et le M, mais je n'aime pas ça. Cependant, Shadow DOM Host lui-même est également un objet natif, il est donc également possible d'utiliser directement le addEventListener natif. Cependant, comme il est fourni dans le framework, je ne recommande pas d'écrire des objets natifs. Peut-être que ma réflexion est trop basse et que je ne comprends pas les bonnes intentions de la conception de Polymer ?