使用document.addEventListener会破坏document.getElementById
[英]Using document.addEventListener breaks document.getElementById
问题描述
really hope someone can help me out here. 
真的希望有人可以在这里帮助我。 Cutting a very long story short, on a few replies on this site I've seen people write that we should move away from: 简而言之，在这个站点上的一些回复中，我看到人们写道我们应该远离：
<body onLoad="init();">
In the HTML to: 在HTML中：
document.addEventListener("DOMCONTENTLOADED", init, false);
In the JavaScript file so we aren't mixing interactive code with content code etc. 因此，在JavaScript文件中，我们不会将交互式代码与内容代码等混合使用。
But by switching to this method my code breaks, I can no longer access the DOM tree, here is an example: 但是通过切换到此方法，我的代码中断了，我无法再访问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>
The this.container is always null so the childElementCount generates an error of: this.container始终为null，因此childElementCount生成以下错误：
"Uncaught TypeError: Cannot read property 'childElementCount' of null"
Yet when I comment out the event listener and use the onLoad technique it works, am I just doing something stupid? 但是，当我注释掉事件侦听器并使用有效的onLoad技术时，我是否只是在做一些愚蠢的事情？ I've tried using a variable instead of using this.list, tried using querySelector instead of getElementById, I've tried "load" instead of "DOMCONTENTLOADED" but nothing seems to work. 我试过使用变量而不是使用this.list，试过使用querySelector而不是getElementById，我试过了“加载”而不是“ DOMCONTENTLOADED”，但似乎没有任何效果。
I know it will be something really simple but I cannot find the solution anywhere online, maybe I am just searching for the wrong thing. 我知道这将非常简单，但是我无法在任何在线位置找到解决方案，也许我只是在寻找错误的东西。
Please put me out of my misery. 请让我摆脱痛苦。
thanks 谢谢
Zen 禅
2 个解决方案
解决方案1
1 已采纳 2018-06-04 13:38:27
This is the correct way of doing it: 这是正确的方法：
<!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>
In you code you called init() and then passed it, but you should passed it as a function! 在您的代码中，您调用了init（），然后将其传递，但是您应该将其作为函数传递！ document.addEventListener("DOMContentLoaded", init, false); That's why 这就是为什么
解决方案2
1 2018-06-04 13:49:14
document.addEventListener("DOMCONTENTLOADED", init(), false);
Problem 1 问题1
You are calling init immediately and trying to use its return value as the event handler. 您正在立即调用init并尝试将其返回值用作事件处理程序。
Remove the () . 删除() 。
Problem 2 问题2
Event names are case sensitive. 事件名称区分大小写。 It is DOMContentLoaded not DOMCONTENTLOADED 它是DOMContentLoaded而不是DOMCONTENTLOADED
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.