@polymer/polymer/test/unit/events-elements.html

The Polymer library makes it easy to create your own web components. Give your element some markup and properties, and then use it on a site. Polymer provides features like dynamic templates and data binding to reduce the amount of boilerplate you need to

<!--
@license
Copyright (c) 2017 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._removed = [];
    },
    handle: function(e) {
      const order = e._handleOrder = e._handleOrder || [];
      order.push(this.localName);
      this._handled[e.currentTarget.localName] = e.type;
    },
    unlisten: function(node, eventName, handler) {
      this._removed.push({target: node.localName, event: eventName});
      Polymer.Base.unlisten.call(this, node, eventName, handler);
    }
  };
</script>

<dom-module id="x-listeners">
  <script>
    Polymer({
      is: 'x-listeners',
      behaviors: [EventLoggerImpl],
      listeners: {
        foo: 'handle',
        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]
    });
  </script>
</dom-module>

<dom-module id="x-order">
    <template>
      <x-listeners id="inner" on-foo="handle"></x-listeners>
    </template>
    <script>
      Polymer({
        is: 'x-order',
        behaviors: [EventLoggerImpl]
      });
    </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],
      ready: function() {
        this.fooChanged = sinon.spy();
      },
      setup: function() {
        this.listen(this, 'foo', 'fooChanged');
        this.listen(this, 'foo', 'fooChanged');
      },
      teardown: function() {
        this.unlisten(this, 'foo', 'fooChanged');
      }
    });
  </script>
</dom-module>