时间戳

首页 > 解决方案 > 为了让功能一“知道”它将对功能二中发生的事情做出反应，如何涉及参数？

javascript - 为了让功能一“知道”它将对功能二中发生的事情做出反应，如何涉及参数？

问题描述

以下代码实际上有效，但我不明白为什么。为什么当我将“事件”参数传递给函数 zaehle() 时，该函数实际上“知道”它应该对设置函数中发生的事情做出反应？

我只是看不到 zaehle() 和 setup() 函数的连接方式，或者我传递给 zaehle() 的参数将如何参与。

我希望我能把问题说清楚。如果不是，我很乐意尝试以其他方式解释它。这真的让我很烦恼，我觉得在我得到它之前我不能继续学习。

<body>

<div id="eins">0</div>
<div id="zwei">0</div>
<div id="drei">0</div>
<div id="vier">0</div>
<div id="funf">0</div>

</body>

JS

var mouseoverZaehler = 0;

function zaehle(event) {
    mouseoverZaehler++;
    event.target.innerHTML = mouseoverZaehler;
}

function setup() {
    document.getElementById("eins").addEventListener("mouseover", zaehle);
    document.getElementById("zwei").addEventListener("mouseover", zaehle);
    document.getElementById("drei").addEventListener("mouseover", zaehle);
    document.getElementById("vier").addEventListener("mouseover", zaehle);
    document.getElementById("funf").addEventListener("mouseover", zaehle);
}

window.addEventListener("load", setup);

标签： javascriptfunctionparameters

解决方案

这是一步一步发生的事情：

  1. 页面加载
  2. setup函数被调用（因为window.addEventListener("load", setup)）
  3. setup 函数中的每个元素都有一个附加的 mouseover 事件侦听器，并在它触发时zaehle调用函数（因为document.getElementById("number").addEventListener("mouseover", zaehle)）
  4. 您将鼠标移到任何元素上
  5. zaehle函数被调用 -mouseoverZaehler递增并且innerHTML目标元素的设置为更新的值mouseoverZaehler

查看addEventListener 文档以获取更多详细信息。

推荐阅读