
理解按钮多次点击触发函数的机制
在 html 代码中,我们为三个按钮指定了相同的点击事件处理程序 my_function():
当点击任何一个按钮时,都会触发 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。
以上就是为什么多次点击按钮会触发不同的函数,而不是同一个函数?的详细内容,更多请关注创想鸟其它相关文章!
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1495081.html
微信扫一扫
支付宝扫一扫