Common compatible Writing methods in javascript
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!
