调用具有多个数组参数的函数

Question

有一个HTML锚点列表，我需要添加事件侦听器，据我了解，当我将其作为参数提及时，它不会接收数组。作为一种尝试，我使用自调用代替了额外的功能，但是这种方法甚至i在调试时也没有被监听。for (var i=0; i < anc.length; i++) {    anc[i].addEventListener('mouseover', function(i,pop,tri) {       console.log('i=%i', i);    // last value of loop       pop[i].style.display = 'initial';       tri[i].style.animation='anim_dpt_tr 0.4s ease-out forwards';    });    ...}更有用的代码var pop = document.querySelectorAll('#cities > li > a > .popup');const anc = document.querySelectorAll('#cities > li > a');var tri = document.getElementsByClassName('triangle-left');for (var i=0; i < anc.length; i++) {    anc[i].addEventListener('mouseover', over(i, tri, pop));    anc[i].addEventListener('touchmove', over(i, tri, pop));    anc[i].addEventListener('touchend', out(i, tri, pop));    anc[i].addEventListener('mouseout', out(i, tri, pop));}function over(i,tri,pop) {    console.log("over_address=%i", pop[i]); // =0    pop[i].style.display = 'initial';    tri[i].style.animation='anim_dpt_tr 0.4s ease-out forwards';}function out(i,tri,pop) {    console.log("out_i=%i", i);             // =each index    pop[i].style.display = 'none';    tri[i].style.animation='anim_dpt_tr_back 0.3s ease-in forwards';}这里的HTML树<ul id="cities">  <li>    <a href="">Shoulder      <span class="triangle-left"></span> <span class="popup">Arm</span> </a>  </li>...如何正确将数组传递给事件处理程序？

Answer 1

您可以使用.bind（）完成此操作。例如over.bind(null, i, tri, anc)，当用作函数处理程序时，您的所有调用都可能看起来像。请注意，必填项null是第一个参数。

因此，它将转换为：

over.bind(null, i, tri, pop)

out.bind(null, i, tri, pop)

让我知道是否可行。否则，给我留言。