为元素设置点击事件监听器时：使用变量对比e.target，哪种方案内存消耗更低、性能更优？

Great question! Let’s unpack this and clear up some misconceptions about memory usage here.

首先，核心误解：变量btn的内存开销几乎可以忽略 #

你担心btn变量会占用更多资源，但实际上：

• btn只是一个指向DOM元素的引用（指针），它本身占用的内存非常小——就像一个地址标签，而不是把整个DOM元素复制了一份。
• e.target同样是指向同一个DOM元素的引用，本质上和btn是一回事。两者的内存消耗没有明显差异。

两种方案的实际差异在哪里？ #

方案一：使用btn变量 #

let btn = document.querySelector('.example')
btn.addEventListener('click', (e) => { 
  btn.classList.add('active'); 
  btn.onmouseleave = () => { console.warn('leave') } 
})

• 如果btn是在全局作用域声明的，它会一直持有DOM元素的引用，直到页面卸载或者变量被手动置为null。但这种引用的内存成本极低，除非你有上万个这样的全局变量，否则根本不会影响性能。
• 如果是在局部作用域（比如一个函数内部），函数执行完成后，btn变量会被JavaScript的垃圾回收机制自动回收。

方案二：使用e.target #

let btn = document.querySelector('.example')
btn.addEventListener('click', (e) => { 
  e.target.classList.add('active'); 
  e.target.onmouseleave = () => { console.warn('leave') } 
})

• e是事件触发时生成的临时事件对象，事件处理函数执行完成后，除非你在内部的回调（比如onmouseleave）中捕获了它（这里并没有），否则e会被垃圾回收。但e.target依然是指向同一个DOM元素的引用，和btn没有区别。

真正需要优化的点：避免重复绑定事件 #

不管用哪种写法，当前的代码都有一个潜在问题：每次点击按钮都会重新赋值onmouseleave回调。虽然旧的回调会被覆盖，但如果回调包含闭包引用（比如引用了外部变量），旧的回调可能无法被及时回收，积累下来才会有内存问题。

优化建议：

• 如果mouseleave事件逻辑不需要依赖点击状态，直接在外部绑定一次即可：

  let btn = document.querySelector('.example')
  btn.addEventListener('click', (e) => { 
    e.target.classList.add('active'); 
  })
  // 只绑定一次mouseleave事件
  btn.addEventListener('mouseleave', () => { 
    console.warn('leave') 
  })
  

• 如果必须在点击后才绑定mouseleave，可以添加一个标志位避免重复绑定：

  let btn = document.querySelector('.example')
  let hasMouseLeaveBound = false
  
  btn.addEventListener('click', (e) => { 
    e.target.classList.add('active'); 
    if (!hasMouseLeaveBound) {
      e.target.onmouseleave = () => { console.warn('leave') }
      hasMouseLeaveBound = true
    }
  })
  

总结 #

两种方案的内存消耗几乎没有差异，因为它们本质上都是引用同一个DOM元素。真正值得关注的是避免不必要的重复事件绑定，这才是影响性能和内存的关键。

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