Does Polymer fire() publish the event globally?

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>

Recommended topics

Hot tags