Several important functions related to compatibility

Several important functions related to compatibility 1. Create a XMLHttpRequest Object

1 functioncreatexhr () {2     if(typeofXMLHttpRequest! = "undefined") {3         return NewXMLHttpRequest ();//supported by ie7+ and other browsers4}Else if(typeofActiveXObject! = "undefined") {//supported by ie7-5             if(typeofArguments.callee.activeXString! = "string") {6                 varversions = ["msxml2.xmlhttp.6.0", "msxml2.xmlhttp.3.0", "Msxml2.xmlhttp"],7 I, Len;8                  for(i = 0, len = versions.length; i < Len; i++) {9                 Try {Ten                         NewActiveXObject (Versions[i]); OneArguments.callee.activeXString =Versions[i]; A                          Break; -}Catch(e) { -                     //Skip over the                 } -             } -         } -         return NewActiveXObject (arguments.callee.activeXString);//returns the ActiveXObject object +}Else{//all not supported, throw error -     Throw NewError ("Don t support XMLHttpRequest"); +     } A } at  - varXHR = CREATEXHR ();//Create a Xhr object in all browsers

2. Native JS implements cross-browser event objects and event handlers 2.1 Gets the event object

1 var event=event | | window.event;

2.2 Getting the event source

Event.srcelement is [ie8-] the only way, ie9+ unknown, other browsers support the standard Event.target way

2.3 Blocking Event default behavior

Event.preventdefault () is the standard method, but [ie8-] does not support, ie own way is event.returnvalue = false;

2.4 Blocking event bubbling

Event.stoppropagation () is the standard method, IE:event.cancelBubble = true;

Summary:

1. Event objects in the DOM
   (1) Type: Gets the event type
   (2) Target: Event target
   (3) stoppropagation () block event bubbling
   (4) Preventdefault () default behavior for blocking events
2. Event objects in IE
   (1) Type: Gets the event type
   (2) Srcelement: Event target
   (3) Cancelbubble=true block event bubbling
   (4) Returnvalue=false default behavior for blocking events

2.5 addition and removal of event handlers

DOM0 class Mode

1 ele.onclick = handler; // Binding of events 2 ele.onclick=null; // Removal of events

Attention:
1) To specify an event handler using JavaScript, you must first obtain a reference to the object you want to manipulate;

2) The This in the program refers to the current element; (this is different from IE, pay extra attention to)
Pros: simple, full browser compatible
disadvantage: The same event can only bind/unbind an event handler

DOM2 class Mode

1 ele.add/removeeventlistener (EventType, Handler, catch);

Accepts 3 parameters: the name of the event to be processed, the function that is the event handler, and a Boolean value. A Boolean value of TRUE indicates that an event handler is called during the capture phase, and False indicates that the event handler is called during the bubbling phase (typically in the bubbling phase).

Ie

1 ele.attach/detachevent (' on ' +eventtype, handler);

Accepts 2 parameters: an event handler name and an event handler function. (Less than a Boolean value compared to the DOM2 level, IE does not support event capture, so there is no third parameter)

Note:
1) The event handlers added via AddEventListener () can only be removed using RemoveEventListener ();
2) IE Add event name is "onclick", not Dom "click";
Pros: support for binding/unbinding multiple event handlers
Cons: need to make compatibility judgments.

Extra attention!! The main difference between using attachevent () in IE and using DOM0-level methods is the scope of the event handlers. in the case where the DOM0-level method is used, the event handler runs within the scope of the element to which it belongs, and in the case of the Attachevent () method, the event handler runs in the global scope, so this is equal to window. (JavaScript Advanced Programming page 352)

1 var btn = document.getElementById ("mybtn"); 2 btn.attachevevt ("onclick",function() {3     alert ( this = = window); // true 4 })

2.6 Cross-browser event handling

//Elem Event target elements, type event types, handler event handlersvarEventutil ={addHandler:function(Elem, type, handler) {if(Elem.addeventlistener) {//DOM2-level event handlers, which are triggered sequentially when multiple handler of the same type are addedElem.addeventlistener (type, Handler,false); }    Else if(elem.attachevent) {//IEElem.attachevent ("On" + type, handler);//when adding multiple handler of the same type, the IE rule is the first trigger that is added last    }    Else{elem["On" + type] = handler;//DOM0 class}}, GetEvent:function(event) {returnEvent?event:window.event; }, Gettarget:function(event) {returnEvent.target | |event.srcelement; }, Preventdefault:function(event) {if(Event.preventdefault) {event.preventdefault (); }    Else{Event.returnvalue=false; }},removehandler:function(Elem, type, handler) {if(Elem.removeeventlistener) {Elem.removeeventlistener (type, handler,false); }    Else if(elem.detachevent) {elem.detachevent ("On" +type, handler); }    Else{elem["On" + type] =NULL; }}, Stoppropagation:function(event) {if(event.stoppropagation) {event.stoppropagation (); }    Else{event.cancelbubble=true; }  }};

Questions to ask during a few interviews:

1. Explain event bubbling and event capture.

Cond.......

Several important functions related to compatibility