网页制作前台之javascript

    2.210 变量的命名
    这是个非常重要的东西，我不得不把这段话编号为 2.210 就是为了提醒刚入门的菜鸟 － 用一个自己能明白的名字去命名你的变量。如果你要以此为生，最好也要让你的变量名能被别人看懂。

    2.211 绑定事件 － 回字的四种写法
    a) 直接在HTML元素标记中写入： onmousedown="divBlock_event_mousedown();"
    b) 将事件函数的句柄赋值给相应的事件：document.onmousemove=document_event_mousemove; （注意赋值的函数名后面并没有括号）
    c) 使用 attachEvent 方法（对于FF类的浏览器来说是 addEventListener）
    ps：解除事件的绑定也有相应方式，就不罗嗦了

    2.212 不要被那个 I_do_not_care=... 什么的迷惑，那个是三元表达式，如果你有认真学习 JS语法的话。那样写的目的是兼容。

    2.213 在函数体的最前面就声明需要用到的变量是个好习惯，它可以避免你犯很多莫名其妙的错误 － 比如递归的死循环之类的。当然，如果你压根不喜欢这个变量（就像俺那个 I_do_not_care 一样），那么就随它去吧。

    2.214 e=window.event?window.event:e; 也是为了兼容。其实这句只是获得 event 对象而已。用 e.clientX 而不用 e.x 也是兼容问题。obj.firstChild.nodeValue 而不是 obj.innerText 同理。<div>I am a div.</div>而不是 <div></div>也是同理。 － 兼容真是个tnnd 问题。

    2.215 如果你发现自己还是有些糊涂，回去复习 0.1 和 0.2 节中提到的事件部分

    2.22 拖动方块

运行代码框
<div style="width:140px; height:140px; background-color:pink; cursor:pointer;" id="divBlock" onmousedown="divBlock_event_mousedown(arguments[0]);"></div>
<script>
function divBlock_event_mousedown(e){
 var e, obj, temp;
  obj=document.getElementById("divBlock");
  e=window.event?window.event:e;
  obj.startX=e.clientX-obj.offsetLeft;
  obj.startY=e.clientY-obj.offsetTop;
 
  document.onmousemove=document_event_mousemove;
  temp=document.attachEvent?document.attachEvent("onmouseup",document_event_mouseup):document.addEventListener("mouseup",document_event_mouseup,"");
}

function document_event_mousemove(e){
  var e, obj;
  obj=document.getElementById("divBlock");
  e=window.event?window.event:e;
 
  with(obj.style){
   position="absolute";
   left=e.clientX-obj.startX+"px";
   top=e.clientY-obj.startY+"px";
  }
}

function document_event_mouseup(e){
 var temp;
 document.onmousemove="";
 temp=document.detachEvent?document.detachEvent("onmouseup",document_event_mouseup):document.removeEventListener("mouseup",document_event_mouseup,"");
}
</script>

    2.221 编程是件脑力活动，呵呵。首先要先琢磨出来，拖动意味着什么。其实拖动就是判断鼠标位置，然后改变你需要拖动的元素的坐标而已。那么分成两步：判断鼠标位置，改变元素的坐标。这个看起来也不难。前一点 2.21 刚讨论过。后一点，如果你对 JS 操作 CSS 有所了解的话也是轻而易举（不明白的回头去看0.3节）。

    2.222 现在俺详细描述下这个过程：
    a) 鼠标按下时，判断鼠标的位置。将鼠标坐标和元素坐标的差存在元素的 startX 和 startY 两个自定义的属性里。绑定鼠标移动事件。
    b) 鼠标移动时，判断鼠标的位置。将鼠标坐标和 startX / startY 的差值作为新的元素坐标。（你问我为啥这样算？帅哥请回去重修高中数学，呵呵）
    c) 鼠标按键抬起，清除鼠标移动事件的相应。（不然你放开了鼠标方块还是跟着你跑）

    2.223 为啥用 document 的事件绑定而不是把事件绑定在 div上面？问的好（你不会没想到这个问题吧？...）如果你试着将事件绑定在div上，你会发现随着鼠标的快速移动，很容易把div给甩掉（不理解的同学请自己去动动手）。具体的为什么不多说了，点到即止，希望菜鸟多多思考。

    2.224 不定义 position="absolute" 的话，left 和 top 是无效的 － 方块不会动的说