问题发现原因
在测试单击绑定事件中,发现打开页面没有单击就自动执行了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”的功能。
原因分析
- 当为
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对象,所以每次单击都会正常执行