今天写JS的时候遇到这么一个问题:
function init() {
var btn = document.getElementById('sort-btn');
btn.onclick = btnHandle();
}
上面是我的JS代码部分,这里注意一下,init函数中的第二句,btn.onclick = btnHandle();
我的本意是点击按钮,执行btnHandle函数,可实际情况是刷新页面之后,btnHandle函数直接执行了。
然后我把代码改成这样
function init() {
var btn = document.getElementById('sort-btn');
btn.onclick = btnHandle;
}
把btn.onclick = btnHandle();语句中的()去掉后,代码按我所想的正常运行。
这是为什么?btnHandle 和 btnHandle()
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
btn.onclick
接受一个函数,代表当 btn 被点击的时候执行这个函数,而你的btnHandle()
代表了执行这个函数,给btn.onclick
的是他的返回值,当然就先执行了。下面的写法就代表着,当
btn.onclick
时,执行btnHandle
函数。btn.onclick = btnHandle();这句代码的意思是把执行结果赋值给点击事件哦
说明你刷新页面就会执行init函数,而init函数执行后,在绑定onclick时
这行代码 btn.onclick = btnHandle();
相当于执行btnHandle方法然后把方法的返回值赋值给了btn.onclick。
而btn.onclick = btnHandle;
相当于btn.onclick = function(){xxxxx};
也就是说把btnHandle这个变量的引用赋给了btn.onclick
所以当点击事件触发时会执行btnHandle代表的函数方法