今天在学习JS动画做一个简单的Demo时遇到一个问题
直接写成
btn.onclick = alert('123');
则会直接弹出一个提示框,这又是什么原因呢?
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。
js初学者往往容易混淆函数申明(定义)和函数执行
创造一个函数
function foo(){}
或者
var foo = function(){}
这是最基本的两种方法。
函数执行就是在这个函数后面加一个(),如果需要传参数,就是(a,b,c...)
现在,回到问题上。onmouseover如果是一个函数,那么在鼠标移上去的时候,会触发这个函数;否则,没有任何效果。aLi[i].onmouseover = starMove(this,400),这行代码,先执行starMove(this,400),然后将其返回值赋给aLi[i].onmouseover。因为starMove(this,400)返回值不是一个函数,所以没有任何效果。
至于函数是否需要名称,这个可有可无。但是,匿名函数没法重用。所以,如果不是一次性使用,我建议具名。代码稍作调整
// 这样做的好处是,可以把确定的参数提前传进去
aLi[i].onmouseover = starMove.bind(aLi[i],400)
function starMove(iTarget){
var obj = this;
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var speed = (iTarget-obj.offsetWidth)/8;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(obj.offsetWidth==iTarget){
clearInterval(obj.timer);
}
else{
obj.style.width=obj.offsetWidth+speed+'px';
}
},30);
}