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

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)让我知道是否可行。否则，给我留言。