addEventListener未添加事件监听器 反而直接执行绑定函数

你目前的绑定逻辑存在JS回调传值的基础错误，完全对应你观察到的两个现象：

• 调用addEventListener时，第二个参数要求传入待事件触发时执行的函数引用，但你写的是BlurElements(images[i])这种带括号的函数调用形式——代码执行到绑定语句的瞬间，这个函数就会被立刻执行，不会等待鼠标事件触发
• 两个动画函数执行后没有返回值，addEventListener实际收到的第二个参数是undefined，等于根本没有给元素绑定有效的事件监听，所以后续鼠标移入移出不会有任何响应

只需要把“立即执行的函数调用”包装成“事件触发时才执行的逻辑”，就可以解决问题，常用实现方式二选一即可：

1. 用箭头函数包裹原有动画调用，不改动之前写好的两个工具函数
   把循环内的绑定代码替换为：

   for(let i = 0; i < images.length; i++) {
       // 鼠标移入：事件触发时才执行blurIn动画
       images[i].addEventListener('mouseover', () => {
           BlurElements(images[i])
       });
       // 鼠标移出：事件触发时才执行blurOut动画
       images[i].addEventListener('mouseleave', () => {
           unBlurElements(images[i])
       });
   }
   

2. 直接通过事件对象获取触发元素，省去手动传参的步骤，让函数本身符合事件回调的格式
   微调原有工具函数的入参逻辑：

   function BlurElements(e) {
       // 通过currentTarget拿到绑定事件的img元素
       e.currentTarget.style.animation = 'blurIn 1s';
   };
   function unBlurElements(e) {
       e.currentTarget.style.animation = 'blurOut 1s';
   };
   // 直接传函数引用即可，不需要额外调用
   for(let i = 0; i < images.length; i++) {
       images[i].addEventListener('mouseover', BlurElements);
       images[i].addEventListener('mouseleave', unBlurElements);
   }
   

• 悬停交互建议把mouseover换成mouseenter，避免鼠标在图片内部移动时重复触发动画，交互手感更顺滑
• 切换动画前可以先清空元素的animation属性值，强制浏览器重绘后再赋值新动画，避免连续切换blurIn/blurOut时出现动画状态卡滞，参考写法：

  // 调整后的blurIn逻辑示例
  function BlurElements(e) {
      const target = e.currentTarget;
      target.style.animation = 'none';
      // 触发一次重绘后再设置新动画
      void target.offsetWidth;
      target.style.animation = 'blurIn 1s';
  }
  

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