snippets/events/using-custom-events.html

<!doctype html>
<!--
Copyright (c) 2014 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
-->

<!--
# Using Custom Events

Shows use of a custom event to communicate between a child and a parent element.

Polymer core provides a `fire()` method for sending custom events. This
method wraps `node.dispatchEvent(new CustomEvent(...))`. The method takes two
arguments, the name of the custom event and the data passed along with the
event:

    <polymer-element name="child-element">
      ...
      <script>
        Polymer({
          ...
            this.fire('spoken', {message: message});
          ...
        });
      </script>
    </polymer-element>


When communicating between Polymer elements using a custom event, use an
`on-*` handler to deal with the event. In this example, the `spoken` custom
event is handled using `on-spoken` and the `heard()` handler:

    <polymer-element name="parent-element">
      <template>
        <div on-spoken="{{heard}}">
          <child-element></child-element>
        </div>
      </template>
      <script>
        Polymer('parent-element', {
          message: '',
          heard: function(e, detail, sender) {
            this.message = 'heard: ' + detail.message;
          }
        });
      </script>
    </polymer-element>


The handler has access to the following:

- the event object
- a `detail` object to pass data along with the event
- the node that sent the event

Read the
[official documentations for `fire()`](http://www.polymer-project.org/docs/polymer/polymer.html#fire).

[jsbin](http://jsbin.com/pobipa/edit)
-->

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

<polymer-element name="child-element">
  <template>
    <input type="text" placeholder="Write something" id="myInput">
    <button on-tap="{{fireEvent}}">Fire custom event</button>
  </template>
  <script>
    Polymer('child-element', {
      fireEvent: function(e, detail, sender) {
        var message = this.$.myInput.value;
        this.fire('spoken', {message: message});
      }
    });
  </script>
</polymer-element>

<polymer-element name="parent-element">
  <template>
    <div on-spoken="{{heard}}">
      <child-element></child-element>
      <div>{{message}}</div>
    </div>
  </template>
  <script>
    Polymer('parent-element', {
      message: '',
      heard: function(e, detail, sender) {
        this.message = 'heard: ' + detail.message;
      }
    });
  </script>
</polymer-element>