前端复习

/*Javascript常见兼容问题*/


1.HTML对象获取问题
FireFox:document.getELementById("idName");
IE: document.idname或docuemnt.getElementById('idName');
解决办法:统一使用documen.getElementById('idname');
2.event.x和event.y问题
说明：在IE下,event对象有x,y属性,但是没有pageX,pageY属性;
 FireFox下,event对象有pageX,pageY属性,但是没有x,y属性.
解决办法:使用 mx(mx?event.x:event.pageX)来代替IE下的event.x或者FireFox下的pageX
3.FireFox和IE父元素(parentElement)区别
IE:obj.parentElement;
FireFox:parentNode
4.自定义属性问题
说明:IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()来获取自定义属性;
FireFox只能使用getAttribute()来获取自定义属性
5.input.type属性问题
说明:IE:input.type属性为只读;
FireFox:input.type属性为读写.
解决办法:不修改input.type属性。如果必须要修改,先隐藏之前的input,然后在同样的位置插入一个input.
6.文本中的内容超出后以...显示
注:此方法适用于IE,Opera,safari,chrome.FF暂不支持
<style type="text/css">
li{
width: 200px;
white-space: nowrap;
text-overflow:ellipsis;
-o-text-overflow:ellipsis;
overflow: hidden;
}
</style>
7.添加事件方法
/*代码*/
addHanderler:function(element,type,handler){
if(element.addEventListener){//检测是否是DOM2级方法
element.addEventListener(type,handler,false);//false--冒泡 true--捕获
}else if(element.attachEvent){//检测是否为IE级方法
element.attachEvent("on"+type,handler);
}else{//检测是否是DOM0级方法
element["on"+type] = handler;
}
}
8.移除事件方法
removeHandler:function(element,type,handler){
if(element.removeElementListener){
element.removeElementListener(type,handler,false);
}else if(event.detachEvent){
element.detachEvent('on'+type,handler);
}else{
element["on" + type] = null;
}
}
9.获取事件及事件对象目标
// 获取事件对象的兼容性写法
getEvent:function(event){
return event?event:window.event;
}
//获取事件对象目标
getTarget:function(event){
return event.target||event.srcElement;
}
10.阻止浏览器默认事件
preventDefault:function(event){
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue = false;
}
}
11.阻止事件冒泡
stopPropagation:function(event){
if(event.stopPropagation){
event.stopPropagatioin();
}else{
event.cancelBubble = true;
}
}
12.mouseover和mouseout事件才包含的获取相关元素的方法
//mouseover和mouseout事件才包含的获取相关元素的方法
getRelatedTarget:function(event){
if(event.relatedTarget){
return event.relatedTarget;
}else if(event.toElement){
return event.toElement;
}else if(event.formElement){
return event.formElement;
}else{
return null;
}
}