自己总结的浏览器兼容性方法

最新推荐文章于 2020-09-19 16:38:39 发布

chengshiyou9681

最新推荐文章于 2020-09-19 16:38:39 发布

阅读量193

点赞数

原文链接：https://my.oschina.net/aicoding/blog/55132

版权

<html>
<head>
<script type="text/javascript">

/************************************************ 兼容 ************************************************************/
if(window.HTMLElement) {

  //swapNode无法应用于FF-交换节点
  Node.prototype.swapNode=function($target){
   var $targetParent=$target.parentNode;
   var $targetNextSibling=$target.nextSibling;
   var $thisNode=this.parentNode.replaceChild($target,this);
   $targetNextSibling?$targetParent.insertBefore($thisNode,$targetNextSibling):$targetParent.appendChild($thisNode);
   return this;
  }
  //replaceNode无法应用于FF-替换指定节点
  Node.prototype.replaceNode=function(Node){
   this.parentNode.replaceChild(Node,this);
  }
  // removeNode无法应用于FF-删除指定节点
  Node.prototype.removeNode=function(removeChildren){
   if(removeChildren)
    return this.parentNode.removeChild(this);
   else{
    var range=document.createRange();
    range.selectNodeContents(this);
    return this.parentNode.replaceChild(range.extractContents(),this);
   }
  }

  //dom的all无法应用于FF
  HTMLElement.prototype.__defineGetter__("all",function(){
     var a=this.getElementsByTagName("*");
     var node=this;
     a.tags=function(sTagName){
      return node.getElementsByTagName(sTagName);
      }
     return a;
  });
  //dom的parentElement无法应用于FF
  HTMLElement.prototype.__defineGetter__("parentElement",function(){
     if(this.parentNode==this.ownerDocument)return null;
     return this.parentNode;
  });
  //children无法应用于FF
  HTMLElement.prototype.__defineGetter__("children",function(){
   var tmp=[];
   var j=0;
   var n;
   for(var i=0;i<this.childNodes.length;i++){
     n=this.childNodes[i];
     if(n.nodeType==1){
     tmp[j++]=n;
     if(n.name){
      if(!tmp[n.name])
       tmp[n.name]=[];
       tmp[n.name][tmp[n.name].length]=n;
     }
     if(n.id)
      tmp[n.id]=n;
     }
   }
   return tmp;
        });
  //Dom的innerText属性无法应用于FF-取值
  HTMLElement.prototype.__defineGetter__( "innerText",
   function(){
    return this.textContent;
   }
  );
  //Dom的innerText属性无法应用于FF-赋值
  HTMLElement.prototype.__defineSetter__( "innerText",
   function(sText){
    this.textContent=sText;
   }
  );
  //Dom的outerHTML属性无法应用于FF-赋值
  HTMLElement.prototype.__defineSetter__("outerHTML",function(sHTML) {
   var r=this.ownerDocument.createRange();
   r.setStartBefore(this);
   var df=r.createContextualFragment(sHTML);
   this.parentNode.replaceChild(df,this);
   return sHTML;
  });
  //Dom的outerHTML属性无法应用于FF-取值
  HTMLElement.prototype.__defineGetter__("outerHTML",function() {
   var attr;
   var attrs=this.attributes;
   var str="<"+this.tagName.toLowerCase();
   for (var i=0;i<attrs.length;i++) {
    attr=attrs[i];
    if(attr.specified)
     str+=" "+attr.name+'="'+attr.value+'"';
   }
   if(!this.canHaveChildren)
    return str+">";
   return str+">"+this.innerHTML+"</"+this.tagName.toLowerCase()+">";
});
  //Dom的outerText属性无法应用于FF-赋值
  HTMLElement.prototype.__defineSetter__("outerText",function(sText){
   var parsedText=document.createTextNode(sText);
   this.outerHTML=parsedText;
   return parsedText;
        });
  //Dom的outerText属性无法应用于FF-取值
  HTMLElement.prototype.__defineGetter__("outerText",function(){
   var r=this.ownerDocument.createRange();
   r.selectNodeContents(this);
   return r.toString();
        });
  //dom的runtimeStyle无法应用于FF
  HTMLElement.prototype.__defineGetter__("runtimeStyle",
   function(){
    return this.style;
   }
  );
  //dom的currentStyle无法应用于FF
  HTMLElement.prototype.__defineGetter__("currentStyle", function(){
   return this.ownerDocument.defaultView.getComputedStyle(this,null);
  });
  //dom的canHaveChildren无法应用于FF
  HTMLElement.prototype.__defineGetter__("canHaveChildren",function() {
    switch(this.tagName.toLowerCase()) {
     case "area":
     case "base":
     case "basefont":
     case "col":
     case "frame":
     case "hr":
     case "img":
     case "br":
     case "input":
     case "isindex":
     case "link":
     case "meta":
     case "param":
     return false;
    }
    return true;
  });
  //attachEvent无法应用于FF;sType(事件类型)，fHandler(绑定对象)
  HTMLElement.prototype.attachEvent=function(sType,fHandler){
   var shortTypeName=sType.replace(/on/,"");
   fHandler._ieEmuEventHandler=function(e){
    window.event=e;
    return fHandler();
   }
   this.addEventListener(shortTypeName,fHandler._ieEmuEventHandler,false);
  }
  //detachEvent无法应用于FF;
  HTMLElement.prototype.detachEvent=function(sType,fHandler){
     var shortTypeName=sType.replace(/on/,"");
     if(typeof(fHandler._ieEmuEventHandler)=="function")
      this.removeEventListener(shortTypeName,fHandler._ieEmuEventHandler,false);
     else
      this.removeEventListener(shortTypeName,fHandler,true);
  }
  //contains无法应用于FF-包含
  HTMLElement.prototype.contains = function(Node){
   do if(Node==this){
    return true;
   }while(Node=Node.parentNode);
   return false;
  }
  //insertAdjacentElement无法应用于FF
  /* swhere: 指定插入html标签语句的地方，有四种值可用：
     1.beforeBegin: 插入到标签开始前
     2.afterBegin:插入到标签开始标记之后
     3.beforeEnd:插入到标签结束标记前
     4.afterEnd:插入到标签结束标记后
   stext：要插入的内容
  */
  HTMLElement.prototype.insertAdjacentElement=function(where,parsedNode){
     switch(where){
      case "beforeBegin":
       this.parentNode.insertBefore(parsedNode,this);
       break;
      case "afterBegin":
       this.insertBefore(parsedNode,this.firstChild);
       break;
      case "beforeEnd":
       this.appendChild(parsedNode);
       break;
      case "afterEnd":
       if(this.nextSibling)
        this.parentNode.insertBefore(parsedNode,this.nextSibling);
       else
        this.parentNode.appendChild(parsedNode);
       break;
      }
  }
  //insertAdjacentHTML无法应用于FF
  HTMLElement.prototype.insertAdjacentHTML=function(where,htmlStr){
     var r=this.ownerDocument.createRange();
     r.setStartBefore(this);
     var parsedHTML=r.createContextualFragment(htmlStr);
     this.insertAdjacentElement(where,parsedHTML);
  }
  //insertAdjacentText无法应用于FF
  HTMLElement.prototype.insertAdjacentText=function(where,txtStr){
     var parsedText=document.createTextNode(txtStr);
     this.insertAdjacentElement(where,parsedText);
  }

  //event.x和event.y无法应用于FF-相对文档的水平座标
  Event.prototype.__defineGetter__( "x",function(){
    return this.pageX;
   });
  Event.prototype.__defineGetter__( "y",function(){
    return this.pageY;
   });
  //offsetX和offsetY无法应用于FF-相对容器的水平坐标
  if(window.navigator.userAgent.indexOf("Firefox")>0){
   Event.prototype.__defineGetter__("offsetX",function(){
     return this.layerX;
    });
   Event.prototype.__defineGetter__("offsetY",function(){
     return this.layerY;
    });
  }
  //srcElement无法应用于FF-设置或获取触发事件的对象
  /* 引用对象，这个对象有什么属性，就可以使用。
   常用的有：
   event.srcElement.TagName 事件对象的html标记
   event.srcElement.innerText 事件对象的内文本
   event.srcElement.value 表单事件对象的值
  */
  Event.prototype.__defineGetter__( "srcElement",function(){
    return this.target;
   });
  //fromElement无法应用于FF-返回鼠标移出的源节点
  Event.prototype.__defineGetter__("fromElement",function(){
    var node;
    if(this.type=="mouseover")
     node=this.relatedTarget;
    else if(this.type=="mouseout")
     node=this.target;
    if(!node)return;
    while(node.nodeType!=1)node=node.parentNode;
    return node;
   });
  //toElement无法应用于FF-返回鼠标移入的源节点
  Event.prototype.__defineGetter__("toElement",function(){
    var node;
    if(this.type=="mouseout")
     node=this.relatedTarget;
    else if(this.type=="mouseover")
     node=this.target;
    if(!node)return;
    while(node.nodeType!=1)node=node.parentNode;
    return node;
   });
  //window.event无法应用于FF
  //window.constructor.prototype.__defineGetter__("event",__window_event_constructor);

}

