欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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参数就是这么被赋值的


相关标签: 回调