好程序员web前端培训分享前端javascript练习题，事件委托机制 ----------重要

　　eg：点击按钮往ul中添加li，使添加的li也有相同的事件

var obtn=document.getElementById("btn");

    var olist=document.getElementById("list");  //获取ul

    var oli=olist.children;  //获取ul的子节点li

   olist.onclick=function(e){

       var evt=e||event;

       var tar=evt.target||evt.srcElement;  //获取事件源

       if(tar.nodeName.toLowerCase()=="li"){  判断事件源是不是是该执行目标

           console.log(tar.innerHTML); //此时不能用this，因为this指向的是ul

       }

   }

    obtn.onclick=function(){

        for(var i=0;i<4;i++){

            var lli=document.createElement("li");

            lli.innerHTML="aaaa";

            olist.appendChild(lli);

        }

    }

拖拽效果

var odiv=document.getElementsByTagName("div")[0];

odiv.onmousedown=function(e){  //按下鼠标的事件

    var evt=e||event;

    var lf=evt.offsetX;

    var tp=evt.offsetY;

  document.onmousemove=function(e){  //鼠标移动事件

       var evt=e||event;

        var x=evt.clientX-lf;  //让鼠标一直在按下的那个位置

       var y=evt.clientY-tp;

      //设置元素只能在可视区域内移动

      if(x<=0){

          x=0;

      }

      if(x>=document.documentElement.clientWidth-odiv.offsetWidth){

        x=document.documentElement.clientWidth-odiv.offsetWidth

      }

      if(y<=0){

          y=0;

      }

        if(y>=document.documentElement.clientHeight-odiv.offsetHeight){

            y=document.documentElement.clientHeight-odiv.offsetHeight;

        }

      odiv.style.left=x+"px";  //让元素跟着鼠标移动

      odiv.style.top=y+"px";

    }

    document.onmouseup=function(){  //鼠标抬起事件

        document.onmousemove=null;

    }}

九宫格
js代码：

var obox=document.getElementById("box");

    //创建结构

    for(var i=0;i<3;i++){  //控制外层的行数

        for(var j=0;j<3;j++){  //控制内层

            var odiv=document.createElement("div");

            obox.appendChild(odiv);

           /* var r=Math.floor(Math.random()*256);

            var g=Math.floor(Math.random()*256);

            var b=Math.floor(Math.random()*256);*/

            odiv.style.backgroundColor="rgb("+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+")";  //字符串拼接

            odiv.style.left=j*(odiv.offsetWidth+10)+"px";

            odiv.style.top=i*(odiv.offsetHeight+10)+"px";

        }

    }

    var strarr=["a","b","c","d","e","f","g","h","i","m"];

    var child=obox.children;

    //给每个小块加上文字

    for(var i=0;i<child.length;i++){

        child[i].innerHTML=strarr[i];

    }

    //拖拽

    for(var i=0;i<child.length;i++){

        child[i].onmousedown=function(e){

            var evt=e||event;

            var lf=evt.offsetX;

            var tp=evt.offsetY;

            var current=this;  //将this保存current中 ，因为上下指向的this不同

            //因为拖动的时候原位置，还需要有东西，所以才克隆

            var clone=current.cloneNode(); //克隆一个当前的元素，并添加到盒子里

                clone.style.border="1px dashed #000";//            obox.appendChild(clone);  //因为添加之后克隆的索引在最后，// 后面需要进行距离比较，所以需要将克隆节点和当前节点进行替换

            obox.replaceChild(clone,current);  //用克隆的节点替换当前节点

            obox.appendChild(current);  //把当前节点加到盒子里

            current.style.zIndex=1;

            document.onmousemove=function(e){

                var evt=e||event;

                var x= e.clientX-lf-obox.offsetLeft;

                var y= e.clientY-tp-obox.offsetTop;

                //当前对象的坐标：随着鼠标移动

                current.style.left=x+"px";

                current.style.top=y+"px";

                return false;  //取消默认行为

            }

            document.onmouseup=function(){

                //将当前的这个和剩下所有的进行比较，找出距离最近的

                //将当前放到距离最近的位置，最近的那个放到克隆的位置

                var arr=[];

                var newarr=[];

                //以为此时当前节点的索引在最后，不需要和自身比较，所以去掉最后一个索引

                for(var i=0;i<child.length-1;i++){

                    var wid=current.offsetLeft-child[i].offsetLeft;

                    var hei=current.offsetTop-child[i].offsetTop;

                    var juli=Math.sqrt(Math.pow(wid,2)+Math.pow(hei,2));

                    arr.push(juli);

                    newarr.push(juli);

                }

                arr.sort(function(a,b){

                    return a-b;

                })

                var min=arr[0];

                var minindex=newarr.indexOf(min);

                //交换位置：当前的坐标为最小距离对应的位置，最小值的放在克隆所在的位置

                current.style.left=child[minindex].style.left;

                current.style.top=child[minindex].style.top;

                child[minindex].style.left=clone.style.left;

                child[minindex].style.top=clone.style.top;

                obox.removeChild(clone); //交换位置之后将克隆的节点删除

                document.onmousemove=null;

                document.onmouseup=null;

            }

        }

    }

轨迹
js代码：

var odiv = document.getElementsByTagName("div")[0];var arr=[];  //用来保存鼠标移动时的坐标位置

document.onmousedown = function (e) {

    var evt1 = e || event;

    var x=evt1.clientX;

    var y=evt1.clientY;

    arr.push({pagex:x,pagey:y});

    document.onmousemove=function(e){

        var evt = e || event;

        var x = evt.clientX;

        var y = evt.clientY;

        arr.push({pagex:x,pagey:y}); //采用对象数组存储，因为坐标成对好进行操作

        return false;  //取消浏览器的默认行为

        //console.log(arr);

    }

    document.onmouseup=function(){

        var timer=setInterval(function(){

            odiv.style.left=arr[0].pagex+"px";

            odiv.style.top=arr[0].pagey+"px";

            arr.splice(0,1); //让元素坐标始终从0开始，splice会改变原数组长度

            if(arr.length==0){ //当数组长度为0，说明保存的坐标执行完了

                clearInterval(timer);

            }

        },20);

        document.onmousemove=null;

    }}