if(/Firefox/.test(navigator.userAgent)){
window.constructor.prototype.__defineGetter__("event",__window_event_constructor);
}

//iframe-自适应高度
function autoheight(obj){
parent.document.all(obj.id).style.height=document.body.scrollHeight; //自动适应高度
//parent.document.all(obj.id).style.width=document.body.scrollWidth; //自动适应宽度
}

/************************************************** 扩展 **********************************************************/

//ie(扩展),其它(支持)- trim 去除首尾空格
if(!String.prototype.trim){
  String.prototype.trim=function(){
    return this.replace(/(^\s*)|(\s*$)/g,"");
   }
}
//ie(扩展),其它(支持)- trim 去除首空格
if(!String.prototype.lTrim){
  String.prototype.lTrim=function(){
    return this.replace(/(^\s*)/g,"");
   }
}
//ie(扩展),其它(支持)- trim 去除尾空格
if(!String.prototype.rTrim){
  String.prototype.rTrim = function(){
    return this.replace(/(\s*$)/g,"");
   }
}
//(扩展),把字符串的首字母转化为大写
if(!String.prototype.initialsToUpper){
  String.prototype.initialsToUpper = function() {
    return this.substring(0,1).toUpperCase().concat(this.substring(1));
   }
}

//(扩展),验证是否为合法的手机号码
if(!String.prototype.isMobile){
  String.prototype.isMobile = function() {
   return /^1[358]\d{9}$/.test(this.trim());
  }
}
//(扩展),验证是否为合法的Email
if(!String.prototype.isEmail){
  String.prototype.isEmail = function() {
   return (/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/).test(this.trim());
  }
}
//(扩展),验证是否为合法的电话号码或传真
if(!String.prototype.isPhone){
  String.prototype.isPhone = function() {
   return /^(0\d{2,3}-\d{7,8}(?:-\d{1,4})?|1\d{10})|(0\d{2,3}\d{7,8})$/.test(this.trim());
  }
}
//(扩展),验证是否为合法的邮编
if(!String.prototype.isPost){
  String.prototype.isPost = function() {
   return /^\d{6}$/.test(this.trim());
  }
}
//(扩展),验证是否为合法的身份证号
if(!String.prototype.isIdCard){
  String.prototype.isIdCard = function() {
   return /(^\d{15}$)|(^\d{17}([0-9]|X)$)/.test(this.trim());
  }
}
//(扩展), 非空验证
if(!String.prototype.isEmpty){
  String.prototype.isEmpty = function() {
   return this.trim()==="";
  }
}
//(扩展),银行账号验证
if(!String.prototype.isBank){
  String.prototype.isBank = function() {
   return /^\d{16,19}$/.test(this.trim());
  }
}
//(扩展),验证是否为合法的网址
if(!String.prototype.isUrl){
  String.prototype.isUrl = function() {
   // /^http:\/\/\S*$/
   ///(\w+):\/\/([^/:]+)(:\d*)?([^# ]*)/
   var strRegex = "^((https|http|ftp|rtsp|mms)?://)"
    + "?(([0-9a-z_!~*'().&=+$%-]+: )?[0-9a-z_!~*'().&=+$%-]+@)?" //ftp的user@
    + "(([0-9]{1,3}\.){3}[0-9]{1,3}" // IP形式的URL- 199.194.52.184
    + "|" // 允许IP和DOMAIN（域名）
    + "([0-9a-z_!~*'()-]+\.)*" // 域名- www.
    + "([0-9a-z][0-9a-z-]{0,61})?[0-9a-z]\." // 二级域名
    + "[a-z]{2,6})" // first level domain- .com or .museum
    + "(:[0-9]{1,4})?" // 端口- :80
    + "((/?)|" // a slash isn't required if there is no file name
    + "(/[0-9a-z_!~*'().;?:@&=+$,%#-]+)+/?)$";
   var re = new RegExp(strRegex);
   return re.test(this.trim());
  }
}

