jQuery两种点击事件绑定方式是否会引发内存泄漏？不同移除场景探究

两种实现方式 #

方式1 #

// Approach 1
const $element = jQuery(...); 
$element.on('click', () => { 
    $element.addClass('ok');
});

方式2 #

// Approach 2
const $element = jQuery(...); 
$element.on('click', (evt) => { 
    const $element = jQuery(evt.currentTarget); 
    $element.addClass('ok');
});

问题1：调用$element.remove()后的内存泄漏风险 #

你的理解是正确的：jQuery的remove()方法会自动清理目标元素上所有通过jQuery绑定的事件监听器，同时移除内部缓存中与该元素相关的条目，切断事件处理函数与元素之间的引用链。

• 两种方式都不会引发内存泄漏：方式1的箭头函数虽捕获了外部的$element，但事件监听器被清理后，该箭头函数不再被任何缓存持有；如果外部的$element没有其他代码引用，整个jQuery对象和对应的DOM元素都会被垃圾回收机制回收。方式2的事件处理函数仅在执行时通过evt.currentTarget获取元素，事件清理后同样不会残留引用。
• 两者风险相当，不存在哪一种风险更高的情况。

问题2：仅通过父元素销毁替换移除元素的情况 #

如果不调用$element.remove()，仅通过销毁父元素并替换的方式（比如原生DOM的removeChild、父元素innerHTML替换等）将$element从DOM中移除，会出现以下情况：

• 原生DOM元素会脱离DOM树，但jQuery内部的事件缓存依然持有该元素与事件处理函数的引用，无法自动清理。
• 方式1泄漏风险更高：箭头函数形成的闭包会一直捕获外部的$element变量，导致$element（及其指向的DOM元素）始终被引用，无法被垃圾回收，明确引发内存泄漏。
• 方式2仍存在泄漏风险：虽然事件处理函数没有捕获外部的$element，但jQuery的事件缓存依然会持有元素与处理函数的引用。不过如果外部的$element没有被其他代码持续持有，部分现代浏览器的垃圾回收机制可能会识别这种循环引用并回收，但相比方式1，泄漏的概率和影响更低。

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