js-API 03 DOM兼容性问题集中处理

一,兼容性
1,冒泡
如何阻止冒泡（存在兼容性）
e.stopPropagation(); 谷歌和火狐支持,IE不支持
window.event.cancelBubble=true; IE特有的,谷歌支持,火狐不支持
兼容性代码(封装进javascript函数中使用)
event = event || window.event;
if (event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = true;
}

2,节点
获取子节点 ,children与childNodes
返回节点的子节点集合
children： 获取子元素节点，无兼容问题
childNodes：
IE：获取子元素节点
非IE(chrome，Firefox等):获取子节点，包括元素节点和文本节点
获取第一个儿子元素节点,firstChild与firstElementChild
firstChild：
IE6,7,8：获取第一个子元素节点
非IE6,7,8：获取第一个子节点，元素节点/文本节点
firstElementChild：
IE6,7,8：不支持
非IE6,7,8： 获取第一个子元素节点
获取最后一个子元素节点,lastChild与lastElementChild
lastChild：
IE6,7,8：获取最后一个子元素节点
非IE6,7,8：获取最后一个子节点，元素节点/文本节点
lastElementChild：
IE6,7,8：不支持
非IE6,7,8：获取最后一个元素节点
获取后一个兄弟元素节点，nextSibling与nextElementChild
nextSibling：
IE6,7,8：获取后一个兄弟元素节点
非IE6,7,8：获取后一个兄弟节点，元素节点/文本节点
nextElementChild：
IE6,7,8：不支持
非IE6,7,8：获取后一个兄弟元素
获取前一个兄弟元素节点previousSibling与previousElementChild
previousSibling：
IE6,7,8：获取前一个兄弟元素节点
非IE6,7,8：获取前一个兄弟节点，元素节点/文本节点
previousElementChild:
IE6,7,8：不支持
非IE6,7,8：获取前一个元素节点
3,绑定
绑定事件的新方式
addEventListener和attachEvent方法
var son = document.querySelector(".son");
son.addEventListener('click', once1);
function once1() {
alert(1)
}
son.addEventListener('click', once2);
function once2() {
alert(2)
} 

对象.addEventListener("事件类型",事件处理函数,false);--谷歌和火狐支持,IE8不支持
 参数1:事件的类型---事件的名字,没有on
参数2:事件处理函数---函数(命名函数,匿名函数)
参数3:布尔类型,目前就写false（后面会说，现在你不理解）
区别 this不同,addEventListener 中的this是当前绑定事件的对象 
对象.attachEvent("有on的事件类型",事件处理函数)--谷歌不支持,火狐不支持,IE8支持
数1:事件的类型---事件的名字,有on
参数2:事件处理函数---函数(命名函数,匿名函数)
参数3:布尔类型,目前就写false（后面会说，现在你不理解）
attachEvent中的this是window
兼容性代码
function addEventListener(element,type,fn) {
//判断浏览器是否支持这个方法
if(element.addEventListener){
element.addEventListener(type,fn,false);
}else if(element.attachEvent){
element.attachEvent("on"+type,fn);
}else{
element["on"+type]=fn;
}
}
 
addEventListener(my$("btn"),"click",function () {
console.log("哦1");
});
addEventListener(my$("btn"),"click",function () {
console.log("哦2");
});
addEventListener(my$("btn"),"click",function () {
console.log("哦3");
});

移除解绑事件
解绑事件
解绑事件
* 对象.addEventListener("没有on的事件类型",命名函数,false);---绑定事件
* 对象.removeEventListener("没有on的事件类型",函数名字,false);
* 解绑事件
* 对象.attachEvent("on事件类型",命名函数);---绑定事件
* 对象.detachEvent("on事件类型",函数名字);
解绑兼容代码
function removeEventListener(element,type,fnName) {
if(element.removeEventListener){
element.removeEventListener(type,fnName,false);
}else if(element.detachEvent){
element.detachEvent("on"+type,fnName);
}else{
element["on"+type]=null;
}
}
function f1() {
console.log("第一个");
}
function f2() {
console.log("第二个");
}
addEventListener(my$("btn1"),"click",f1);
addEventListener(my$("btn1"),"click",f2);
my$("btn2").onclick=function () {
removeEventListener(my$("btn1"),"click",f1);
}; 

解绑事件的其他方法
// my$("btn2").onclick=function () {
// //1.解绑事件
// my$("btn").onclick=null;
// };
4,inner
InnerText细节技术点
设置标签中的文本内容,应该使用textContent属性,谷歌,火狐支持,IE8不支持
设置标签中的文本内容,应该使用innerText属性,谷歌,火狐,IE8都支持
浏览器兼容性写法
如果这个属性在浏览器中不支持,那么这个属性的类型是undefined
判断这个属性的类型 是不是undefined,就知道浏览器是否支持
核心代码 typeof element.textContent =="undefined"
innerText和innerHTML的区别
使用innerText主要是设置文本的,设置标签内容,是没有标签的效果的
innerHTML是可以设置文本内容
innerHTML主要的作用是在标签中设置新的html标签内容,是有标签效果的
想要设置标签内容,使用innerHTML,想要设置文本内容,innerText或者textContent,或者innerHTML,
推荐用innerHTML
//获取的时候:
//innerText可以获取标签中间的文本内容,但是标签中如果还有标签,那么最里面的标签的文本内容也能获取.获取不到标签的,文本可以获取
5,event
Event事件的兼容写法
获得event对象兼容性写法 
event || (event = window.event); 
获得target兼容型写法 
event.target||event.srcElement
function addEventListener(element,type,fn) {
//判断浏览器是否支持这个方法
if(element.addEventListener){
element.addEventListener(type,fn,false);
}else if(element.attachEvent){
element.attachEvent("on"+type,fn);
}else{
element["on"+type]=fn;
}
}
addEventListener(my$("btn"),"click",function () {
console.log("哦1");
});
addEventListener(my$("btn"),"click",function () {
console.log("哦2");
});
addEventListener(my$("btn"),"click",function () {
console.log("哦3");
});