JS - 回调函数【实例】_js之间的回调函数‘实例’-CSDN博客

本文链接：https://blog.csdn.net/TheKittenFishing/article/details/78976749

本文深入探讨了JavaScript中的回调函数，通过实例展示了如何在clickMe函数中传递回调，并利用返回的boxDom对象进行操作，揭示了函数作为数据类型在参数传递中的应用。

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

<div id="box1" onclick="clickMe()">1</div>
<div id="box2">2</div>
<div id="box3">3</div

添加点击事件：

//方法一：
function clickMe(){
	var boxDom = document.getElementById("box1");
	boxDom.style.background = "red";
}

//方法二：动态绑定
window.onload = function(){
	var boxDom = document.getElementById("box2");
	boxDom.onclick = function(){
		this.style.background = "red";
	};
	var boxDom = document.getElementById("box3");
	boxDom.onclick = function(){
		this.style.background = "red";
	};

//方法三：封装
function clickMe(id,value){
	var boxDom = document.getElementById(id);
	boxDom.onclick = function(){
		this.style.background = value;
	}
};
clickMe("box1","red");
clickMe("box2","red");
clickMe("box3","red");

回掉函数：调用函数时，将function当作一种数据类型，作为参数传给函数 clickMe(id,callback)，然后将boxDom对象返回出去；

//方法四：
function clickMe(id,callback){
	var boxDom = document.getElementById(id);
	boxDom.onclick = function(){
		callback(this);
	}
};
clickMe("box1",function(obj){
	obj.style.width = "120px";
	obj.style.height = "120px";
	obj.style.background = "red";
	obj.style.border = "4px solid #111";
});
clickMe("box2",function(obj){
	window.location.href = "http://www.baidu.com";
});
clickMe("box3",function(obj){
	window.location.href = "http://www.baidu.com";
});