代码如下
copy var aDiv=oDiv.getElementsByTagName("div"); for(var i=0;i<aDiv.length;i++){ aDiv[i].addEventListener("mouseover",change(),false); }
问我为什么mouseover事件都没有触发,为什么直接执行了函数。我当时也蒙了一下,但是后来突然发现,addEventListener中的处理函数只需要放一个函数名就行了,这样写就以为这执行这个函数,因此,改写代码:
copy function change(obj){ obj.style.transform="scale(0)"; } var aDiv=oDiv.getElementsByTagName("div"); for(var i=0;i<aDiv.length;i++){ aDiv[i].addEventListener("mouseover",change,false); }
但是现在问题又来了,我们需要一个参数,而一个函数名是没办法穿参数的,所以这个时候就要用到bind方法
在EcmaScript5中扩展了叫bind的方法(IE6,7,8不支持),可以绑定参数。bind可接受的参数都分为两部分,且第一个参数都是作为执行时函数上下文中的this的对象。 再次改写:
copy var aDiv=oDiv.getElementsByTagName("div"); for(var i=0;i<aDiv.length;i++){ aDiv[i].addEventListener("mouseover",change.bind(aDiv[i],aDiv[i]),false); } function change(obj){ obj.style.transform="scale(0)"; }
搞定
|