Javascript 将参数传递给forEach.call内的函数

我试图理解如何将参数传递给

forEach.call中的函数。我基本上把代码转换成了一个对象文字，并将函数拆分，以便在以后添加更多动画时更加枯燥

问题是，它在加载时记录元素，但在加载之后就不再记录了，我想这是因为变量在第一次记录之后就不存在了。我该如何让它工作，还是这种方法完全是错误和胡说八道的

工作示例：

我失败的尝试：

问题代码调用在
.addEventListener（）
处设置的函数，而不是在调度事件时引用要调用的函数。此外，事件附加到
元素，
.getElementsByClassName（）
调用不是必需的

const who = {
  trigger: [...document.getElementsByClassName('slide')],

  init: () => {
    console.log('init');
    who.trigger.forEach.call(who.trigger, (el) => {
      el.addEventListener('mouseover', who.animateOver, false);
    });
    who.trigger.forEach.call(who.trigger, (el) => {
      el.addEventListener('mouseout', who.animateOut, false);
    });
  },

  animateOver: (el) => {
    console.log('animateOver');
    console.log(el);
    // animate image
    const image = el.target;
    console.log(image);
    TweenMax.to(image, 0.25, {
      transformStyle: 'preserve-3d',
      yPercent: 35,
      ease: Power1.easeOut,
    });
  },

  animateOut: (el) => {
    console.log(el);
    console.log('animateOut');
    const image = el.target;
    TweenMax.to(image, 0.75, {
      yPercent: 0,
      ease: Bounce.easeOut,
    });
  },

  debug: () => {
    console.log('debug');
  },

  destroy() {
    console.log('destroy');
  },
};

onload = () => who.init();

非常感谢您的详细回答，这真的很有帮助：-）
const who = {
  trigger: [...document.getElementsByClassName('slide')],

  init: () => {
    console.log('init');
    who.trigger.forEach.call(who.trigger, (el) => {
      el.addEventListener('mouseover', who.animateOver, false);
    });
    who.trigger.forEach.call(who.trigger, (el) => {
      el.addEventListener('mouseout', who.animateOut, false);
    });
  },

  animateOver: (el) => {
    console.log('animateOver');
    console.log(el);
    // animate image
    const image = el.target;
    console.log(image);
    TweenMax.to(image, 0.25, {
      transformStyle: 'preserve-3d',
      yPercent: 35,
      ease: Power1.easeOut,
    });
  },

  animateOut: (el) => {
    console.log(el);
    console.log('animateOut');
    const image = el.target;
    TweenMax.to(image, 0.75, {
      yPercent: 0,
      ease: Bounce.easeOut,
    });
  },

  debug: () => {
    console.log('debug');
  },

  destroy() {
    console.log('destroy');
  },
};

onload = () => who.init();