嵌套事件不适用于 window.onload 或 DOMContentLoaded

Question

我在 JavaScript ES6 中编写了一些组件，它们有多个事件，但是当我在窗口的加载事件上插入另一个类时，class1 窗口事件不会加载 Class2。我也尝试过使用 DOMContentLoaded，但我仍然得到相同的结果。我该怎么做才能使事件嵌套在 window 或 DOMContentLoaded 事件的 load 事件事件中？对于这种情况有什么解决方法，可以完成吗？下面是我的代码示例，我试图让 Class2 控制台注销，但它不会！

class Accordian {
  constructor(selector) {
    this.selector = selector;
    this.build();
  }
  
  build() {
    const self = this;
    window.addEventListener('DOMContentLoaded', (event) => {
      this.el = document.querySelector(this.selector);
      this.dispatch('accordian__load', event, { el: this.el });
    }, true);
  }
  
  on(name, callback) {
    var func = this['on' + name];

    if (!func) this['on' + name] = [callback];
    else func.push(callback);

    return this;
  }

  dispatch(name, event, ...props) {
    var callbacks = this['on' + name];
    if (callbacks)
      callbacks.forEach((callback) => callback.call(this, event, ...props));
  }

}

class Checkbox {
  constructor(selector) {
    this.selector = selector;
    this.build();
  }
  
  build() {
    const self = this;
    window.addEventListener('DOMContentLoaded', (event) => {
      this.el = document.querySelector(this.selector);
      this.dispatch('checkbox__load', event, { el: this.el });
    }, true);
  }
  
  on(name, callback) {
    var func = this['on' + name];

    if (!func) this['on' + name] = [callback];
    else func.push(callback);

    return this;
  }
    
  dispatch(name, event, ...props) {
    var callbacks = this['on' + name];
    if (callbacks)
      callbacks.forEach((callback) => callback.call(this, event, ...props));
  }

}

var accordian = new Accordian('#accordian')
var checkbox = new Checkbox('#chk_enable');

accordian.on('accordian__load', function(event, props) {
  console.log('accordian load');
  console.log(props);
  checkbox.on('checkbox__load', function(event, props) {
    console.log('checkbox load');
    console.log(props);
  });
});

<div id="accordian">
  <input type="checkbox" id="chk_enable">
</div>

Answer 1

onload 只接受一个函数。避免这种情况的一种方法是使用addEventListener。为此，请更改您的：

window.onload = function(event) {
  self.dispatch('load', event, {});
}

有

window.addEventListener("load", function (event) {
  self.dispatch("load", event, {});
});

无论如何，Class2 对象是在 Class1“加载”事件中创建的。 window.onload 不会触发两次，因此您的 Class2“负载”不会触发。如果 Class2 对象是在 Class1 "load" 之外创建的，您可以使其工作。

最后，您在 build 方法中分配给没有 let 或 const 的 self 变量。这样一来，您就将 self 重新定义为始终是最后一个构造的类：

class Class1 {
  constructor() {
    this.build();
  }
  
  build() {
    const self = this;
    window.addEventListener("load", function (event) {
      self.dispatch("load", event, {});
    });
  }
  
  on(name, callback) {
    const self = this;
    var callbacks = this['on' + name];

    if (!callbacks) this['on' + name] = [callback];
    else callbacks.push(callback);

    return this;
  }

  dispatch(name, event, ...props) {
      var callbacks = this['on' + name];
      if (callbacks)
        callbacks.forEach((callback) => callback.call(this, event, ...props));
  }

}

class Class2 {
  constructor() {
    this.build();
  }
  
  build() {
    const self = this;
    window.addEventListener("load", function (event) {
      self.dispatch("load", event, {});
    });
  }
  
  on(name, callback) {
        const self = this;
        var callbacks = this['on' + name];
    
        if (!callbacks) this['on' + name] = [callback];
        else callbacks.push(callback);
    
        return this;
    }
    
    dispatch(name, event, ...props) {
        var callbacks = this['on' + name];
        if (callbacks)
          callbacks.forEach((callback) => callback.call(this, event, ...props));
    }

}

var myclass1 = new Class1();

myclass1.on('load', function(event) {
  console.log('Class 1');
});

var myclass2 = new Class2();

myclass2.on('load', function(event) {
  console.log('Class 2');
});