拜师的第一课 js实现div拖动功能

一段偶合，拜老张为师。

老张说，我带了很多徙弟，没有一个出师的，不管是男的还是女的，老的还是少的 。

我心里想着我会出师的，当然也是我觉得我至少要突破给自己定下的标准。

老张说，javascript比较复杂，记得要坚持。

最后，老张说，我每次教徙弟，第一课作业都是让徙弟实现一个高宽都为100px 的div 的拖动，不能抄网上的。

于是我开始动工了，但我是一头雾水的，只能网上找例子。

在我搞清楚大量函数方法，变量之后，我凭着自己的记忆跟少少理解照班了例子，其实不算是我自己写的吧。

<script type="text/jscript">
var dragger = document.getElementById('drag');
dragger.onmousedown = function(a){
    if(!a)a=window.event;//浏览器事件对象兼容
    var ax = a.layerX?a.layerX:a.offsetX;//如果 bbb.layerX 没有值，就取a.offsetX;的位置
    var ay = a.layerY?a.layerY:a.offsetY;
dragger.onmousemove= function(b){
    if(!b)b=window.event;
    dragger.style.left = b.clientX - ax + 'px';
    dragger.style.top = b.clientY - ay + 'px';
    }
dragger.onmouseup = function(){
 dragger.onmousemove = null;
 }
    }
//onMouseover当鼠标经过的时候，触发 = 后面的脚本函数
//onMouseout 当鼠标离开 。。
//onMouseUP 当鼠标 按下又抬起。。。
//onmousemove 当鼠标移动。。
//onmousedown 当鼠标按下时。。
</script>

 忐忑的发给老张，他竟然说就要这么简单的，然后修改了让我分析出来说会有很大的提高。

onload = function(){
        var d=document,g="getElementById";
        var drag = d[g]("drag");
        var me = this;
        drag.onmousedown = function(event){
                 event = event || me.event;
                 var ax = event.layerX?event.layerX:event.offsetX;
                 var ay = event.layerY?event.layerY:event.offsetY;
                 d.onmousemove = function(event){
                           event = event || me.event;
                           var dx = event.clientX;
                           var dy = event.clientY;
                           drag.style.left = dx - ax + 'px';
                           drag.style.top  = dy - ay + 'px';
                     }
                 d.onmouseup = function(){
                          this.onmousemove = null;
                          this.onmouseup = null;
                     }
            }
    }

解释：

1：其实js 基于window 也就是说大家都是基于window 那好办了 。window 省掉不写了 比如你alert，其实是window.alert 。

2：在一个页面就只一次定义window.onload，多次定义呢 会不会覆盖前面的 ？会  所以可以写一个这样的方法
  var a = window.onload;
      window.onload = funciton(){
           if(typeof a == "function"){a();}

3：函数式编程有一个等值公设，也就是说把标准的变量名，变成一个简短的；

4：|| 是python 语法  aa && bb || cc   如果aa 为真 则执行bb 否则执行cc ，  跟三元运算符不同，?:一定要三个一起；

5：var me = this; this多用于函数内部，它永远指向调用他的那个对象；

6：drag.onmousedown这个事件要包含着里边2个事件呢
    这个事件的作用域，然后鼠标放开后要把事件全放掉 ，这样的话做大项目标就不会有偶合了。

老张问我懂了没，其实我头还是晕晕的，经过一轮知识的轰炸，我要慢慢消化.....

老张后来说，javascript 核心的就是二个链表，作用域链表，和原型链表，在这二个链表的基础上，产生了，闭包，函数式  其实没什么高深的东西 。
我期待着，有一天我回过头来看我学习javascript的过程，也跟其他人说：其实没什么高深的东西！

感谢师傅老张， 加油哇  lilili ~