自己总结的浏览器兼容性方法
<!-- -->
<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);
}
function __window_event_constructor(){
if(document.all){
return window.event;
}
var _caller = __window_event_constructor.caller;
while(_caller!=null){
var _argument = _caller.arguments[0];
if(_argument){
var _temp = _argument.constructor;
if(_temp.toString().indexOf("Event")!=-1){
return _argument;
}
}
_caller = _caller.caller;
}
return null;
}
//iframe-通过传入一个iframe参数，设置为可编缉iframe
function editable(obj,isflag){
var editor = obj;
editor = editor.contentWindow;
//editor.document.body.contentEditable = true;
editor.document.designMode=isflag;
}
//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.onclick=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>
<style>
a:visited{text-decoration:none; color:#4782C8;}
a:link{text-decoration: none; color:#4782C8;}
a:hover{text-decoration:underline; color:#F69127;}
a:active{text-decoration:none; color:#4782C8;}
#list_1{position:absolute;left:1%;top:60px;}
#list_2{position:absolute;left:26%;top:60px;}
#list_3{position:absolute;left:55%;top:60px;}
#list_4{position:absolute;left:75%;top:60px;}
</style>
<div id="list_1">
<h2>兼容js</h2>
<a href="javascript:;" onclick="alert(window.event);">event</a><br/>
<a href="javascript:;" onclick="alert('x:'+event.x+'\ny:'+event.y);">event.x,event.y</a><br/>
<a href="javascript:;" onclick="alert(event.srcElement.id);">event.srcElement.id</a><br/>
<a href="javascript:;" onclick="alert('x:'+event.clientX+'\ny:'+event.clientY);">event.clientX,event.clientY</a><br/>
<a href="javascript:;" onclick="alert('offsetX:'+event.offsetX+'\noffsetY:'+event.offsetY);">event.offsetX,event.offsetY</a><p>
<a href="javascript:;" onclick="alert(this.runtimeStyle);">HTMLElement.runtimeStyle</a><br/>
<a href="javascript:;" onclick="alert(this.canHaveChildren);">HTMLElement.canHaveChildren</a><br/>
<a href="javascript:;" onclick="alert(this.outerHTML);">HTMLElement.outerHTML</a><br/>
<a href="javascript:;" onclick="alert(this.innerText);">HTMLElement.innerText</a><br/>
<a href="javascript:;" onclick="alert(this.currentStyle);">HTMLElement.currentStyle</a><br/>
<a href="javascript:;" onclick="alert(this.all);">HTMLElement.all</a><br/>
<a href="javascript:;" onclick="alert(this.parentElement);">HTMLElement.parentElement</a><br/>
<a href="javascript:;" onclick="alert(this.children);">HTMLElement.children</a><br/>
<a href="javascript:;" onclick="alert(this.outerText);">HTMLElement.outerText</a><br/>
<a href="javascript:;" onclick="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:;" onclick="javascritp:this.insertAdjacentElement('beforeBegin',document.createElement('input'));">HTMLElement.insertAdjacentElement</a><br/>
<a href="javascript:;" onclick="javascritp:this.insertAdjacentHTML('beforeBegin','<font color=\'blue\'>html标签</font>');">HTMLElement.insertAdjacentHTML</a><br/>
<a href="javascript:;" onclick="javascritp:this.insertAdjacentText('beforeBegin','插一段文本');">HTMLElement.insertAdjacentText</a><p>
<a href="javascript:;" id="node_1" onclick="removeNode(this);">Node.removeNode(Node)</a><br/>
<a href="javascript:;" onclick="replaceNode(document.createElement('input'))">Node.replaceNode(Node)</a><br/>
<a href="javascript:;" id="node_3" onclick="javascript:this.swapNode(document.getElementById('node_1'));" >Node.swapNode(Node)</a><br/>
<button onmouseout="event_test(this)">MouseOut</button><button onmouseover="event_test(this)">MouseOver</button><p>
editable(this,'on/off')<br/>
<iframe id="editor" src="about:blank" width="200" height="50" scrolling="auto" onload="editable(this,'on');" ></iframe><p>
autoheight(this)<br/>
<iframe id="iframe_id" src="top.html" width="200" scrolling="no" onload="autoheight(this);" ></iframe><br/>
</div>
<div id="list_2">
<h2>扩展js</h2>
<a href="javascript:;" class="a_class" onclick="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啊 以 马 雅 " onfocus="this.value = this.value.trim();"/><br/>
<span style="color:red;">String</span>.lTrim
<input class="input_class input_class2" type="text" value=" abc啊 以 马 雅 " onfocus="this.value = this.value.lTrim();"/><br/>
<span style="color:red;">String</span>.rTrim
<input class="input_class input_class2" type="text" value=" abc啊 以 马 雅 " onfocus="this.value = this.value.rTrim();"/><br/>
<span style="color:red;">String</span>.initialsToUpper
<input class="input_class input_class2" type="text" value=" abc啊 以 马 雅 " onfocus="this.value = this.value.trim().initialsToUpper();"/><p>
<span style="color:red;">String</span>.isMobile <input type="text" value="15201114609" onblur="this.value = this.value.isMobile();"/><br/>
<span style="color:red;">String</span>.isEmail <input type="text" value="[email protected]" onblur="this.value = this.value.isEmail();"/><br/>
<span style="color:red;">String</span>.isPhone <input type="text" value="0312-6716554" onblur="this.value = this.value.isPhone();"/><br/>
<span style="color:red;">String</span>.isPost <input type="text" value="100000" onblur="this.value = this.value.isPost();"/><br/>
<span style="color:red;">String</span>.isIdCard <input type="text" value="130628196545863265" onblur="this.value = this.value.isIdCard();"/><br/>
<span style="color:red;">String</span>.isBank <input type="text" value="1234567890123456" onblur="this.value = this.value.isBank();"/><br/>
<span style="color:red;">String</span>.isUrl <input type="text" value="www.google.cn" onblur="this.value = this.value.isUrl();"/><br/>
<span style="color:red;">String</span>.isEmpty <input type="text" value="" onblur="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="" onclick="alert(document.body.clientWidth);" >document.body.clientWidth</a><br/>
<a href="javascript:;" id="" onclick="alert(document.body.clientHeight);" >document.body.clientHeight</a><br/>
<a href="javascript:;" id="" onclick="alert(document.body.offsetWidth);" >document.body.offsetWidth</a><br/>
<a href="javascript:;" id="" onclick="alert(document.body.offsetHeight);" >document.body.offsetHeight</a><br/>
<a href="javascript:;" id="" onclick="alert(document.body.scrollWidth);" >document.body.scrollWidth</a><br/>
<a href="javascript:;" id="" onclick="alert(document.body.scrollHeight);" >document.body.scrollHeight</a><br/>
<a href="javascript:;" id="" onclick="alert(document.body.scrollLeft);" >document.body.scrollLeft</a><br/>
<a href="javascript:;" id="" onclick="alert(document.body.scrollTop);" >document.body.scrollTop</a><br/>
<a href="javascript:;" id="" onclick="alert(window.screenTop);" >window.screenTop</a><br/>
<a href="javascript:;" id="" onclick="alert(window.screenLeft);" >window.screenLeft</a><br/>
<a href="javascript:;" id="" onclick="alert(window.screen.width);" >window.screen.width</a><br/>
<a href="javascript:;" id="" onclick="alert(window.screen.height);" >window.screen.height</a><br/>
<a href="javascript:;" id="" onclick="alert(window.screen.availWidth);" >window.screen.availWidth</a><br/>
<a href="javascript:;" id="" onclick="alert(window.screen.availHeight);" >window.screen.availHeight</a><br/>
<a href="javascript:;" id="" onclick="alert(document.documentElement.clientHeight);" >document.documentElement.clientHeight</a><br/>
<a href="javascript:;" id="" onclick="alert(document.documentElement.clientWidth);" >document.documentElement.clientWidth</a><br/>
<a href="javascript:;" id="" onclick="alert(this.clientHeight);" >document.clientHeight</a><br/>
<a href="javascript:;" id="" onclick="alert(this.clientWidth);" >document.clientWidth</a><br/>
<a href="javascript:;" id="" onclick="alert(event.screenX);" >event.screenX</a><br/>
<a href="javascript:;" id="" onclick="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>
</body>
</html>