使用JavaScript创建按钮、链接等元素时如何设置onclick属性或事件监听器

方式1：直接生成带内联onclick属性的DOM（完全匹配你预期的<button onClick="functionName">输出效果） #

你已经在用setAttribute方法给元素设id了，用同样的方法设onclick属性即可：

// 接在你现有代码的下方，此时button还是内存中的DOM对象，不需要等它挂载到页面上
button.setAttribute('onclick', 'functionName()')

设置完成后，把这个元素插入页面，查看DOM结构就能看到完全符合预期的输出：

<button id="对应你设置的id值" class="btn btn-sm btn-danger listening_class_for_delete" onclick="functionName()">
  你之前append的删除文本节点
</button>

注意点：

• 这种内联属性的写法，传入的字符串会被当作全局作用域的代码执行，你定义的functionName必须在全局能被访问到，否则点击按钮时会抛出“函数未定义”的错误
• 这种写法容易被站点的内容安全策略（CSP）拦截，而且会把交互逻辑硬编码到DOM结构里，长期维护成本高，仅在明确需要生成带内联事件的DOM时使用

方式2：标准事件绑定（项目开发更推荐的写法） #

不需要在DOM节点上暴露onclick属性，直接通过事件监听器绑定逻辑即可，作用域更安全，维护性更好：

// 同样接在你现有代码下方
button.addEventListener('click', functionName)

如果需要在点击时拿到当前按钮的id、或者传递自定义参数，可以直接在回调里处理，甚至不需要再通过id查询DOM：

button.addEventListener('click', (e) => {
  // e.currentTarget 就是当前被点击的按钮对象，直接读取它的id即可
  const currentId = e.currentTarget.id
  // 调用你的目标函数，还可以把参数传进去
  functionName(currentId)
})

两种方式的核心区别 #

• 内联onclick属性的写法，同一元素上的同类型事件会互相覆盖，后续修改逻辑需要直接操作DOM属性
• addEventListener绑定的事件，同一元素可以挂多个同类型的点击回调，不会互相覆盖，所有交互逻辑都集中在JS代码里管理，调试和维护更方便

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