Shulou(Shulou.com)06/03 Report--

This article mainly explains the "common compatible writing methods in javascript". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn the common compatible writing methods in javascript.

1. Get the compatible writing of the latter sibling node

Var nextElement=oLi3.nextElementSibling | | oLi3.nextSibling

two。 Get the compatible writing of the previous sibling node

Var previousElement = oLi3.previousElementSibling | | oLi3.previousSibling

3. Compatible use of childNodes

Function getChildNodes (ele) {

/ / 1. Define an empty array

Var arr = []

/ / 2. Get the specified element

Var oEle = document.querySelector (ele)

/ / 3. Get all the sons under the element

For (var I = 0; I < oEle.childNodes.length; iTunes +) {

/ / 4. Variable to determine the true son (element node nodeType==1)

If (oEle.childNodes [I] .nodeType = = 1) {

/ / 5. Add a real son to the array

Arr.push (oEle.childNodes [I])

}

}

/ / 6. Returns an array

Return arr

}

4. Get the first son.

Var No1 = oBox.firstElementChild | | oBox.firstChild

5. Get the last son.

Var oLast = oBox.lastElementChild | | oBox.lastChild

6. Event target object compatibility

Var t = event.target | | event.srcElement

Compatible writing of scroll bar

A simple compatible method of writing

Document.documentElement.scrollTop | | document.body.scrollTop

The second advanced compatible writing method

Function myScroll () {

/ / above ie9, google and Firefox can be used.

If (window.pageXOffset! = undefined) {

Return {

"left": window.pageXOffset

"top": window.pageYOffset

}

} else if (document.compatMode = = "CSS1Compat") {

/ / Standard DTD (with declaration header)

Return {

"left": document.documentElement.scrollLeft

"top": document.documentElement.scrollTop

}

}

/ / non-standard does not have DTD (no declaration header)

Return {

"left": document.body.scrollLeft

"top": document.body.scrollTop

}

}

Html5's new tag has a compatibility problem under ie 6 7 8. The solution is to create tag document.createElement dynamically. I can quickly use the html5shiv plug-in.

Compatible writing of event objects

Var e=evt | | window.event

Keyboard event

Var keyCode = e.keyCode | | e.which

Get the compatible writing of the style

Function getStyle (obj, attr) {

/ / non-ie,google, Firefox

If (window.getComputedStyle) {

Return window.getComputedStyle (obj, null) [attr]

}

/ / ie 6 8 9

Return obj.currentStyle [attr]

}

Compatibility to prevent bubbling

If (e.stopPropagation) {

E.stopPropagation ()

} else {

E.cancelBubble = true

}

Block default behavior

If (e.preventDefault) {

E.preventDefault ()

} else {

E.returnValue = false

}

Compatible writing of event monitoring

OBtn.addEventListener ("click", function () {

Alert ("Changsha Qianfeng Lao Luo is the most handsome")

}, {

Once: true, / / can only be clicked once

UseCapture: true / / true | | false

})

/ / obj adds an event to the specified element

/ / Type of type event (click,mouseenter..)

/ / fn function name

/ / useCapTure capture or bubbling

Function addEvent (obj, type, fn, useCapTure) {

If (obj.addEventListener) {

Obj.addEventListener (type, fn, useCapTure)

} else {

Obj.attachEvent ("on" + type, fn)

}

}

Event listening removes compatible writing

Function removeEvent (obj, type, fn, useCapTure) {

If (obj.removeEventListener) {

Obj.removeEventListener (type, fn, useCapTure)

} else {

Obj.detachEvent ("on" + type, fn)

}

}

Thank you for your reading, the above is the content of "common compatible writing in javascript". After the study of this article, I believe you have a deeper understanding of the common compatible writing in javascript, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.