使用 document.addEventListener 中断 document.getElementById

Question

真的希望有人能帮助我。长话短说，在这个网站的一些回复中，我看到人们写道我们应该远离：

<body onLoad="init();">

在HTML到：

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

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

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

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);

<!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>

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

"Uncaught TypeError: Cannot read property 'childElementCount' of null"

然而，当我注释掉事件侦听器并使用它起作用的 onLoad 技术时，我只是在做一些愚蠢的事情吗？我尝试使用变量而不是 this.list，尝试使用 querySelector 而不是 getElementById，我尝试使用 "load" 而不是 "DOMCONTENTLOADED"，但似乎没有任何效果。

我知道这会很简单，但我无法在任何地方在线找到解决方案，也许我只是在寻找错误的东西。

请把我从痛苦中解救出来。

谢谢

禅宗

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 调用并尝试使用其 return 值作为事件处理程序。

删除 ().

问题 2

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

使用 document.addEventListener 中断 document.getElementById

Using document.addEventListener breaks document.getElementById

javascript

dom

getelementbyid

addeventlistener

问题 1

问题 2