鼠标按下事件的疑问

Question

<script type="text/javascript">

        window.onload=function(){
            /*
             onmousedown;
             onmousemove;
             onmouseup;
             */
            var oDiv=document.getElementById("div1");
            var i=0
            oDiv.onmousedown=function  (ev) {//**问题1**
                var ev=ev||event;
                var disX=ev.clientX-this.offsetLeft;
                var disy=ev.clientY-this.offsetTop;
                console.log(i++)
                oDiv.onmousemove=function(ev){
                    var ev=ev||event;
                    this.style.left= (ev.clientX-disX)+"px";
                    this.style.top= (ev.clientY-disy)+"px";
                }
                oDiv.onmouseup=function(){//**问题2**
                    oDiv.onmousemove=null
                }
            }
        }
    </script>

问题1：为什么在一次onmousedown之后，里面的oDiv.onmousemove可以持续运行呢？
问题2：此处的oDiv.onmouseup在每次oDiv.onmousedown是否在内存中新建的？每一次点击的时候函数是否会保存下来？

Answer 1

1.虽然JS是单线程，当down触发一次，down执行完毕之后（down之后，鼠标不移动，亦或你松开了鼠标左键，就不会有事件发生）oDiv的mousemove,mouseup就会绑定完毕；因为onmousemove已经存在，当事件程序检测mousemove触发后，就执行相应的代码；
2.如果没有用addEventListener绑定，每个新事件只会覆盖前面的同名事件，相当于新建。
就和写多个window.onload一样，只会执行最后一个，复写且不会保存。

Answer 2

这是一个拖拽事件的过程，鼠标按下（onmousedown），拖到（onmousemove）目标地松开（onmouseup）；
这是一个面向过程的思维。
第一步，鼠标按下，记录对象初始坐标
第二步，鼠标移动，改变对象的坐标
第三步，鼠标抬起，停止移动事件即停止改变对象的坐标。