Question

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

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

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

Answer 1

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

但是，Polymer会提供类似于native events API的API，fire方法需要三个参数：事件名称，详细信息对象和< strong>选项对象。在选项中，设置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（）是否全局发布事件？

1 个答案: