javascript中イベントのまとめ

10131 ワード

ie firefox chrome opera Safariブラウザでのイベントの処理は一致していません.ここでは、各ブラウザのevent対応処理をまとめました.ここではjavascriptのevent対応処理コードを参照します.
var EventUtil = {//             event           

//           

    addHandler: function(element, type, handler){

        if (element.addEventListener){

        //DOM2         

            element.addEventListener(type, handler, false);

        } else if (element.attachEvent){

        //IE    

            element.attachEvent("on" + type, handler);

        } else {

        //DOM0     (  ,   DOM0             )

            element["on" + type] = handler;

        }

    },

    //         

    getButton: function(event){

        if (document.implementation.hasFeature("MouseEvents", "2.0")){//       DOM  

            return event.button;

        } else {

     // IE DOM  

            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;

            }

        }

    },

    //      

    getCharCode: function(event){

        if (typeof event.charCode == "number"){

            return event.charCode;

        } else {//IE8   opera     keyCode      

            return event.keyCode;

        }

    },

    //      

    getClipboardText: function(event){

        var clipboardData =  (event.clipboardData || window.clipboardData);

        return clipboardData.getData("text");

    },

    //      

    getEvent: function(event){

        return event ? event : window.event;

    },

    //      

    getRelatedTarget: function(event){

        if (event.relatedTarget){

            return event.relatedTarget;

        } else if (event.toElement){

            return event.toElement;

        } else if (event.fromElement){

            return event.fromElement;

        } else {

            return null;

        }



    },

    //      

    getTarget: function(event){

        return event.target || event.srcElement;

    },

    //         

    getWheelDelta: function(event){

        if (event.wheelDelta){

            return (client.engine.opera && client.engine.opera < 9.5 ? -event.wheelDelta : event.wheelDelta);

        } else {

            return -event.detail * 40;

        }

    },

    //      

    preventDefault: function(event){

        if (event.preventDefault){

            event.preventDefault();

        } else {

            event.returnValue = false;

        }

    },

    //    

    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;

        }

    },

    //       

    setClipboardText: function(event, value){

        if (event.clipboardData){

            event.clipboardData.setData("text/plain", value);

        } else if (window.clipboardData){

            window.clipboardData.setData("text", value);

        }

    },

    //      

    stopPropagation: function(event){

        if (event.stopPropagation){

            event.stopPropagation();

        } else {

            event.cancelBubble = true;

        }

    }



};
ここに追加されたイベントはまだ完全ではなく、拡充が必要です.ここで引用したのは「javascript高級プログラム設計」の例です.