JavaScript common Firefox firefox, ie browser compatibility issues

1, about the use of the event

The event object can be used directly in IE, and FF cannot be

Workaround One:
var theevent = window.event | | Arguments.callee.caller.arguments[0];

Workaround two: To pass the event as a parameter
function xxx (e) {var theevent = window.event | | e;}

2. Event Object Acquisition

IE:event.srcElement

Mozilla:event.target

Mozilla under the E.target equivalent to the event.srcelement under IE

But the details are different.

The srcelement in IE represents the source that generated the event, such as which button triggered the OnClick event and returns an HTML Element

The FF is target and returns a node, that is, the text node is included

3, the keyboard value of the acquisition

Mozilla:event.which

IE:event.keyCode

4, take the absolute position of mouse click

Ie:event.x, Event.y

Mozilla:event.pageX, Event.pagey

5, take the relative position of mouse click

IE:event.offsetX, Event.offsety

Mozilla:event.pageX, Event.pagey

6. Event Binding

Ie:attachevent, Detatchevent

Mozilla:addeventlistener, RemoveEventListener

7. Event bubbling, event capture, default event

Both of these concepts are designed to solve the problem of event flow (the sequence of events) in the page.

<div id="outer">

    <p id= "inner" >click me! </P>

</div>

Event bubbling: Microsoft-Events start from the most inner element and propagate up until the Document object, page, Div, body, and so on

Event capturing: Netscape--in contrast to event bubbling, events start from the outermost layer until the most specific element, document---HTML----P

Methods to block event bubbling and capturing: e.stoppropagation ();

method to prevent the default event from occurring: E.preventdefault ();

AddEventListener default False Bubbling event, true capture event

Block Event bubbling:

In Microsoft's model, you must set the Cancelbubble property of the event to True

window.event.cancelBubble = True

In the model, you must invoke the Stoppropagation () method of the event

e.stoppropagation ()Compatible Workaround:function dosomething (e)

{

if (!e)

{

var e = window.event;

E.cancelbubble = true;

}

   if (e.stoppropagation) {e.stoppropagation ();        }}

8. Get element Attributes GetAttribute

In Firefox getattribute ("onsubmit") The return value is a string, that is, a function, so if you work with onsubmit in IE, we can call this function directly

The return value type in IE is function, so it cannot be used directly, instead it should be converted to a function and then called, and the string will be converted to a function using the new function

var vaf = new Function (document.getElementById ("test"). GetAttribute ("onsubmit"));

Compatible Workaround:

function Validate () {
var Vaf=document.getelementbyid ("Test"). GetAttribute ("onsubmit");
VAF = typeof (VAF) = = "string"? New Function (VAF): VAF;
if (VAF ())
alert ("OK");
Else
alert ("Error");
    }

Dom Chapter

1. Deleting nodes
Ie:removenode

Example: <input type= "button" value= "ClickMe" id= "MyButton" >

document.getElementById ("MyButton"). RemoveNode ()

In Mozilla, there is no way, only to find the parent node first, and then call the DOM method removechild to achieve the purpose

Example: <input type= "button" value= "ClickMe" id= "MyButton" >

var Node = document.getElementById ("MyButton");

ONode.parentNode.removeChild (Onode);

2, about innerHTML and innertext

InnerText:

Browser support: IE, Chrome

Assignment action: First convert the ASCII entity corresponding character (<, >, &, ' and ') to the entity name, and then assign the processed value to the innerHTML property.

Value operation: The value of InnerText is actually a series of processing of innerHTML property values, and then return, the following steps

1. Parsing the HTML tags;

2. The CSS style with limited parsing and rendering;

3. Convert the ASCII entity to the corresponding character;

4. Remove the format information (such as \ t \ r and \ n, etc.) and combine multiple contiguous spaces into one.

Browser effects are not uniform

Textcontent:

Browser support: Ie9~11, Fireforx, Chrome

Assignment action: First convert the ASCII entity corresponding character (<, >, &, ' and ') to the entity name, and then assign the processed value to the innerHTML property.

Value operation: The value of Textcontent is actually a series of processing of innerHTML property values, and then return, the following steps

1. Remove the HTML tag;

2. Convert the ASCII entity to the appropriate character.

Attention:

a). The HTML tag is excluded from parsing, and there is no processing of CSS parsing and rendering, so elements such as <br/> are not effective.

b). No formatting information is removed and consecutive spaces are merged, so \ T, \ r, \ n, and contiguous spaces will take effect.

All browser effects are unified

(The above relationship and behavior is limited to non-form elements)

JavaScript common Firefox firefox, ie browser compatibility issues