原生JavaScript事件處理程序匯總

timger 發布于2019-08-26 12:11 / 1301人閱讀

摘要：事件處理程序添加事件獲取事件對象引用獲取事件的目標取消給定事件默認行為級，中刪除事件停止事件冒泡獲取相關元素獲取鼠標按鈕信息獲取鼠標滾輪增量值的方法獲取鍵吐槽下的語法目前不支持頁面錨點定位事件處理程序添加事件級事件處理程序事件處理程序級事件

事件處理程序

添加事件

獲取事件對象引用

獲取事件的目標

取消給定事件默認行為 DOM0級，IE中

刪除事件

停止事件冒泡

獲取相關元素

獲取鼠標按鈕信息

獲取鼠標滾輪增量值（delta）的方法

獲取鍵

吐槽下segmentfault的markdown語法目前不支持頁面錨點定位

事件處理程序 添加事件

var EventUtil = {
    addEvent: function(element, type, handler){
        if(element.addEventListener){
            element.addEventListener(type, handler, false);//DOM2級事件處理程序
        }else if(element.attachEvent){
            element.attach("on" + type, handler);//IE事件處理程序
        }else{
            element["on" + type] = handler;//DOM0級事件處理程序
        }
    },

獲取事件對象引用

    getEvent: function(event){
        //return event || window.event;
        return event ? event : window.event;
    },

獲取事件的目標

    getTarget: function(event){
        return event.target || event.srcElement;
    },

取消給定事件默認行為 DOM0級，IE中

    preventDefault: function(event){
        if (event.preventDefault){
            event.preventDefault();
        } else {
            event.returnValue = false;
        }
    },

刪除事件

    removeEvent: 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;
        }
    },

停止事件冒泡

    stopPropagation: function(event){
        if(event.stopPropagation){
            event.stopPropagation();
        } else {
            event.cancelBubble = true;
        }
    },

獲取相關元素

這個屬性只對于mouseover和mouseout事件才包含值；
對于其他事件，這個屬性值是null;

    getRelatedTarget: function(e){
        if(e.relatedTarget){
            return e.relatedTarget;
        } else if(e.toElement){
            return e.toElement;
        } else if(e.fromElement){
            return e.fromElement;
        } else {
            return null;
        }
    },

獲取鼠標按鈕信息

{ 0:主鼠標按鈕，1：中間的鼠標按鈕（滾輪按鈕），2：次鼠標按鈕}

    getMouseButton: function(event){
        if(document.implementation.hasFeature("MouseEvents", "2.0")){
            return event.button;
        } else {
            // IE8及之前版本的button屬性，轉換為DOM版鼠標事件的button屬性
            switch(event.button){
                case 0:
                case 1:
                case 3:
                case 5:
                case 7:
                    return 0;
                case 2:
                case 6:
                    return 2;
                case 4:
                    return 1;
            }
        }
    },

獲取鼠標滾輪增量值（delta）的方法

    getWheelDelta: function(event){
        if(event.wheelDelta){
            return (client.engine.opera && client.engine.opera < 9.5) ?
                -event.wheelDelta : event.wheelDelta;
        } else {
            return -event.detail * 40;
        }
    },

獲取鍵

    getCharCode: function(event){
        if(typeof event.charCode == "number"){
            return event.charCode;
        } else {
            return event.keyCode;
        }
    }

發表在掘金的鏈接

GPU云服務器云服務器原生javascript事件事件處理程序 js事件處理程序 js原生dom事件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/108204.html

前端實習面試匯總

摘要：題目來源前端實習生面試總結最近開始了幾次面試，雖然還不知道結果如何，但是還是要記錄下來進行一個總結，同樣也希望對正在準備面實習生的童鞋們有所幫助最后一個參數是做什么用的答規定事件是冒泡還是捕獲。最近一直在多看基礎的書多碼代碼準備找實習，在網上也搜羅了不少面經，現在把搜羅到的實習生面試題自己整理一下。題目來源：前端實習生面試總結最近開始了幾次面試，雖然還不知道結果如何，但是還是要記錄...

張利勇 2019-08-29 11:17 評論0 收藏0
前端實習面試匯總

摘要：題目來源前端實習生面試總結最近開始了幾次面試，雖然還不知道結果如何，但是還是要記錄下來進行一個總結，同樣也希望對正在準備面實習生的童鞋們有所幫助最后一個參數是做什么用的答規定事件是冒泡還是捕獲。最近一直在多看基礎的書多碼代碼準備找實習，在網上也搜羅了不少面經，現在把搜羅到的實習生面試題自己整理一下。題目來源：前端實習生面試總結最近開始了幾次面試，雖然還不知道結果如何，但是還是要記錄...

wangzy2019 2019-08-01 15:43 評論0 收藏0
前端實習面試匯總

摘要：題目來源前端實習生面試總結最近開始了幾次面試，雖然還不知道結果如何，但是還是要記錄下來進行一個總結，同樣也希望對正在準備面實習生的童鞋們有所幫助最后一個參數是做什么用的答規定事件是冒泡還是捕獲。最近一直在多看基礎的書多碼代碼準備找實習，在網上也搜羅了不少面經，現在把搜羅到的實習生面試題自己整理一下。題目來源：前端實習生面試總結最近開始了幾次面試，雖然還不知道結果如何，但是還是要記錄...

NicolasHe 2019-08-22 10:37 評論0 收藏0
React的移動端和PC端生態圈的使用匯總

摘要：調用通過注冊表調用到實例，透過的，調用到中的，最后通過，調用，根據參數相應模塊執行。京東的，多端解決方案是一套遵循語法規范的多端開發解決方案。 showImg(https://segmentfault.com/img/bVbuMkw?w=1304&h=808); 對于一項技術，我們不能停留在五分鐘狀態，特別喜歡一句話，用什么方式繪制UI界面一點不重要，重要的是底層的思維，解決問題和優化...

kun_jian 2019-08-02 15:28 評論0 收藏0