稍后在 html 文件中使用之前初始化 JavaScript class

Question

我有以下问题。我开发了一个 javaScript class 与 select 标签结合使用。由于 javaScript class 必须通过页面的 DOM 进行解析，我宁愿在 DOM 完成加载后初始化 class 而不一定是用户从 select 元素中选择一个值。我想知道执行此操作的最佳做法是什么。

我目前脑中有以下代码：

<script>
    window.addEventListener('DOMContentLoaded', (event) => {
  
      // As soon as DOM content is loaded initialize class and have class parse through DOM     
      obj = new Object();
      
    });
</script>

和下面的 select 在正文中：

<select name="select" id="select" onChange="obj.function(this);">
    <option value="value1">Value1</option>
    <option value="value2">Value2</option>
</select>

但是，当我运行这样做时，我得到了 obj 的未捕获引用错误。这方面的最佳做法是什么？

Answer 1

您应该在该文档准备好使用新实例后绑定 select 事件 onChange。

<script>
    window.addEventListener('DOMContentLoaded', (event) => {
  
      // As soon as DOM content is loaded initialize class and have class parse through DOM     
      obj = new Object();
      sel = document.getElementById('select')
      sel.onChange = obj.function(sel)
    });
</script>

...

<select name="select" id="select">
    <option value="value1">Value1</option>
    <option value="value2">Value2</option>
</select>

稍后在 html 文件中使用之前初始化 JavaScript class

Initializing JavaScript class before using it later in an html file

javascript

html

web-deployment