被否决

使用 @anypoint-web-components/awc 模块.

支持事件的Mixin 目标重定向, 所以元素会从默认状态中听取设定的节点 window 对象.

使用量

安装

npm install @advanced-rest-client/events-target-mixin --save

在网络组件中

import { EventsTargetMixin } '@advanced-rest-client/events-target-mixin';

class SampleElement extends EventsTargetMixin(HTMLElement) {
  _attachListeners(node) {
    node.addEventListener('my-event', this._testEventHandler);
  }

  _detachListeners(node) {
    node.removeEventListener('my-event', this._testEventHandler);
  }

  _testEventHandler() {

  }
}
customElements.define('sample-element', SampleElement);

<sample-element id="example"></sample-element>
<div id="target"></div>
<script>
example.eventsTarget = target;
</script>

元素会聆听通过#目标元素发泡的事件.

在不扩展 HTMLElement 接口的类中

当构建对象时称为 _eventsTargetChanged() 方法为 一个默认事件目标对象。 如果参数没有设定, 那么 window 改为使用.

import { EventsTargetMixin } '@advanced-rest-client/events-target-mixin';

class EventableObject extends EventsTargetMixin(Object) {
  constructor() {
    super();
    this._eventsTargetChanged();
  }
}

因为这种班没有生命周期方法,你应该打电话 detachedCallback() 当实例不再听取目标对象时手动操作. 跳过 这部分可能导致GC不从内存中清除实例.

发展

git clone https://github.com/advanced-rest-client/events-target-mixin
cd events-target-mixin
npm install

运行测试

npm test