js的回调函数
程序员文章站
2022-06-07 10:18:03
...
转自:http://www.jb51.net/article/59447.htm
回调:函数a有一个参数,这个参数是个函数b,当函数a执行完以后执行函数b。那么这个过程就叫回调。
不带参:
function a(callback){
alert('a');
callback.call(this);//或者是 callback(), callback.apply(this),看个人喜好
}
function b(){
alert('b');
}
//调用
a(b);
//先弹出 'a',再弹出‘b'。
带参:
function c(callback){
alert('c');
callback.call(this,'d');
}
//调用
c(function(e){
alert(e);
});
这里e参数被赋值为'd',我们只是简单的赋值为字符窜,其实也可以赋值为对象。Jquery里面也有个e参数。
$("#id").bind('click',function(e){
//e.pageX ,e.pageY ,e.target.....各种数据
});
这个e参数的赋值也是通过回调函数来实现的,这个参数是用回调参数给它赋予了一个对象值。还有Ajax里面 $.get('',{},function(data){}) data这个参数也是同样的原理。
Jquery事件对象里面是怎么应用回调函数的
<div id="container" style="width:200px;height:200px;background-Color:green;">
</div>
<script>
var _$=function (id)
{
this.element= document.getElementById(id);
}
_$.prototype={
bind:function(evt,callback)
{
var that=this;
if(document.addEventListener)
{
this.element.addEventListener(evt, function(e){
callback.call(this,that.standadize(e));
} ,false);
}
else if(document.attachEvent)
{
this.element.attachEvent('on'+evt,function(e){
callback.call(this,that.standadize(e));
});
}
else
this.element['on'+evt]=function(e){
callback.call(this,that.standadize(e));
};
},
standadize:function(e){
var evt=e||window.event;
var pageX,pageY,layerX,layerY;
//pageX 横坐标 pageY纵坐标 layerX点击处位于元素的横坐标 layerY点击处位于元素的纵坐标
if(evt.pageX)
{
pageX=evt.pageX;
pageY=evt.pageY;
}
else
{
pageX=document.body.scrollLeft+evt.clientX-document.body.clientLeft;
pageY=document.body.scrollTop+evt.clientY-document.body.clientLTop;
}
if(evt.layerX)
{
layerX=evt.layerX;
layerY=evt.layerY;
}
else
{
layerX=evt.offsetX;
layerXY=evt.offsetY;
}
return {
pageX:pageX,
pageY:pageY,
layerX:layerX,
layerY:layerY
}
}
}
window.$=function(id)
{
return new _$(id);
}
$('container').bind('click',function(e){
alert(e.pageX);
});
$('container1').bind('click',function(e){
alert(e.pageX);
});
</script>
这段代码我们主要看standadize函数的实现,兼容性的代码,就不多说了,返回的是一个对象
return {
pageX:pageX,
pageY:pageY,
layerX:layerX,
layerY:layerY
}
然后再看bind函数里面的代码 callback.call(this,that.standadize(e)),这段代码其实就是给e参数赋值了,是用callback回调实现的。
callback 函数被调用的时候传入的是匿名函数
function(e){
}
而callback.call(this,that.standadize(e))相当于是执行了这么一段代码 (function(e){
})(standadize(e))
这也是Jquery用回调函数比较经典的地方,e参数就是这么被赋值的