HTML中没有toggle事件，它不是原生DOM事件；所有toggle行为均通过click事件配合状态变量（如布尔值）、dataset、class或disabled属性手动实现。
HTML里没有toggle事件
直接说结论：toggle 不是原生 HTML 或 DOM 标准事件，浏览器不会触发它。你看到的“toggle”行为，基本都是用 click 事件 + 状态变量（比如布尔值）手动模拟的。
用click事件配合dataset或class控制按钮状态
最常见、也最稳妥的做法是监听 click，然后切换按钮的 disabled 属性、textContent 或自定义 data- 属性。关键不是“监听toggle”，而是“自己管理开关状态”。
示例：点击切换按钮文字和禁用状态
<button id="myBtn">启用</button>
<script>
const btn = document.getElementById('myBtn');
let isEnabled = true;
btn.addEventListener('click', () => {
isEnabled = !isEnabled;
btn.textContent = isEnabled ? '启用' : '已禁用';
btn.disabled = !isEnabled;
btn.dataset.enabled = isEnabled;
});
</script>
-
dataset.enabled是可选的，方便后续 CSS 或其他逻辑读取状态（如button[data-enabled="false"] { opacity: 0.6; }） - 别直接靠
btn.hasAttribute('disabled')判断状态——因为移除disabled属性后，hasAttribute返回false，但属性存在时 DOM 属性btn.disabled才是true，二者语义不同 - 如果按钮要响应键盘操作（空格/回车），记得加
tabindex="0"并监听keydown，否则只靠click会忽略可访问性
用CSS class + :is() 或 :where() 实现样式级toggle
如果你只是想视觉上“切换样式”，不涉及逻辑状态，用 class 更轻量，也避免 JS 状态和 DOM 不一致的问题。
示例：通过 active 类控制背景和文字
<button class="toggle-btn">开</button>
<style>
.toggle-btn { background: #ddd; }
.toggle-btn.active { background: #007bff; color: white; }
.toggle-btn.active::after { content: "关"; }
.toggle-btn:not(.active)::after { content: "开"; }
</style><script>
document.querySelector('.toggle-btn').addEventListener('click', e => {
e.target.classList.toggle('active');
});
</script>
-
classList.toggle()是原生方法，比手动add/remove更简洁，且自动处理存在性判断 - 避免在
::before/::after中写复杂逻辑，纯文本切换没问题；如果要动态插入 HTML，得用 JS 操作innerHTML - 注意
toggle()不会触发重排，性能友好，但 class 名必须提前定义好，不能运行时拼接
Web Components里可以封装toggle逻辑，但底层仍是click
如果你在用自定义元素（比如 click 封装成 toggle() 方法，但对外暴露的依然是标准事件流。
示例：
class ToggleButton extends HTMLButtonElement {
constructor() {
super();
this._on = false;
}
get on() { return this._on; }
set on(value) {
this._on = Boolean(value);
this.setAttribute('data-on', this._on);
}
toggle() {
this.on = !this.on;
}
}
customElements.define('toggle-button', ToggleButton, { extends: 'button' });
// 使用
<button is="toggle-button" onclick="this.toggle()"></button>
- 即便封装了
toggle()方法，事件监听仍得靠click或onclick触发它 - 不要试图在自定义元素里 dispatch
new Event('toggle')并期望全局能监听到——这不是标准，没人会监听这个 - 若需通知外部状态变化，推荐用
dispatchEvent(new CustomEvent('change', { detail: { on: this.on } }))
实际项目里最容易被忽略的点：**状态同步**。JS 改了 disabled，但没同步更新 aria-pressed 或 aria-checked，屏幕阅读器就无法正确播报；或者用了 classList.toggle()，但忘了在 CSS 里给 .active 加 transition，导致视觉跳变。这些细节比“怎么写toggle”更影响可用性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
