为何onclick等DOM事件调用all()函数无效，addEventListener却正常？

我之前碰到过一模一样的问题！这坑藏得挺深的，其实是函数名all和浏览器全局对象（window）上的一个非标准内置属性冲突了。

问题根源 #

浏览器为了兼容早期的非标准API，保留了window.all这个属性——它是一个用来获取文档中所有元素的类数组对象（HTMLAllCollection），而且这个属性是不可写、不可配置的。也就是说，你在全局作用域定义的function all()根本没办法覆盖它。

当你用onclick="all()"时，这个字符串代码会在全局作用域里执行，所以它调用的是浏览器内置的window.all，而不是你写的函数。但window.all是一个对象，不是可调用的函数，所以要么控制台会悄悄抛出TypeError: all is not a function（你可能没注意到），要么直接静默失败，看起来就像“完全无响应”。

而用addEventListener的时候，你是直接把自己定义的函数引用传递给了事件监听，绕过了全局作用域的查找逻辑，所以自然能正常触发。

解决方案 #

有两种简单的处理方式：

• 最推荐：重命名函数：把all()改成比如handleButtonClick()这类不会冲突的名字，从根源上避免问题。
• 如果你非要用all这个名字：放弃onclick内联写法，坚持用addEventListener，因为它直接绑定你定义的函数，不会受全局属性的干扰。

修改后的示例代码 #

重命名函数版本

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button id="myBtn" onclick="handleButtonClick()">Click Me</button>
<script>
function handleButtonClick() {
  console.log('all clicked');
}
</script>
</body>
</html>

保留函数名用addEventListener版本

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button id="myBtn">Click Me</button>
<script>
document.querySelector('#myBtn').addEventListener('click', all);
function all() {
  console.log('all clicked');
}
</script>
</body>
</html>

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