使用setAttribute添加onclick函数无效，求原因及解决办法

这是个很常见的小问题，我来帮你拆解下原因和解决办法：

核心原因分析 #

• setAttribute绑定内联事件的局限性：HTML属性（比如onclick）和DOM元素的事件属性（element.onclick）是两个不同的概念。用setAttribute设置onclick时，浏览器不一定会把字符串转换成有效的事件处理器函数，在部分浏览器或严格模式下容易失效。
• Select元素的交互特性：如果你的需求是响应用户选择选项的操作，click其实不是最合适的事件——用户点击下拉框展开选项时会触发click，但真正选择选项时触发的是change事件。如果你的逻辑是要在用户选值时执行，那click可能根本不是你需要监听的目标事件。

修复方案 #

方案1：直接赋值DOM事件属性（简单直接） #

替换setAttribute的写法，直接给DOM元素的onclick属性赋值一个函数：

function activatetypeinput(event, devtype){
  var dev_input = document.getElementById("device_input");
  // 直接绑定事件函数，而非通过属性字符串
  dev_input.onclick = function(e) {
    add_device_input(e, this);
  };
}

方案2：使用addEventListener（推荐，兼容性更好） #

这是现代JavaScript绑定事件的标准方式，还能避免覆盖元素上已有的其他事件监听：

function activatetypeinput(event, devtype){
  var dev_input = document.getElementById("device_input");
  // 注册click事件监听
  dev_input.addEventListener('click', function(e) {
    add_device_input(e, this);
  });
}

方案3：如果需要监听选项选择（换用change事件） #

如果你的实际需求是用户选择选项时触发add_device_input，那么应该监听change事件而非click：

function activatetypeinput(event, devtype){
  var dev_input = document.getElementById("device_input");
  dev_input.addEventListener('change', function(e) {
    add_device_input(e, this);
  });
}

额外提醒 #

如果你之前已经给device_input绑定过事件，用onclick = ...会覆盖原有事件，而addEventListener可以叠加多个事件监听，所以更推荐后者。

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