如何在按钮的onclick事件处理程序中定义并编写函数

1. 内联匿名自执行函数写法（和你示例匹配的实现） #

你给出的写法属于直接在onclick属性内写匿名自执行函数，适合逻辑非常简短的场景，无需额外定义全局函数。
注意你给出的示例代码缺少自执行的调用括号，点击时只会返回函数本身不会执行，修正后的可运行代码如下：

<button onclick="(function(){
     console.log('some code here')
 })()">My button</button>

如果需要获取点击事件对象或者当前按钮元素，可以通过参数传入：

<button onclick="(function(e, btn){
     console.log('事件对象：', e)
     console.log('点击的按钮元素：', btn)
})(event, this)">My button</button>

2. 内联调用预定义函数写法 #

如果点击逻辑比较复杂，建议把逻辑抽离为单独的JS函数，HTML中只保留函数调用，可读性和可维护性更好：
首先在JS中定义全局可访问的处理函数：

function handleClick() {
  // 写任意复杂的业务逻辑
  console.log('some code here')
}

在HTML的onclick属性中调用即可：

<button onclick="handleClick()">My button</button>

传参方式和自执行函数一致，支持直接传入event（事件对象）、this（当前按钮元素）等参数：

<button onclick="handleClick(event, this, '自定义参数')">My button</button>

3. 推荐：非侵入式事件绑定写法（结构与逻辑分离） #

更推荐完全在JS中绑定点击事件，不在HTML标签上写任何onclick属性，避免污染HTML结构，也不会产生全局作用域污染问题：
HTML部分只需要给按钮加唯一标识：

<button id="myBtn">My button</button>

JS部分通过addEventListener绑定事件：

// 先获取按钮元素
const myBtn = document.querySelector('#myBtn')
// 绑定点击事件
myBtn.addEventListener('click', function(e) {
  console.log('some code here')
  // e就是点击事件对象，this指向当前按钮元素
})

这种写法的优势：

• 同个按钮可以绑定多个点击事件，不会互相覆盖
• 可以随时移除指定的点击事件监听
• 业务逻辑完全和HTML结构分离，更适合大型项目维护

注意事项 #

• 内联onclick中写的代码默认在全局作用域下执行，局部作用域中定义的函数无法被内联onclick访问到
• 内联逻辑不要超过3行，过长的逻辑会导致HTML可读性极差
• 使用自执行函数时一定要补充末尾的()调用括号，否则函数不会执行

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