DOM事件会在内存中创建新函数还是仅存引用？多按钮绑定同事件疑问

核心结论 #

你代码里的两个按钮，最终都会指向同一个全局的onClick函数实例，不会在内存里创建两个独立的函数对象。

原因解释 #

HTML中onclick="onClick(event)"这种写法，本质是告诉浏览器：当按钮被点击时，执行这段字符串里的代码——也就是去全局作用域找到名为onClick的函数并调用它。整个过程中，并没有为每个按钮单独定义新的函数，只是重复引用了已经存在的同一个全局函数。

如何验证是否为同一函数对象 #

可以通过以下两种方式直接验证：

1. 直接比较函数引用
   先定义全局的onClick函数：

   function onClick(event) {
     console.log('点击了按钮：', event.target.id);
   }
   

   然后获取两个按钮，比较它们的事件处理函数引用：

   const btnOne = document.getElementById('playerOne');
   const btnTwo = document.getElementById('playerTwo');
   
   // 输出true，说明两个引用指向同一个函数
   console.log(btnOne.onclick === btnTwo.onclick);
   

2. 给函数添加自定义标识
   给全局的onClick函数加一个唯一的自定义属性，再检查两个按钮的事件处理函数是否拥有这个属性：

   onClick.uniqueMarker = 'player-click-handler';
   
   console.log(btnOne.onclick.uniqueMarker === btnTwo.onclick.uniqueMarker); // 输出true
   

额外提醒 #

如果是用内联匿名函数的写法（比如onclick="function(){console.log('click')}"），那每个按钮都会创建独立的函数实例，此时btn1.onclick === btn2.onclick会返回false。但你的代码是调用预定义的全局函数，不属于这种情况。

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