登录
首页 >  文章 >  前端

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

时间:2024-12-14 16:55:06 173浏览 收藏

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

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

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

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



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

function my_function() {
  var str=document.getElementsByTagName('button')
  for(var i=0;i

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

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

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

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

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

相关阅读
更多>
最新阅读
更多>
课程推荐
更多>