//ie(扩展),其它(支持)- indexOf 检索字符串
if(!Array.prototype.indexOf){
  Array.prototype.indexOf = function(obj) {
    var result = -1;
    for(var i = 0; i < this.length; i++) {
     if(this[i] == obj) {
      result = i;
      break;
     }
    }
    return result;
   }
}
//(扩展)- contains 检查一个对象是否包含在Array中
if(!Array.prototype.contains){
  Array.prototype.contains = function(obj) {
    return this.indexOf(obj) > -1;
   }
}
//(扩展)- add 添加一个对象
if(!Array.prototype.add){
  Array.prototype.add = function(obj) {
    if(!(this.contains(obj))) {
     this[this.length] = obj;
    }
   }
}
//(扩展)- remove 删除一个对象
if(!Array.prototype.remove){
  Array.prototype.remove = function(obj) {
    if(this.contains(obj)) {
     var index = this.indexOf(obj);
     for(var i = index; i < this.length - 1; i++) {
      this[i] = this[i + 1];
     }
     this.length--;
    }
   }
}
//(扩展),去掉数组中重复的值
if(!Array.prototype.unique){
  Array.prototype.unique = function() {
    var data = [];
    var a = {}; //声明一个对象，javascript的对象可以当哈希表用
    for (var i = 0; i < this.length; i++) {
     if(!a[this[i]]){
      a[this[i]] = true;
      data[data.length] = this[i];
     }
    }
    return data;
   }
}

