1. 程式人生 > >JS事件高階應用-1

JS事件高階應用-1

一個事件可以繫結多個函式語句 一、同一個元素的同一個事件會覆蓋,而繫結不會。 attachEvent(‘ on事件名 ’,執行語句);ie下 addEventListener(‘ 事件名’,執行語句,false);谷歌chrome

相容函式封裝

function myAddEvent(obj,ev,fn){
    if(obj.attachEvent){
    obj.attachEvent('0n'+ev,fn);
        }else{
        obj.addEventListener(ev,fn,false);
        }
}

二、繫結解除 detachEvent(事件名,執行語句)

例項1:高階拖拽-1 磁性吸附 問題:當頁面中和div中有文字,在拖動的過程中會選中文字。

三、事件捕獲(只有ie下才有) div.setCapture 頁面上的所有的事件都會集中在這個div中 div.releaseCapture釋放事件捕獲

高階拖拽-1 (相容IE和Chrome、火狐,封裝方法)

 var div1 = document.getElementById('div1');
 var disX =0,
     disY = 0;

    div1.onmousedown = function(e){
        var oEvent = e ||event;
        disX = oEvent.clientX - div1.offsetLeft;
        disY = oEvent.clientY - div1.offsetTop;


        if(div1.setCapture){
            // IE下
            div1.onmousemove= mouseMove;

            div1.onmouseup = function(){//
                this.onmousemove= null;
                this.onmouseup = null;

                this.releaseCapture();//滑鼠鬆開的時候,捕獲也取消,不然頁面中其他標籤的元素無法執行事件
            };
            div1.setCapture();//事件捕獲

            }else{
                //chrome、火狐
                document.onmousemove= mouseMove; //函式封裝成了mouseMove

                document.onmouseup = function(){//
                        this.onmousemove= null;
                        this.onmouseup = null;                  
                };
            }               
    };

     function mouseMove(e){
    var oEvent = e ||event;
    var l = oEvent.clientX-disX;
    var t = oEvent.clientY-disY;

    if( l<0){
        l = 0;
    }else if(l> document.documentElement.clientWidth -div1.offsetWidth){
        l= document.documentElement.clientWidth -div1.offsetWidth;
    }
    if(t<0){
        t= 0;
    }else if(t> document.documentElement.clientHeight -div1.offsetHeight){
        t=document.documentElement.clientHeight -div1.offsetHeight;
    }
    div1.style.left=l+'px';
    div1.style.top= t+'px';
    }