将侦听器添加到 DART 语言中的自定义元素答案

【问题标题】：Add listener to custom element in DART lang将侦听器添加到 DART 语言中的自定义元素
【发布时间】：2014-10-11 19:25:10
【问题描述】：

在 JavaScript 中，我们可以通过以下方式将侦听器添加到 here 中提到的自定义元素：

proto.createdCallback = function() {
   this.addEventListener('click', function(e) {
   alert('Thanks!');
  });
};

我尝试制作等效的 DART 代码：

    Element launchElement(){
       this.onClick.listen((e)=>print('Thanks!'));
       return (shadow);  
    }

我在这里做错了吗？

我的自定义元素的完整代码是：

class MegaButton extends ButtonElement  {
  static final tag = 'mega-button';
  factory MegaButton()=>new Element.tag('button', tag);

MegaButton.created() : super.created() {
  var shadow = this.createShadowRoot();
  shadow.text='save'; 

  Element launchElement(){
    this.onClick.listen((e)=>print('Thanks!'));
    return (shadow);  
  }

}

注册为：

document.registerElement(MegaButton.tag, MegaButton, extendsTag: 'button');

并通过以下方式调用它：

myDiv.nodes.add(new Element.tag('button', 'mega-button'));

【问题讨论】：

launchElement 是干什么用的？你定义了一个内部方法，但从不调用它。

标签： dart dart-html

【解决方案1】：

class MegaButton extends ButtonElement {
  static final tag = 'mega-button';

  factory MegaButton()=> new Element.tag('button', tag);

  MegaButton.created() : super.created() {
    var shadow = this.createShadowRoot();
    shadow.text = 'save';
  }

  void attached() {
    this.onClick.listen((e)=>print('Thanks!'));
  }
}

【讨论】：

【解决方案2】：

你可以这样添加监听器：

class MegaButton extends ButtonElement {
  static final tag = 'mega-button';
  factory MegaButton() => new Element.tag('button', tag);

  MegaButton.created() : super.created() {
    var shadow = this.createShadowRoot();
    shadow.text = 'save';

    Element launchElement() {
      return (shadow);
    }

  }

}

void main() {

  document.registerElement(MegaButton.tag, MegaButton, extendsTag: 'button');

  DivElement myDiv = querySelector("#mydiv");
  MegaButton mbutton = new Element.tag('button', 'mega-button');
  mbutton.onClick.listen((e) => print('Thanks!'));
  myDiv.nodes.add(mbutton);


}

【讨论】：