Ole Ole - 3 months ago 62
Javascript Question

Does Polymer fire() publish the event globally?

Suppose the following is called from within a Polymer element:

this.fire("reset-counters");
.

Will the
reset-counters
event be published to all elements that listen for that event or is in heard within the element that called
this.fire()
only?

Answer

By default this.fire() raises a bubbling even which will be handled by all elements up the DOM tree. Like most events in the browser.

Polymer does however offer an API similar to the native events API, The fire method takes three parameters: event name, details object and options object. In options, set bubbles: false to forbid the event from being pushed up the DOM tree.

See the example below to see how only the immediate listener fires when you click the second button.

Polymer({
  is: 'my-elem',
  bubbling: function() {
    this.fire('my-event', 'bubbling');
  },
  nonbubbling: function() {
    this.fire('my-event', 'nonbubbling', {
      bubbles: false
    });
  }
});
<!DOCTYPE html>
<html>
<head>
  <base href="https://polygit.org/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link href="polymer/polymer.html" rel="import"/>
</head>

<body>
  <div>
    <my-elem></my-elem>
  </div>
  
  <dom-module id="my-elem">
    <template>
      <input type="button" value="fire bubbling" on-tap="bubbling" />
      <input type="button" value="fire non-bubbling" on-tap="nonbubbling" />
    </template>
  </dom-module>
  
  <script>
    document.querySelector('my-elem')
      .addEventListener('my-event', handle('my-elem'));
    
    document.querySelector('div')
      .addEventListener('my-event', handle('div'));
    
    document
      .addEventListener('my-event', handle('document'));
    
    function handle(elem) {
      return function(e) {
        console.log(e.detail + ' handled on ' + elem);
      };
    }
  </script>

</body>
</html>