//(扩展) - getElementsByClass 通过class获取元素对象;
if (!document.getElementsByClass) {
  document.ext={
   getElementsByClass:function(classname,o){
    var elements = [];
    var alltags = null;
    if(o){
     alltags = o.all ? o.all : o.getElementsByTagName("*");
    }else{
     alltags = document.all ? document.all : document.getElementsByTagName("*");
    }
    for (var i=0; i<alltags.length; i++) {
     if(typeof alltags[i].className === "string"){
      var classNames = (alltags[i].className).split(" ");
      if (classNames.contains(classname) && classname != '')
       elements[elements.length] = alltags[i];
     }
    }
    return elements.length==0 ? null : elements;
   }
  };
}

/************************************************ 自定义 ************************************************************/
//Map的构造函数
    function Map(){
        this.container = new Object();
    }
    //添加一个键-值
    Map.prototype.put = function(key, value){
        this.container[key] = value;
    }
    //通过键获取一个值
    Map.prototype.get = function(key){
  if(!this.container)
   return null;
  return this.container[key] ? this.container[key] : null;
    }
//返回该Map对象的键集合
    Map.prototype.keySet = function() {
        var keyset = new Array();
        var count = 0;
        for (var key in this.container) {
            if (key == 'extend' || key == 'event')
                continue;
            keyset[count] = key;
            count++;
        }
        return keyset;
    }
//删除一个键值对
Map.prototype.remove = function(key) {
  delete(this.container[key]);
}
//清空所有键值对
Map.prototype.removeAll = function(){
  delete(this.container);
}
//返回该Map对象的大小
    Map.prototype.size = function() {
        var size_count = 0;
        for (var key in this.container) {
            // 跳过object的extend函数、event事件(opera浏览器才会出现：event=[object MouseEvent])
            if (key == 'extend' || key == 'event')
    continue;
            size_count++;
        }
        return size_count;
    }
    //返回该Map对象的字符串形式,以分号分隔
    Map.prototype.toString = function(){
        var str = "";
        for (var i = 0, keys = this.keySet(), len = keys.length; i < len; i++) {
            str = str + keys[i] + "=" + this.container[keys[i]] + ";";
        }
        return str.substring(0,str.length-1);
    }

//test

document.οnclick=function(){
  /*
  var a = new Array("5","7","7");
  alert(a);
  alert(a.unique());
  */

  /*var map = new Map();
  map.put('a1','铁钉');
  map.put('a2','铁锤');
  alert(map.size());
  alert(map.get('a1'));
  alert(map.get('a2'));
  alert(map.toString());

  map.remove('a1');
  alert(map.size());
  alert(map.get('a1'));
  alert(map.get('a2'));
  alert(map.toString());

  map.removeAll();
  alert(map.size());
  alert(map.get('a1'));
  alert(map.get('a2'));
  alert(map.toString());*/
}

/************************************************************************************************************/
</script>
</head>

<body>

<div id="list_1">
<h2>兼容js</h2>
<a href="javascript:;" οnclick="alert(window.event);">event</a><br/>
<a href="javascript:;" οnclick="alert('x:'+event.x+'\ny:'+event.y);">event.x,event.y</a><br/>
<a href="javascript:;" οnclick="alert(event.srcElement.id);">event.srcElement.id</a><br/>
<a href="javascript:;" οnclick="alert('x:'+event.clientX+'\ny:'+event.clientY);">event.clientX,event.clientY</a><br/>
<a href="javascript:;" οnclick="alert('offsetX:'+event.offsetX+'\noffsetY:'+event.offsetY);">event.offsetX,event.offsetY</a><p>

