JavaScript cross-browser Event object class Library

First, preface

After learning the JavaScript event, the individual summed up the cross-browser Event object class library, convenient for later use, is now shared to everyone.

Ii. Event Object Encapsulation

Encapsulates the operation of the browser event object into Eventobject.js for easy invocation

//actions for cross-browser event objectsvarEventutil = {    //Binding Event HandlersAddHandler:function(element, type, handler) {if(Element.addeventlistener) {//DOM2 level Event handlersElement.addeventlistener (type, Handler,false);//False indicates that the bubbling phase invokes the event handler}Else if(element.attachevent) {//IE event handlersElement.attachevent (' on ' +type, handler); }Else{//DOM0 level Event handlerselement[' on ' + type] =handler; }    },    //Unbinding an event handlerRemoveHandler:function(element, type, handler) {if(Element.removeeventlistener) {Element.removeeventlistener (type, handler,false); }Else if(element.detachevent) {element.datachevent (' On ' +type, handler); }Else{element[' on ' + type] =NULL; }    },    //Get Event ObjectGetEvent:function(event) {returnEvent | |window.event; },    //get target Element ObjectGettarget:function(event) {returnEvent.target | | Event.srcelement;//Event.target means get non-ie element object, event.srcelement means get IE element Object    },    //default behavior for blocking eventsPreventdefault:function(event) {if(Event.preventdefault) {//default behavior for blocking events under non-IEEvent.preventdefault (); }Else{Event.returnvalue=false;//default behavior of block events under IE        }    },    //block events from bubblingStoppropagation:function(event) {if(event.stoppropagation) {//block event Bubbling under non-IEevent.stoppropagation (); }Else{event.cancelbubble=true;//block event Bubbling under IE        }    },    //get mouse-pressed keysGetbutton:function(event) {if(Document.implementation.hasFeature ("Mouseevents", "2.0")) {//DOM2 detection of mouseevents modules            returnEvent.button; //var k = Event.button;            //switch (k) {            //Case 0:            //return "0: Indicates left key";            //Case 1:            //return "1: Medium key";            //Case 2:            //return "2: Right button";            //     }            //ie6,7,8 Left: 1, Middle key: 4, right-click: 2;            //chrome,ff,ie9+ Left: 0, Middle key: 1, right-click: 2;}Else {            Switch(Event.button) {//IE                 Case0 :                 Case1 :                 Case3 :                 Case5 :                 Case7 :                    return0;//left button                 Case2 :                 Case6 :                    return2;//Right-click                 Case4 :                    return1;//Middle Key            }        }    },    //get related Element object when mouse moves out    /*The Relatedtarget property of the event object provides information about the element that contains the value only for mouseover and mouseout events; * For other events, the value of this property is null.    *ie does not support the Relatedtarget property, but it provides different properties that hold the same information.    * Save related elements in the fromelement attribute of IE when mouseover event is triggered, and the toelement attribute of IE is saved when mouseout event is triggered. */Getrelatedtarget:function(event) {if(event.relatedtarget) {returnEvent.relatedtarget; }Else if(event.toelement) {//Mouseout Event Triggering            returnevent.toelement; }Else if(event.fromelement) {//MouseOver Event Triggering            returnevent.fromelement; }Else {            return NULL; }    }};

Iii. Summary

These libraries refer to the 3rd edition of JavaScript Advanced programming, and if you have a better class library for event object operations, you want to share the conversation.

There are misleading places in this article, and I hope everyone will haihan and give correct correction. If you feel that the article is helpful to you, your message and recommendation will be a great encouragement to me!

If you want to reprint this article, please specify the source: http://www.cnblogs.com/changjianqiu/

JavaScript cross-browser Event object class Library