拜师的第一课 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 ~