问题1

Question

真的希望有人可以帮助我。简而言之，在本网站的一些回复中，我看到人们写道我们应该离开：

<body onLoad="init();">

在HTML中：

document.addEventListener("DOMCONTENTLOADED", init, false);

在JavaScript文件中，我们不会将交互式代码与内容代码等混合在一起。

但是通过切换到这个方法我的代码中断了，我再也无法访问DOM树了，这是一个例子：

＆＃13;

function Tester(){
    this.value1 = 10;
    this.container = document.getElementById("fred");
    this.list = this.container.childElementCount;       
    this.in_func = function(){
        alert(this.value1+" "+ this.list);
    };//end of this.in_func
}//end of function Tester
function init(){
    var alpha = new Tester();
    alpha.in_func();
}//end of function init

document.addEventListener("DOMCONTENTLOADED", init(), false);

＆＃13;

<!doctype html>
<html>
  <head>
  <meta charset="utf-8">
  <title>Untitled Document</title>

  </head>

  <body><!--onLoad="init();"-->
    <section id="fred">
    <section id="elem1"></section>
    <section id="elem2"></section>
    <section id="elem3"></section>
    <section id="elem4"></section>
    <section id="elem5"></section>  
    </section>
  </body>
</html>

＆＃13;

this.container始终为null，因此childElementCount会生成错误：

＆＃34;未捕获的TypeError：无法读取属性＆＃39; childElementCount＆＃39; of null＆＃34;

然而，当我注释掉事件监听器并使用onLoad技术时，它是否有效，我只是在做一些愚蠢的事情吗？我尝试过使用变量而不是使用this.list，尝试使用querySelector而不是getElementById，我已经尝试了＃34;加载＆＃34;而不是＆＃34; DOMCONTENTLOADED＆＃34;但似乎没什么用。

我知道这将是非常简单的事情，但我无法在网上找到解决方案，也许我只是在寻找错误的东西。

请让我摆脱痛苦。

感谢

禅

Answer 1

这是正确的做法：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script>

function Tester(){
    this.value1 = 10;
    this.container = document.getElementById("fred");
    this.list = this.container.childElementCount;       
    this.in_func = function(){
        alert(this.value1+" "+ this.list);
    };//end of this.in_func
}//end of function Tester
function init(){
    var alpha = new Tester();
    alpha.in_func();
}//end of function init
  document.addEventListener("DOMContentLoaded", function(event) {
  init();
    console.log("DOM fully loaded and parsed");
  });

// document.addEventListener("DOMContentLoaded", init(), false);
</script>
</head>

<body>
<section id="fred">
<section id="elem1"></section>
<section id="elem2"></section>
<section id="elem3"></section>
<section id="elem4"></section>
<section id="elem5"></section>  
</section>
</body>
</html>

在你的代码中你调用了init（）然后传递它，但是你应该将它作为函数传递！ document.addEventListener("DOMContentLoaded", init, false); 这就是为什么

Answer 2

document.addEventListener("DOMCONTENTLOADED", init(), false);

问题1

您正在立即致电init ，并尝试将其返回值用作事件处理程序。

删除()。

问题2

事件名称区分大小写。它是DOMContentLoaded而非DOMCONTENTLOADED

使用document.addEventListener会破坏document.getElementById

2 个答案:

问题1

问题2