JavaScript中函数调用带括号与不带括号的区别

问题发现原因

在测试单击绑定事件中,发现打开页面没有单击就自动执行了js代码,且后续无论怎么单击都不会再次执行函数化,代码如下

 <body>
<img src="img/on.gif" onclick=alert("被单击了");>
<img src="img/on.gif" id="p">
<script>
    //通过标签对象绑定事件,并指定事件的属性值
    var a = document.getElementById("p");
    function f(){
        alert("gogogo");
    }
    a.onclick=f();
</script>

当打开页面时没有点击对应图片的情况下,会自动的执行函数f,弹出“gogogo”
当代码改变为

a.onclick=f;

可以正常实现单击出现“gogogo”的功能。

原因分析

  1. 当为a.onclick=f();情况时实际上是进行一个赋值的操作,进行事件绑定时f()就表示已经调用了该函数,并将返回值与单击事件进行了绑定,而函数并无返回值所以此处赋值为undefined所以后续无论怎么单击都不会弹出“gogogo” 验证如下
a.onclick=f();
//就相当于 a.οnclick=undefined
    document.write(typeof(a.onclick=f()) );
    

对a.onclick的类型进行判断打印结果为undefined类型,无论怎么单击都是undefined不会执行任何的操作
在这里插入图片描述
2.当为a.onclick=f这种情况时,是将函数对象f与单击事件进行了绑定(个人也理解为将函数对象赋值给了单击事件),每次单击时会正常执行该函数,验证如下

a.onclick=f;

    document.write(typeof(a.onclick=f) );

对a.onclick的类型判断为function对象,所以每次单击都会正常执行
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/lvyangxue/article/details/107143988