为什么多次点击按钮会触发不同的函数，而不是同一个函数？

从现在开始，我们要努力学习啦！今天我给大家带来《为什么多次点击按钮会触发不同的函数，而不是同一个函数？》，感兴趣的朋友请继续看下去吧！下文中的内容我们主要会涉及到等等知识点，如果在阅读本文过程中有遇到不清楚的地方，欢迎留言呀！我们一起讨论，一起学习！

理解按钮多次点击触发函数的机制

在 html 代码中，我们为三个按钮指定了相同的点击事件处理程序 my_function()：

<button onclick='my_function()'>按钮1</button>
<button onclick='my_function()'>按钮2</button>
<button onclick='my_function()'>按钮3</button>

当点击任何一个按钮时，都会触发 my_function() 函数。然而，如果你观察第二个代码片段中添加了 my_function() 调用的 javascript 部分：

function my_function() {
  var str=document.getElementsByTagName('button')
  for(var i=0;i<str.length;i++) {
    var myfn=function(a) {
      var c=0;
      str[a].onclick=function() {
        c++
        alert("点击次数为："+c)
      }
    }(i)
  }
}

my_function()

你会发现点击按钮后，不会立即执行 my_function() 函数，而是创建了几个匿名的内部函数，并且每个按钮的点击事件都绑定到这些内部函数。具体来说，原因如下：

• 事件冒泡：在 javascript 中，事件会从目标元素向其祖先元素“冒泡”。因此，当一个按钮被点击时，它的 click 事件会冒泡到其父元素 body。
• 事件绑定：当 my_function() 在页面加载时被调用时，它为每个按钮绑定了自定义的处理程序。与直接绑定到 my_function() 不同，自定义处理程序包含一个闭包，该闭包可以访问按钮的索引值 i。这允许每个按钮跟踪它自己的点击次数。

alert(my_function()) 返回 undefined 的原因

当你调用 alert(my_function()) 时，它会弹出 "undefined"，因为 my_function() 函数没有指定任何返回值。因此，当 javascript 引擎评估函数时，返回的是 undefined。

到这里，我们也就讲完了《为什么多次点击按钮会触发不同的函数，而不是同一个函数？》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！