JavaScript点击事件 - 为什么我需要两个addEventListeners？ [英] JavaScript Click Events - Why do I need two addEventListeners?
问题描述
我在努力学习不引人注目的JavaScript。下面的代码是试图改变一个现有的练习块，我使用从HTML标签中调用的getArrays函数。这是我可以工作的唯一版本。虽然它很好，它的工作原理，我觉得可能有一些不必要的部分，不完全明白为什么我需要最后一行代码在那里（一些新的addEventListener的东西）。我正在工作的Mozilla DOM引用示例，知道如何在jQuery中做到这一点。谢谢！
I'm trying my best to learn unobtrusive JavaScript. The code below is an attempt to change an existing practice piece I had with the getArrays function called from within the HTML tag. This is the only version I could get to work. While it's nice that it works, I feel like there may be some unnecessary parts and don't fully understand why I need the last line of code in there (kind of new to the addEventListener stuff). I was working off of the Mozilla DOM reference example and know how to do this in jQuery already. Thanks!
JavaScript ：
<script>
function getArrays() {
var ddlValArray = new Array();
var ddlTextArray = new Array();
var ddl = document.getElementById("ddlFlavors");
for (i=0; i<ddl.options.length; i++) {
ddlValArray[i] = ddl.options[i].value;
ddlTextArray[i] = ddl.options[i].text;
alert(ddlValArray[i] + ' ' + ddlTextArray[i]);
}
}
function showArrays() {
var link = document.getElementById("clickHandler");
link.addEventListener("click", getArrays, false);
}
document.addEventListener("DOMContentLoaded", showArrays, false);
</script>
HTML
Select Flavor:
<select id='ddlFlavors'>
<option value="1">Vanilla</option>
<option value="2">Chocolate</option>
<option value="3">Strawberry</option>
<option value="4">Neopolitan</option>
</select>
<br/><br/>
<a id="clickHandler" href="#">Show Flavors</a>
推荐答案
正确。
将脚本标记移动到正文的< / body> 标记之前，较长的需要等待DOMContentLoaded事件。上面的html将在执行JS之前被解析。
Move the script tag to the bottom of the body just before the </body> tag and you no longer need to wait for DOMContentLoaded event. The html above it will be parsed prior to the JS being executed.
这会导致其他注意事项，但以您的示例为例。
This CAN cause other caveats but for your example it will work.
<body>
Select Flavor:
<select id='ddlFlavors'>
<option value="1">Vanilla</option>
<option value="2">Chocolate</option>
<option value="3">Strawberry</option>
<option value="4">Neopolitan</option>
</select>
<br/><br/>
<a id="clickHandler" href="#">Show Flavors</a>
<script>
function getArrays() {
var ddlValArray = new Array();
var ddlTextArray = new Array();
var ddl = document.getElementById("ddlFlavors");
for (i=0; i<ddl.options.length; i++) {
ddlValArray[i] = ddl.options[i].value;
ddlTextArray[i] = ddl.options[i].text;
alert(ddlValArray[i] + ' ' + ddlTextArray[i]);
}
}
function showArrays() {
var link = document.getElementById("clickHandler");
link.addEventListener("click", getArrays, false);
}
showArrays();
</script>
</body>
将脚本放在底部还有许多其他好处。 请在此处详细了解。
There are many other benefits to placing the scripts at the bottom as well. Read more about them here.
有一点需要注意：即使iframe和图片的标签已解析，图片本身可能无法完成下载，因此您必须等待。此外，iframe内容也可能无法加载。然而DOMContentLoaded不等待这些。我只是想这将是很高兴，注意。
One thing to note: Even though the tags for iframes and images are parsed, the image itself might not be finished downloading, so you will have to wait for that. Also iframe content might not be loaded yet either. However DOMContentLoaded doesn't wait for these either. I just thought it would be nice to note.
这篇关于JavaScript点击事件 - 为什么我需要两个addEventListeners？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
