addEventListener处理函数添加参数

本文主要是介绍addEventListener处理函数添加参数，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

事情的起因是因为被一个学生问到的，代码如下

var aDiv=oDiv.getElementsByTagName("div");for(var i=0;i<aDiv.length;i++){aDiv[i].addEventListener("mouseover",change(),false);}

问我为什么mouseover事件都没有触发，为什么直接执行了函数。我当时也蒙了一下，但是后来突然发现，addEventListener中的处理函数只需要放一个函数名就行了，这样写就以为这执行这个函数，因此，改写代码：

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的对象。

再次改写：

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)";}

搞定

这篇关于addEventListener处理函数添加参数的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---