Polymer fire()是否全局发布事件？

Question

Polymer fire()是否全局发布事件？

Ole*_*Ole 6 javascript events web-component polymer polymer-1.0

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

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

将reset-counters事件发布到该监听该事件或在听说称为元素中的所有元素this.fire()而已？

Answer 1

Tom*_*icz 10

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

然而,Polymer提供了类似于本机事件API的API.该fire方法有三个参数:事件名称,详细信息对象和选项对象.在选项中,设置bubbles: false为禁止将事件推送到DOM树.

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

Polymer({
  is: 'my-elem',
  bubbling: function() {
    this.fire('my-event', 'bubbling');
  },
  nonbubbling: function() {
    this.fire('my-event', 'nonbubbling', {
      bubbles: false
    });
  }
});

Run Code Online (Sandbox Code Playgroud)

<!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>

Run Code Online (Sandbox Code Playgroud)

哇 - 包括运行代码片段的答案让我印象深刻 - 谢谢.很棒的答案 - 很有意义.只是抬头 - 当我点击运行按钮时,我得到"ReferenceError:未定义聚合物". (3认同)

归档时间：	9 年，2 月前
查看次数：	4762 次
最近记录：	9 年，2 月前