Polymer fire() 是否在全球范围内发布事件？

Question

假设从 Polymer 元素中调用以下内容：

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

reset-counters 事件是否会发布到所有侦听该事件的元素或仅在调用 this.fire() 的元素中听到？

Answer 1

默认情况下 this.fire() 会引发冒泡，甚至会由 DOM 树上的所有元素处理。与浏览器中的大多数事件一样。

Polymer 确实提供了一个类似于 native events API 的 API，fire 方法需要三个参数：事件名称，details 对象和 options 对象。在 options 中，设置 bubbles: false 以禁止将事件推上 DOM 树。

请参阅下面的示例，了解如何在您单击第二个按钮时仅触发直接侦听器。

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>

Polymer fire() 是否在全球范围内发布事件？

Does Polymer fire() publish the event globally?

javascript

events

web-component

polymer

polymer-1.0