最简写法是内联 onclick="console.log('按钮被点了')"，适合调试；正式项目应使用 addEventListener 分离结构与行为，注意 DOM 加载时机和避免重复绑定。

点击按钮触发 console.log 的最简写法

直接在按钮上用 onclick 内联事件是最快验证的方式，适合调试或临时需求：

<button onclick="console.log('按钮被点了')">点我</button>

注意：引号要匹配，外层用双引号，内部字符串用单引号（反之亦可），否则 HTML 解析会出错。这种写法不推荐用于正式项目，但对快速确认交互是否生效非常高效。

用 addEventListener 绑定更可控的点击行为

这是现代标准做法，把 HTML 结构和 JS 行为分离，方便维护和复用：

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

<button id="logBtn">输出信息</button>

document.getElementById('logBtn').addEventListener('click', () => {<br>  console.log('这是来自 addEventListener 的输出');<br>});

常见错误现象：Uncaught TypeError: Cannot read property 'addEventListener' of null——说明 JS 执行时 DOM 还没加载完。解决办法是把脚本放在

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！