gpt4 book ai didi

JavaScript 点击事件 - 为什么我需要两个 addEventListeners?

转载 作者:行者123 更新时间:2023-11-30 07:16:39 24 4
gpt4 key购买 nike

我正在尽最大努力学习低调的 JavaScript。下面的代码试图改变我在 HTML 标记中调用 getArrays 函数的现有练习曲。这是我可以开始工作的唯一版本。虽然它很好用,但我觉得可能有一些不必要的部分并且不完全理解为什么我需要最后一行代码(addEventListener 的东西有点新)。我正在研究 Mozilla DOM 引用示例,并且已经知道如何在 jQuery 中执行此操作。谢谢!

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>

最佳答案

如果您正确地构建了 HTML/JS,则不会。

将脚本标签移动到正文底部 </body> 之前标记,您不再需要等待 DOMContentLoaded 事件。上面的 html 将在执行 JS 之前被解析。

这可能会导致其他注意事项,但对于您的示例来说它会起作用。

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

将脚本放在底部还有许多其他好处。 Read more about them here .

需要注意的一点:即使解析了 iframe 和图像的标记,图像本身也可能未完成下载,因此您将不得不等待。此外,iframe 内容也可能尚未加载。但是 DOMContentLoaded 也不会等待这些。我只是觉得它会很好注意。

关于JavaScript 点击事件 - 为什么我需要两个 addEventListeners?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13979808/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com