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