polymer/test/unit/events-elements.html

<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->

<link rel="import" href="../../polymer.html">

<script>
  var EventLoggerImpl = {
    created: function() {
      this._handled = {};
      this._warned = [];
      this._removed = [];
    },
    handle: function(e) {
      this._handled[e.currentTarget.localName] = e.type;
    },
    _warn: function(array) {
      var hasColor = array[0].indexOf('%c') === 0;
      var funIdx = hasColor ? 3 : 2;
      var messageIdx = hasColor ? 4 : 3;
      if (array[funIdx] === '_createEventHandler') {
        this._warned.push(array[messageIdx]);
      } else {
        Polymer.Base._warn(array);
      }
    },
    _unlisten: function(node, eventName, handler) {
      this._removed.push({target: node.localName, event: eventName});
      Polymer.Base._unlisten(node, eventName, handler);
    }
  };
</script>

<dom-module id="x-listeners">
  <script>
    Polymer({
      is: 'x-listeners',
      behaviors: [EventLoggerImpl],
      listeners: {
        foo: 'handle',
        bar: 'missing'
      },
      teardown: function() {
        this.unlisten(this, 'foo', 'handle');
        this.unlisten(this, 'bar', 'missing');
      }
    });
  </script>
</dom-module>

<dom-module id="x-on">
  <template>
    <div id="inner" on-foo="handle" on-bar="missing"></div>
  </template>
  <script>
    Polymer({
      is: 'x-on',
      behaviors: [EventLoggerImpl],
      teardown: function() {
        this.unlisten(this.$.inner, 'foo', 'handle');
        this.unlisten(this.$.inner, 'bar', 'missing');
      }
    });
  </script>
</dom-module>

<dom-module id="x-dynamic">
  <template>
    <div id="inner"></div>
  </template>
  <script>
    Polymer({
      is: 'x-dynamic',
      behaviors: [EventLoggerImpl],
      setup: function() {
        this.listen(this, 'foo', 'handle');
        this.listen(this.$.inner, 'foo', 'handle');
        this.listen(this, 'bar', 'missing');
        this.listen(this.$.inner, 'bar', 'missing');
      },
      teardown: function() {
        this.unlisten(this, 'foo', 'handle');
        this.unlisten(this.$.inner, 'foo', 'handle');
        this.unlisten(this, 'bar', 'missing');
        this.unlisten(this.$.inner, 'bar', 'missing');
      }
    });
  </script>
</dom-module>

<dom-module id="x-double">
  <script>
    Polymer({
      is: 'x-double',
      behaviors: [EventLoggerImpl],
      setup: function() {
        this.listen(this, 'foo', 'missing');
        this.listen(this, 'foo', 'missing');
      },
      teardown: function() {
        this.unlisten(this, 'foo', 'missing');
      }
    });
  </script>
</dom-module>