自动执行onclick事件

老师你好，这是在另一个同学下面的回答，自动执行点击事件，为什么创建一个属性叫“onclick”，调用属性的时候用的是.click()呢？

这个和直接写btn.onclick();自动执行是一样的吗？

源自：JS函数深入讲解 5-6 编程练习

收起

2回答

好帮手慕粉回答被采纳获得+3积分 2020-01-06 14:09:26

同学你好，因为同学调用了btn.onclick()事件，所以即便不点击按钮，点击事件也会执行。把调用函数去掉就可以了：

如果我的回答帮助到了你，欢迎采纳，祝学习愉快~

花生香又脆提问者 #1

2、这个跟onclick是不同的，如果只写btn.onclick()，那么是在点击按钮的时候才会触发，而第1个是不用点击按钮页面加载好就触发。不是说点击了才会触发吗？那这个和设置一个onclick属性，调用的时候用btn.click() 作用是一样的吧？

2020-01-06 14:32:23
好帮手慕粉回复提问者花生香又脆 #2

同学你好，很抱歉第一次没有解释清楚给同学造成了误解。老师的意思是如果直接给btn绑定点击事件，不进行调用，就是在点击按钮的时候才会触发。即：btn.onclick=function(){}。如果我的回答帮助到了你，欢迎采纳，祝学习愉快~

2020-01-06 14:46:30

好帮手慕粉 2019-12-31 10:53:34

同学你好，关于同学的问题解答如下：

1、这个是固定用法，设置一个onclick属性，调用的时候用的是btn.click()，可以自动执行点击事件，同学记住就好。

2、这个跟onclick是不同的，如果只写btn.onclick，那么是在点击按钮的时候才会触发，而第1个是不用点击按钮页面加载好就触发。

3、这个同学了解一下即可，基本用不到自动执行点击事件。

如果我的回答帮助到了你，欢迎采纳，祝学习愉快~

提问者花生香又脆 #1

老师你好，代码如下，我使用btn.onclick()就自动执行了是什么原因？ <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <title>方法的调用</title> <style type="text/css"> #box{position: relative; width: 100px; height: 100px; background-color: red; margin: 10px auto;} #close{position: absolute; right: 0px; top: -4px; color: yellow;} #btn{display: block; width: 100px; margin: 0 auto;} </style> </head> <body> <div id="box"> <span id="close">X</span> </div> <button id="btn">关闭</button> <script type="text/javascript"> // 在此处补充代码 var btn=document.getElementById("btn"); var close=document.getElementById("close"); var box=document.getElementById("box"); btn.onclick=function(){ box.style.display="none"; } btn.onmouseover=function(){ this.style.cursor="pointer"; } btn.onclick(); close.onclick=btn.onclick; close.onmouseover=btn.onmouseover; </script> </body> </html>

2020-01-06 13:28:54