<a href="javascript:;" οnclick="alert(this.runtimeStyle);">HTMLElement.runtimeStyle</a><br/>
<a href="javascript:;" οnclick="alert(this.canHaveChildren);">HTMLElement.canHaveChildren</a><br/>
<a href="javascript:;" οnclick="alert(this.outerHTML);">HTMLElement.outerHTML</a><br/>
<a href="javascript:;" οnclick="alert(this.innerText);">HTMLElement.innerText</a><br/>
<a href="javascript:;" οnclick="alert(this.currentStyle);">HTMLElement.currentStyle</a><br/>
<a href="javascript:;" οnclick="alert(this.all);">HTMLElement.all</a><br/>
<a href="javascript:;" οnclick="alert(this.parentElement);">HTMLElement.parentElement</a><br/>
<a href="javascript:;" οnclick="alert(this.children);">HTMLElement.children</a><br/>
<a href="javascript:;" οnclick="alert(this.outerText);">HTMLElement.outerText</a><br/>
<a href="javascript:;" οnclick="alert(this.contains(document.getElementById('a_f')));" ><font id="a_f" >HTMLElement.contains(Node)</font></a><br/>
<a href="javascript:;" id="theAttach" >HTMLElement.attachEvent</a><br/>
<a href="javascript:;" id="theDetach" >HTMLElement.detachEvent</a><br/>
<a href="javascript:;" οnclick="javascritp:this.insertAdjacentElement('beforeBegin',document.createElement('input'));">HTMLElement.insertAdjacentElement</a><br/>
<a href="javascript:;" οnclick="javascritp:this.insertAdjacentHTML('beforeBegin','<font color=\'blue\'>html标签</font>');">HTMLElement.insertAdjacentHTML</a><br/>
<a href="javascript:;" οnclick="javascritp:this.insertAdjacentText('beforeBegin','插一段文本');">HTMLElement.insertAdjacentText</a><p>

<a href="javascript:;" id="node_1" οnclick="removeNode(this);">Node.removeNode(Node)</a><br/>
<a href="javascript:;" οnclick="replaceNode(document.createElement('input'))">Node.replaceNode(Node)</a><br/>
<a href="javascript:;" id="node_3" οnclick="javascript:this.swapNode(document.getElementById('node_1'));" >Node.swapNode(Node)</a><br/>
<button οnmοuseοut="event_test(this)">MouseOut</button><button οnmοuseοver="event_test(this)">MouseOver</button><p>

editable(this,'on/off')<br/>
<iframe id="editor" src="about:blank" width="200" height="50" scrolling="auto" οnlοad="editable(this,'on');" ></iframe><p>
autoheight(this)<br/>
<iframe id="iframe_id" src="top.html" width="200" scrolling="no" οnlοad="autoheight(this);" ></iframe><br/>
</div>

<div id="list_2">
<h2>扩展js</h2>
<a href="javascript:;" class="a_class" οnclick="alert(document.ext.getElementsByClass('input_class')[0].value);">document.ext.getElementsByClass(class)</a><p>

<span style="color:red;">String</span>.trim
<input class="input_class input_class2" type="text" value=" abc啊以马雅 " οnfοcus="this.value = this.value.trim();"/><br/>
<span style="color:red;">String</span>.lTrim
<input class="input_class input_class2" type="text" value=" abc啊以马雅 " οnfοcus="this.value = this.value.lTrim();"/><br/>
<span style="color:red;">String</span>.rTrim
<input class="input_class input_class2" type="text" value=" abc啊以马雅 " οnfοcus="this.value = this.value.rTrim();"/><br/>
<span style="color:red;">String</span>.initialsToUpper
<input class="input_class input_class2" type="text" value=" abc啊以马雅 " οnfοcus="this.value = this.value.trim().initialsToUpper();"/><p>

