jQuery转Pure JavaScript报错：on不是函数，求解决方案

你遇到的报错核心原因是原生DOM元素没有jQuery的.on()方法，同时代码里还有几处jQuery与原生JS API的混淆点，下面是具体修正方案：

关键错误拆解 #

• 原生DOM元素绑定事件需使用addEventListener()，而非jQuery的.on()方法
• 点击回调函数中的this直接指向触发点击的按钮元素，无需再用document.querySelector(this)（这会错误地把DOM元素当作选择器字符串传入）
• 原生JS切换元素类名要调用classList.toggle()，不是jQuery的.toggleClass()

修正后的完整代码 #

document.addEventListener("DOMContentLoaded", function() {
    // 提前缓存DOM节点，避免重复查询提升性能
    const toggleBtn = document.querySelector(".js-all-btn");
    const contentBlock = document.querySelector(".js-all-content");

    toggleBtn.addEventListener("click", function() {
        this.classList.toggle("active");
        contentBlock.classList.toggle("a-block");
    });
});

补充优化说明 #

• 提前缓存DOM节点减少了重复的DOM查询操作，提升了代码运行效率
• 移除了原代码中多余的this参数（原生addEventListener不需要该参数，属于jQuery用法残留）

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