js事件詳解二：鼠標(biāo)和滾輪事件

Lucky_Boy 發(fā)布于2019-08-21 10:37 / 1815人閱讀

摘要：在級(jí)事件中定義了個(gè)鼠標(biāo)事件，分別是。取消鼠標(biāo)事件的默認(rèn)行為還會(huì)影響其他事件，因?yàn)槭髽?biāo)事件與其他事件是密不可分的關(guān)系。同樣的，和支持這個(gè)事件。兼容各個(gè)瀏覽器的事件監(jiān)聽對(duì)象該對(duì)象封裝了和級(jí)事件的常用事件函數(shù)。

概述

鼠標(biāo)事件是web開發(fā)中最常用的一類事件，畢竟鼠標(biāo)還是最主要的定位設(shè)備。在DOM3級(jí)事件中定義了9個(gè)鼠標(biāo)事件，分別是：click,dbclick,mousedown,mouseenter,mouseleave,mousemove,mouseout,mouseover。這九個(gè)鼠標(biāo)事件的具體含義相信大家從字面上看就能大概的了解了。頁面上所有的元素都支持鼠標(biāo)事件，除了mouseenter和mouseleave，所有的鼠標(biāo)事件都會(huì)冒泡，也可以被取消，而取消鼠標(biāo)事件將會(huì)影響瀏覽器的默認(rèn)行為。取消鼠標(biāo)事件的默認(rèn)行為還會(huì)影響其他事件，因?yàn)槭髽?biāo)事件與其他事件是密不可分的關(guān)系。

下面簡單介紹下各個(gè)事件的含義：

click：在用戶單擊主鼠標(biāo)按鈕（一般是左邊的按鈕）或者按下回車鍵時(shí)觸發(fā)。這一點(diǎn)對(duì)確保易訪問性很重要，意味著onclick事件處理程序既可以通過鍵盤也可以通過鼠標(biāo)執(zhí)行。
dbclick：在用戶雙擊主鼠標(biāo)按鈕（一般是左邊的按鈕）時(shí)觸發(fā)。從技術(shù)上說，這個(gè)事件并不是DOM2級(jí)事件規(guī)范中規(guī)定的，但鑒于它得到了廣泛支持，所以DOM3級(jí)事件將其納入了標(biāo)準(zhǔn)。
mousedown：用戶按下了任意鼠標(biāo)按鈕時(shí)觸發(fā)。不能通過鍵盤觸發(fā)這個(gè)事件。
mouseenter：在鼠標(biāo)光標(biāo)從元素外部首次移動(dòng)到元素范圍之內(nèi)時(shí)觸發(fā)。這個(gè)事件不冒泡，而且在光標(biāo)移動(dòng)到后代元素上不會(huì)觸發(fā)。IE,Firefox9+和opera支持這個(gè)事件。
mouseleave：在位于元素上方的鼠標(biāo)光標(biāo)移動(dòng)到元素范圍之外時(shí)觸發(fā)。這個(gè)事件也不冒泡，而且在光標(biāo)移動(dòng)到后代元素上不會(huì)觸發(fā)。同樣的，IE,Firefox9+和opera支持這個(gè)事件。
mousemove：當(dāng)鼠標(biāo)指針在元素內(nèi)部移動(dòng)時(shí)重復(fù)的觸發(fā)。不能通過鍵盤觸發(fā)這個(gè)事件。
mouseout：在鼠標(biāo)指針位于一個(gè)元素上方，然后用戶將其移入另一個(gè)元素時(shí)觸發(fā)。又移入的另一個(gè)元素可能位于前一個(gè)元素的外部，也可能是這個(gè)元素的子元素。不能通過鍵盤觸發(fā)這個(gè)事件。
mouseover：在鼠標(biāo)指針位于一個(gè)元素外部，然后用戶將其首次移入另一個(gè)元素邊界之內(nèi)時(shí)觸發(fā)。不能通過鍵盤觸發(fā)這個(gè)事件。
mouseup：在用戶釋放鼠標(biāo)按鈕時(shí)觸發(fā)。不能通過鍵盤觸發(fā)這個(gè)事件。

兼容各個(gè)瀏覽器的事件監(jiān)聽對(duì)象：

var EventUntil={
        addHandler:function(element,type,handler){
            if(element.addEventListener){
                element.addEventListener(type,handler,false);
            }else if(element.attachEvent){
                element.attachEvent("on"+type,handler);
            }else{
                element["on"+type]=handler;
            }
        },
        removeHandler:function(element,type,handler){
            if(element.removeEventListener){
                element.removeEventListener(type,handler,false);
            }else if(element.detachEvent){
                element.detachEvent("on"+type,handler);
            }else{
                element["on"+type]=null;
            }
        },
        getEvent:function(event){
            return event?event:window.event;
        },
        getTarget:function(event){
            return event.target||event.srcElement;
        },
        preventDefault:function(event){
            if (event.preventDefault) {
                event.preventDefault();
            }else{
                event.returnValue=false;
            }
        },
        stopPropagation:function(event){
            if(event.stopPropagation){
                event.stopPropagation();
            }else{
                event.cancelBubble=true;
            }
        }
    }

該對(duì)象封裝了ie和dom級(jí)事件的常用事件函數(shù)。大家可以參考著使用。