<span style="color:red;">String</span>.isMobile <input type="text" value="15201114609" οnblur="this.value = this.value.isMobile();"/><br/>
<span style="color:red;">String</span>.isEmail <input type="text" value="wc@wc.com" οnblur="this.value = this.value.isEmail();"/><br/>
<span style="color:red;">String</span>.isPhone <input type="text" value="0312-6716554" οnblur="this.value = this.value.isPhone();"/><br/>
<span style="color:red;">String</span>.isPost <input type="text" value="100000" οnblur="this.value = this.value.isPost();"/><br/>
<span style="color:red;">String</span>.isIdCard <input type="text" value="130628196545863265" οnblur="this.value = this.value.isIdCard();"/><br/>
<span style="color:red;">String</span>.isBank <input type="text" value="1234567890123456" οnblur="this.value = this.value.isBank();"/><br/>
<span style="color:red;">String</span>.isUrl <input type="text" value="www.google.cn" οnblur="this.value = this.value.isUrl();"/><br/>
<span style="color:red;">String</span>.isEmpty <input type="text" value="" οnblur="this.value = this.value.isEmpty();"/><p>

<span style="color:red;">Array</span>.indexOf<br/>
<span style="color:red;">Array</span>.contains<br/>
<span style="color:red;">Array</span>.add<br/>
<span style="color:red;">Array</span>.remove<br/>
<span style="color:red;">Array</span>.unique<p>
</div>

<div id="list_3">
<h2>自定义js</h2>
var map = new Map();<br/>
map.put('a1','铁钉');<br/>
map.size();<br/>
map.get('a1');<br/>
map.get('a2');<br/>
map.toString();<br/>
map.remove('a1');<br/>
map.removeAll();<br/>
</div>

<div id="list_4">
<h2>宽、高属性列表</h2>
<a href="javascript:;" id="" οnclick="alert(document.body.clientWidth);" >document.body.clientWidth</a><br/>
<a href="javascript:;" id="" οnclick="alert(document.body.clientHeight);" >document.body.clientHeight</a><br/>
<a href="javascript:;" id="" οnclick="alert(document.body.offsetWidth);" >document.body.offsetWidth</a><br/>
<a href="javascript:;" id="" οnclick="alert(document.body.offsetHeight);" >document.body.offsetHeight</a><br/>
<a href="javascript:;" id="" οnclick="alert(document.body.scrollWidth);" >document.body.scrollWidth</a><br/>
<a href="javascript:;" id="" οnclick="alert(document.body.scrollHeight);" >document.body.scrollHeight</a><br/>
<a href="javascript:;" id="" οnclick="alert(document.body.scrollLeft);" >document.body.scrollLeft</a><br/>
<a href="javascript:;" id="" οnclick="alert(document.body.scrollTop);" >document.body.scrollTop</a><br/>
<a href="javascript:;" id="" οnclick="alert(window.screenTop);" >window.screenTop</a><br/>
<a href="javascript:;" id="" οnclick="alert(window.screenLeft);" >window.screenLeft</a><br/>
<a href="javascript:;" id="" οnclick="alert(window.screen.width);" >window.screen.width</a><br/>
<a href="javascript:;" id="" οnclick="alert(window.screen.height);" >window.screen.height</a><br/>
<a href="javascript:;" id="" οnclick="alert(window.screen.availWidth);" >window.screen.availWidth</a><br/>
<a href="javascript:;" id="" οnclick="alert(window.screen.availHeight);" >window.screen.availHeight</a><br/>

<a href="javascript:;" id="" οnclick="alert(document.documentElement.clientHeight);" >document.documentElement.clientHeight</a><br/>
<a href="javascript:;" id="" οnclick="alert(document.documentElement.clientWidth);" >document.documentElement.clientWidth</a><br/>
<a href="javascript:;" id="" οnclick="alert(this.clientHeight);" >document.clientHeight</a><br/>
<a href="javascript:;" id="" οnclick="alert(this.clientWidth);" >document.clientWidth</a><br/>
<a href="javascript:;" id="" οnclick="alert(event.screenX);" >event.screenX</a><br/>
<a href="javascript:;" id="" οnclick="alert(event.screenY);" >event.screenY</a><br/>
</div>
<script>
//-------例子：attachEvent-------
var theAttach = document.getElementById("theAttach");
var theDetach = document.getElementById("theDetach");
theAttach.attachEvent("onclick", buttonClicked);
theDetach.attachEvent("onclick", delete_event);
function buttonClicked(e){
  alert("添加某个事件");
}
//-------例子：detachEvent-------
function delete_event(){
  alert("删除某个事件");
  theAttach.detachEvent("onclick",buttonClicked);
}
//-------例子：event.srcElement.fromElement.toElement-------
function event_test(obj){
  alert("event:"+ event +"\n srcElement:"+event.srcElement.innerHTML+"\n fromElement:"+event.fromElement.innerHTML + "\n toElement:"+event.toElement.innerHTML)
}

</script>