JavaScript点击事件-为什么我需要两个AddEventListener？_Javascript_Click_Addeventlistener

JavaScript点击事件-为什么我需要两个AddEventListener？

javascript

JavaScript点击事件-为什么我需要两个AddEventListener？,javascript,click,addeventlistener,Javascript,Click,Addeventlistener,我正在尽最大努力学习低调的JavaScript。下面的代码试图更改我在HTML标记中使用getArrays函数调用的现有实践片段。这是我能开始工作的唯一版本。虽然它工作起来很好，但我觉得可能有一些不必要的部分，并且不完全理解为什么我需要最后一行代码（对于addEventListener来说是一种新的东西）。我正在研究Mozilla DOM参考示例，并且已经知道如何在jQuery中实现这一点。谢谢 JavaScript: <script> functi

我正在尽最大努力学习低调的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>


函数getArrays（）{
var ddlValArray=新数组（）；
var ddlTextArray=新数组（）；
var ddl=document.getElementById（“ddl”）；
对于（i=0；i这行代码：document.addEventListener（“DOMContentLoaded”，showArrays，false）；
确保函数showArrays（）
在DOM准备好之前不会开始执行。换句话说，函数showArrays（）
将在（X）HTML文档加载和解析后开始执行
我建议您将JavaScript代码放在一个单独的文件中，并在head
部分使用以下HTML代码：
。然后您还可以使用window.onload
和onclick
事件，而不是document.addEventListener（）
方法
当您这样做时，您可以将代码放在showArrays
函数的主体之外，然后删除该函数
例如：
window.onload = function()
{
  var link = document.getElementById("clickHandler");
  link.onclick = getArrays;
}

这被认为是一种更好的做法
完整示例
在script.js
文件中：
//This is the beginning of the 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]);  
        }
    }

window.onload = function()
{
  var link = document.getElementById("clickHandler");
  link.onclick = getArrays;
}

//这是脚本的开头。。。
函数getArrays（）{
var ddlValArray=新数组（）；
var ddlTextArray=新数组（）；
var ddl=document.getElementById（“ddl”）；
对于（i=0；i这行代码：document.addEventListener（“DOMContentLoaded”，showArrays，false）；
确保函数showArrays（）
在DOM准备好之前不会开始执行。换句话说，函数showArrays（）
将在（X）HTML文档加载和解析后开始执行
我建议您将JavaScript代码放在一个单独的文件中，并在head
部分使用以下HTML代码：
。然后您还可以使用window.onload
和onclick
事件，而不是document.addEventListener（）
方法
当您这样做时，您可以将代码放在showArrays
函数的主体之外，然后删除该函数
例如：
window.onload = function()
{
  var link = document.getElementById("clickHandler");
  link.onclick = getArrays;
}

这被认为是一种更好的做法
完整示例
在script.js
文件中：
//This is the beginning of the 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]);  
        }
    }

window.onload = function()
{
  var link = document.getElementById("clickHandler");
  link.onclick = getArrays;
}

//这是脚本的开头。。。
函数getArrays（）{
var ddlValArray=新数组（）；
var ddlTextArray=新数组（）；
var ddl=document.getElementById（“ddl”）；
对于（i=0；i来说，如果您的HTML/JS结构正确，您就不会这样做
将脚本标记移动到正文的底部，刚好在
标记之前，您就不需要再等待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>


选择口味：
香草
巧克力
草莓
新波利坦



函数getArrays（）{
var ddlValArray=新数组（）；
var ddlTextArray=新数组（）；
var ddl=document.getElementById（“ddl”）；
对于（i=0；i来说，如果您的HTML/JS结构正确，您就不会这样做
将脚本标记移动到正文的底部，刚好在
标记之前，您就不需要再等待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>


选择口味：
香草
巧克力
草莓
新波利坦



函数getArrays（）{
var ddlValArray=新数组（）；
var ddlTextArray=新数组（）；
var ddl=document.getElementById（“ddl”）；
for（i=0；i事件监听器对JS至关重要。每次用户与您的页面交互时，您都需要关注该事件并对其作出响应。

当然，在这个代码段中，您的函数假设DOM中有一个具有给定id的元素，ready、set和waiting。情况可能并非如此，这就是为什么您必须等到JS收到OK（DOMReady
事件）
这只是一个非常简单的例子，说明了为什么可能会使用addEventListener
。但在我看来，当您开始使用Ajax调用向页面添加新内容时，事件监听器就有了自己的功能：

假设DOM已准备就绪，但稍后可能会请求或不请求某些元素（取决于用户输入）
$('#foo').on('click',functionRef);

这并不要求在运行此代码时foo元素可用，但只要将该元素添加到dom中，单击事件就会按您的意愿处理。

在非jQ中，您将使用addEventListener
。由于事件模型（有关传播和冒泡的详细信息，请参阅quirksmode），监听器不需要直接连接到元素：
document.body.addEventListener('click',function(e)
{
    if ((e.target || e.srcElemet).id === 'foo')
    {
        //function that deals with clicks on foo element
    }
},false);//last param is for bubbling/propagating events

这样，您就可以异步绑定可能添加到dom中的元素的所有事件，而不必检查每个ajax调用的每个响应
让我们更进一步：委派。正如您所看到的，在上面的片段中，我们正在监听发生在身体内部某个地方的所有点击事件。这几乎没有什么区别：所有点击，所以您不必担心