jQuery click方法已废弃，应使用何种替代方案？

我正在重构2013年为客户开发的网站，加载jQuery时PHPStorm提示click方法已废弃，需使用更优替代方案，请问应选用什么方案？以下是我的代码：

let displayUnits = false;
$(function() {
    $('.initial').slideDown(1000);
    $('#units').click(function() {
        if (!displayUnits) {
            $('.sUnit').fadeIn(1000);
            $("#units").html('Hide Storage Units');
            displayUnits = true;
        } else if (displayUnits) {
            $('.sUnit').fadeOut(1000);
            $("#units").html('Display Storage Units');
            displayUnits = false;
        }
    });
    $('.contact').click(function() {
        $('.sUnit').fadeOut(600);
        $('.initial').slideUp(1500, function() {
            // Call generic function after buttons "slideUp"
            $(location).attr('href', '../contact/');
        });
    });
});

其实jQuery的.click()并没有被真正移除，PHPStorm提示它“废弃”，是因为官方更推荐使用**.on('click', handler)**这种标准事件绑定写法。它是.click()的底层实现（.click()本质就是.on('click')的语法糖），但.on()的写法更灵活：

• 统一了所有事件类型的绑定语法（不管是click、mouseover还是自定义事件，都用同一种写法）
• 支持事件委托（如果后续页面有动态生成的元素，只需要调整选择器就能实现绑定，不用重复写逻辑）
• 更便于后续的事件解绑操作（用.off('click')对应处理）

下面是修改后的代码，功能和你原来的完全一致，但能消除IDE警告，同时符合现代jQuery最佳实践：

let displayUnits = false;
$(function() {
    $('.initial').slideDown(1000);
    // 替换.click()为.on('click')
    $('#units').on('click', function() {
        if (!displayUnits) {
            $('.sUnit').fadeIn(1000);
            $("#units").html('Hide Storage Units');
            displayUnits = true;
        } else if (displayUnits) {
            $('.sUnit').fadeOut(1000);
            $("#units").html('Display Storage Units');
            displayUnits = false;
        }
    });
    // 同样替换.contact的click事件绑定
    $('.contact').on('click', function() {
        $('.sUnit').fadeOut(600);
        $('.initial').slideUp(1500, function() {
            // Call generic function after buttons "slideUp"
            $(location).attr('href', '../contact/');
        });
    });
});

另外补充一点：如果你的项目后续考虑逐步移除jQuery，也可以直接用原生JavaScript的addEventListener来绑定点击事件，比如：

document.getElementById('units').addEventListener('click', function() {
    // 逻辑和之前一致
});

不过如果暂时还需要保留jQuery，用.on('click')是最平滑的过渡方案。

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