Front-end knowledge --Javascript review articles (five)

JUDGMENT

Common DOM acquisition method:

Back node.children child element node, there is no compatibility issues, dynamic access
node.parentNode Get the parent node, there is no compatibility issues
node.offsetParent recently acquired parent node localization
node.tagName obtain the tag name of the element node

Common DOM operations:

document.createElement ( "TagName") creates an element node
parentNode.appendChild (node) and finally add a child node in the parent node content
parentNode.insertBefore (insertNode, targetNode) inserting a node before the destination node
parentNode.replaceChild (replaceNode, targetNode) replaced with a target node node
parentNode.removeChild (Node) remove a child node
node.cloneNode (Boolean) accepts a Boolean value as a parameter for shallow clone false, just copy the node itself; when true deep cloning, node and its descendant nodes are all clones (but not their own event is over cloning )
document.createDocumentFragment () document fragments as intermediate storage, to be inserted in all of pre-existing nodes up, and then a one-time insertion.

Add a child element node innerHTML and appendChild () method distinction

node.innerHTML () method is to add a child element node with a string, to pay attention to do so will cover pre-existing node, resulting in the body of the original node event is invalid
appendChild () call to make each page re-rendering, so too will the number of calls page performance degradation

Therefore, if the node who operated without incident, it is recommended to use innerHTML method; if the addition of nodes and the number of events with him, then you can pretty much use the document fragmentation method

Documents related attributes of nodes

The following properties are no units, the default is px.

client: no compatibility issues, read-only attribute

clientWidth / clientHeight

On the element used to obtain a content size + padding size
document.documentElement (that is, the html element) Use: The size of the visible area of the document, not the total size (does not contain a scroll bar)
clientTop / clientLeft

Thickness of the border
offset: no compatibility problems

offsetWidth / offsetHeight
on the elements used, it is acquired content size + size + borders padding size
document.documentElement used: Get the width of the visible region only, but can obtain the actual height
offsetTop / offsetLeft
obtain a top element positioned at the top distance parent value, but it does not include the parent frame thickness positioned
to obtain the value from the left side of the positioning element of the parent from the left, but does not include the parent frame thickness positioning
scroll：

scrollWidth / scrollHeight
on the element used to acquire the content size + padding the size of
the element's content exceeded, width = content size + left padding size + beyond the portion size = left padding + content width
if the element content exceeded, and using overflow: hidden width = content size + + padding size exceeds the size of the portion of the content width = padding +
scrollTop / the scrollLeft IE5 not, writable property
document.documentElement.scrollTop / document.body.scrollTop (different browser compatible with one of its writing, most good both at the same write)
document.documentElement.scrollLeft / document.body.scrollLeft
acquires the scroll offset value of the x-axis or the roll axis of the y-axis direction
inner: not compatible with IE8, you can understand

The innerWidth / innerHeight, window exclusive, acquisition window width and height of the visible region (plus the width of the scroll bar)

Mouse Properties

Mouse event object attributes e (IE is window.event):

client: No compatibility problems
clientX / clientY
mouse to the top and left values of the visible area (the current click the mouse x and y coordinates of the mouse)
page: incompatible IE8 and below (with client + scroll alternatively)
the pageX / pageY
mouse over the top left and top value document

Stop event bubbling

Event bubbling: refers to the subclass of an event is triggered, if the parent subclass presence of the same type of event will be followed by all the trigger.

Prevent bubbling: Just stop the bubbling event, the event will still execute the event source.

事件源.事件 = function(e){
    e = e || window.event;  //兼容ie
    if(e.stopPropagation){
        e.stopPropagation();
    }else{
        e.cancelBubble = true; //兼容ie
    }
}

DOM2-level events

IE10 above and other browsers:

the addEventListener (Event name does not add on, event handler, Boolean) / removeEventListener (without the name of the event on, event handler, Boolean) execution order, the first binding first execution

Here Boolean value that defaults to false, meaning bubbling. If set to true, it said the capture, its execution is triggered execution of its child elements similar incidents.

IE10 is compatible with the following:

attachEvent (ON + event name, event handler) / detachEvent (ON + event name, event handler) reverse execution, after the implementation of the first binding. Pay special attention at this time in this event handler no longer point to the event source but point to the window, and therefore need to deal with call functions.

Acting events (event delegate)

Principle is to use the event bubbling (/ capture) characteristics, bubbling after a triggering event sub-elements parent element is captured, and therefore the target attribute (IE for e.srcElement) in the event the parent element will point to this object child elements trigger event. e.currentTarget point is to add event listeners parent element itself.

So pay attention to only be able to use the event to event bubbling agent! Like onmouseenter and onmouseleave these two events do not bubble is not enough!

Prevent the default behavior

The default behavior will be executed when the event trigger to stop.

target.onXXX = function(event){
    event = event || window.event;
    if(event.preventDefault){
        event.preventDefault();  //主流浏览器
    }else{
        event.returnValue = false;  //低版本IE
    }
}

Wheel event

Google and IE browser

Wheel event the MouseWheel (when not bound event, Google and IE, this property is null, the Firefox browser is undefined, so you can do a compatibility processing)

Scroll direction step event.wheelDelta on roll Scroll -120 +120
Unique Firefox

Wheel events DOMMouseScroll only allowed DOM2-level event binding

Scroll direction step event.detail roll-on roll at -3 +3