JS绑定onclick不显示于HTML但生效，HTML添加onclick显示却失效问题

嘿，我来帮你理清这个事件绑定的疑惑～

为什么两种绑定方式表现不同？ #

这里核心要区分**DOM属性（Property）和HTML特性（Attribute）**的差异，以及事件绑定的作用域问题：

1. JavaScript DOM属性绑定（生效但不显示在HTML） #

你用button.onclick = toggleNav这种方式，是直接给DOM元素的JS对象属性赋值。这种绑定是在JS引擎层面完成的，不会同步更新到HTML标签的特性上，所以你在浏览器开发者工具的HTML结构里看不到onclick属性，但实际上事件已经牢牢绑定在元素上了，触发点击自然能执行函数。

而且这种方式的函数作用域是当前JS上下文，只要toggleNav在绑定的时候能被访问到，就可以正常工作。另外注意你提供的JS代码里，第一行button.onclick=toggleNav;其实会报错（此时button还未声明），不过后面创建button后再绑定的代码是有效的。

2. HTML特性绑定（显示在HTML但不生效） #

当你在HTML里写<input onclick="toggleNav()">时，这个onclick是HTML标签的特性，它对应的函数必须在**全局作用域（window对象）**中能被找到。如果你的toggleNav函数是定义在局部作用域里的（比如DOMContentLoaded回调、立即执行函数IIFE内部），那HTML里的事件特性就找不到这个函数，自然触发不了。

解决HTML绑定不生效的方法 #

方法一：把函数暴露到全局作用域 #

修改你的函数定义，把它挂载到window对象上：

window.toggleNav = function() {
  $("nav").toggle("slow");
}

这样HTML里的onclick="toggleNav()"就能找到全局的函数了。

方法二：推荐用JS的addEventListener绑定事件 #

比起HTML特性绑定，用JS的事件监听更灵活（支持绑定多个同类型事件），也能避免作用域问题。比如你有一个通过HTML创建的按钮：

<input type="button" value="HTML Btn" id="htmlBtn">

然后用JS绑定：

document.getElementById('htmlBtn').addEventListener('click', toggleNav);

这种方式和你用button.onclick = toggleNav类似，不会显示在HTML结构里，但能稳定生效。

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