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

Question

有了 HTML anchor 列表，我需要添加事件监听器，据我所知，当我将其作为参数提及时，它不会接收数组。

作为尝试，我使用了自调用而不是额外的函数，但这样在调试时甚至连 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

您的“更有用的代码”是不正确的，因为它实际上没有分配任何事件处理程序；它只是立即调用代码并返回 undefined。

要采用这种方法，您需要让这些函数返回一个函数。这就是您定义事件参数的地方。

function over(i,tri,pop) {
  return function(event) {
    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) {
  return function(event) {
    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';
  }
}

这是一种老派的做法。最近，您将通过使用 let 或 const 使用范围限定为 for 循环 block 的 i 变量而不是 var。

---

要考虑的另一件事是缓存集合是否真的值得。如果每个集合中每个 i 元素之间的布局关系非常简单，那么处理程序内部的 DOM 遍历可能是首选。

---

另一种可能性是创建一个实现EventListener 接口(interface)的对象。然后您可以将每个元素分配给对象，并使用对象本身代替事件处理函数。

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++) {
    // Create a new instance of your object, giving it the data needed
    //   when an event occurs.
    var obj = new MyElements(pop[i], anc[i], tri[i], i);

    // Use the object itself in lieu of an event handler function
    //  (see below)
    anc[i].addEventListener("mouseover", obj);
    anc[i].addEventListener("touchmove", obj);
    anc[i].addEventListener("mouseout", obj);
    anc[i].addEventListener("touchend", obj);
}

// Holds the relevant info for each index
function MyElements(pop, anc, tri, i) {
  this.pop = pop
  this.anc = anc
  this.tri = tri
  this.i = i
}

// Implements the EventListener interface.
// This is what gets invoked when an event occurs.
// It is set up to simply invoke a function on the same object
//   that has been given the same name as the event.
MyElements.prototype.handleEvent = function(event) {
  this[event.type](event)
}

// These are the functions for each event type. For simplicity, I
// gave each handler the name of the event that fires it so that
// you can use event.type to invoke them.
MyElements.prototype.mouseover = 
MyElements.prototype.touchmove = function over(event) {
    console.log("over_address=%i", this.i); // =0
    this.pop.style.display = 'initial';
    this.tri.style.animation='anim_dpt_tr 0.4s ease-out forwards';
}

MyElements.prototype.mouseout =
MyElements.prototype.touchend = function out(event) {
    console.log("out_i=%i",this.i);             // =each index
    pop[i].style.display = 'none';
    tri[i].style.animation='anim_dpt_tr_back 0.3s ease-in forwards';
}