技术疑问：event参数如何让zaehle函数响应setup中的事件绑定？

嘿，我来帮你把这段代码的逻辑拆解开，你就能明白为啥zaehle()能响应事件绑定，还有event参数到底干啥用啦！

1. setup()和zaehle()的关联是怎么来的？ #

其实setup()里的addEventListener就是把两个函数拴在一起的关键！

你看这段代码：

document.getElementById("eins").addEventListener("mouseover", zaehle);

它的意思是：当id为eins的div触发mouseover（鼠标移入）事件时，就调用zaehle这个函数。这里的zaehle是作为「回调函数」传递给事件监听器的——相当于setup给每个div都“交代了任务”：“等鼠标移到你身上，就去跑zaehle的代码”。

另外，最后一行window.addEventListener("load", setup)是确保页面加载完成后才执行setup()，这样所有div的事件绑定才能正常生效，不然页面元素还没加载出来，getElementById找不到元素就白搭了。

2. event参数的作用是什么？ #

当事件（比如鼠标移入）触发时，浏览器会自动生成一个事件对象，并把这个对象作为参数传给回调函数zaehle。这个event里装着所有和当前事件相关的信息：

• event.target：就是触发事件的那个元素（比如你鼠标移到zwei上，event.target就是这个div）
• 还包含鼠标位置、事件类型等其他信息，只不过这段代码只用到了target

所以zaehle里的event.target.innerHTML = mouseoverZaehler，就是找到触发事件的那个div，把它的内容改成当前的计数器数值——这也是为啥每个div能对应显示自己触发事件后的计数（不过你的代码里mouseoverZaehler是全局变量，所以所有div会共用同一个计数，这点可以注意下）。

完整流程梳理 #

用大白话走一遍整个过程：

• 页面加载完毕 → 浏览器自动执行setup()
• setup()给每个div都绑定了鼠标移入事件，指定触发时调用zaehle
• 你把鼠标移到某个div上 → 浏览器触发mouseover事件，自动创建event对象，调用zaehle(event)
• zaehle里计数器加1，通过event.target找到触发事件的div，更新它的内容为最新计数

你的示例代码（整理后） #

HTML代码：

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

内容的提问来源于stack exchange，提问作者Nat_