Maison > interface Web > js tutoriel > Une brève discussion sur la liaison d'événements dans le framework Polymer de JavaScript_Connaissances de base

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

WBOY
Libérer: 2016-05-16 15:48:19
original
1313 Les gens l'ont consulté

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>

Copier après la connexion

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>

Copier après la connexion

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 ?

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal