Javascript 自定义HTML标记中的元素不是'；t在构造函数中初始化

我需要访问我创建的自定义标记中的元素。 问题是在初始化这些元素（这是预期的）之后没有调用构造函数。在本例中，我无法访问对象

formTag

中显示的表单标记

MultiNav.js

class MultiNav extends HTMLElement { 
    get formTag() { 
        return this.getElementsByTagName("form")[0];
    }

    get selectTag() {
        return this.formTag.getElementsByTagName("select")[0];
    }

    constructor () {
        super();
        this.formTag.addEventListener('submit', function(evt) {
            evt.preventDefault(); // to avoid error, by stopping form from submitting
            console.log("submitting ...");  // doesn’t log because formTag isn’t retrieved
             this.formTag.submit();
        }); 
    }
}


window.customElements.define('multi-nav', MultiNav);

问题在于，调用

addEventListener

后会引发错误，浏览器显示：

未捕获类型错误：无法读取未定义的属性“addEventListener”

在HTML文件中时，（仅在google chrome上工作）

$（文档）.ready（函数（）{
$（'input[name=toggle]'）。更改（函数（）{
$（'#myform'）。提交（）；
});
});
$20
$50
$100
$500
$1000
类别
家
数码产品
汽车

---

它应该与JavaScript中的类生命周期有关。但我找不到合适的功能

三个问题和解决方案：

• this.formTag

  未定义，因为自定义标记的实例是在加载文档之前创建的，因此

  this.getElementsByTagName（“表单”）[0]

  未定义。
  解决方案：放置

  窗口。自定义元素。定义（'multi-nav'，multi-nav）在
  ready
  回调函数中
  

• $（“#myform”）.submit（）

  将在不触发

  submit

  事件的情况下提交表单。
  解决方案：在HTML中包含一个不可见的提交按钮，并触发对其的单击，而不是调用

  submit

  方法

  <input type="submit" id="submitButton" style="display:none">
  

• 在

  addEventListener

  回调

  中，此

  不是指自定义对象，而是指调用

  addEventListener的元素
  
  解决方案：替换
  此.formTag.submit（）由
  this.submit（）
  编写
  

---

看起来像是这种混乱的典型案例。将

函数（evt）

替换为

evt=>

的箭头语法，以保持此

相同。或者，将
.bind（this）
应用于该回调函数（在其右括号后）。如果第一个问题得到解决，则可能是另一个问题。但主要问题是对未定义的对象调用“addEventListener”。（对象formTag尚未识别）我执行了它，它按照您建议的方式工作。关于这一点，在addEventListener回调中，我认为这是我需要删除formTag的地方，因为它的内部是指form对象，而外部是指自定义对象。而且我真的很喜欢隐藏按钮的把戏；这让我觉得自己很傻，我以前从来没有想过！
<input type="submit" id="submitButton" style="display:none">

$('#submitButton').click();