addEventListener处理函数添加参数

最新推荐文章于 2025-05-04 06:39:57 发布

源辰_付

最新推荐文章于 2025-05-04 06:39:57 发布

阅读量1.4w

点赞数 10

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.csdn.net/u011724770/article/details/52210930

前端专栏收录该内容

154 篇文章

订阅专栏

本文探讨了JavaScript中事件监听器的问题，解释了为何直接调用函数而非引用会导致错误，并展示了如何正确使用addEventListener来绑定mouseover事件。此外，还介绍了如何通过bind方法为事件处理函数传递参数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

搞定