JavaScript中给button标签添加onClick事件写法不生效如何解决

• 大小写错误：DOM元素的事件属性是全小写的onclick，JavaScript操作DOM对象时大小写敏感，你写的驼峰式onClick只是给元素新增了一个无关的自定义属性，根本不是事件绑定属性，自然不会触发。HTML标签里写onClick能生效是因为HTML属性默认不区分大小写，和JS直接操作DOM的规则不一样。
• 错误地立即执行了目标函数：你写的testUp()会在代码执行到这一行时立刻调用testUp函数，把函数的返回值赋值给属性，而不是把函数本身作为点击时触发的回调传入，点击发生时根本没有可执行的回调逻辑。

  注意：HTML行内写onClick="testUp()"能生效，是因为行内事件的属性值是字符串类型，浏览器会把这段字符串包装成匿名函数，在点击触发时才执行，和JS中直接赋值事件属性的逻辑完全不同，不能直接照搬写法。

1. 直接赋值onclick属性（最简单的写法） #

注意属性名全小写，赋值时传函数本身，不要加括号调用：

var upB = document.createElement('button');
upB.classList.add("up_btn");
upB.innerText = "Up";
// 无参数直接传函数引用
upB.onclick = testUp;

// 如果需要给testUp传参数，包一层匿名函数即可
upB.onclick = function() {
  testUp(自定义参数1, 自定义参数2)
}
// 也可以用箭头函数简写
upB.onclick = () => testUp(自定义参数1, 自定义参数2)

这种写法的缺点是同一个元素的onclick只能绑定一个回调，后绑定的会覆盖之前的。

2. 使用addEventListener标准事件监听（推荐写法） #

这种方式支持给同一个元素绑定多个点击事件，不会互相覆盖，是实际开发中更常用的方案：

var upB = document.createElement('button');
upB.classList.add("up_btn");
upB.innerText = "Up";
// 基础绑定：第一个参数是事件名（不带on前缀），第二个是回调函数，第三个一般传false
upB.addEventListener('click', testUp, false);

// 传参数写法同样包一层函数
upB.addEventListener('click', function() {
  testUp(自定义参数1, 自定义参数2)
}, false);

如果后续需要移除绑定的事件，用removeEventListener即可，注意要传入和绑定时完全相同的函数引用才能移除成功。

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