JavaScript Click Events - 为什么我需要两个addEventListeners？

Question

JavaScript Click Events - 为什么我需要两个addEventListeners？

Dav*_*ard 1 javascript click addeventlistener

我正在努力学习不引人注目的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>

Run Code Online (Sandbox Code Playgroud)

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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

rle*_*mon 5

如果正确构建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>

Run Code Online (Sandbox Code Playgroud)

将脚本放在底部还有许多其他好处.在这里阅读更多相关信息.

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

归档时间：	12 年，11 月前
查看次数：	350 次
最近记录：	12 年，11 月前