Asp.Net Ajax 学习笔记22 使用Microsoft Ajax Library中的浏览器兼容功能

现在市面上流行的浏览器有IE，FireFox, Opera，Safari等等，不同浏览器对于JavaScript的语言特性实现大致相同，但是对于DOM操作方式则大相径庭。 几乎所有的JavaScript框架都提供了浏览器兼容功能 Microsoft AJAX Library自然也不例外。

判断浏览器类型和版本。浏览器兼容层的优势，就是在于使用同样的编码方式，让相同的代码在不同的浏览器下表现统一。但是不同浏览器的某些差异是难以用框架来保证的，或者所有的差异都由框架来保证是不现实的。 因此，提供显示地判断浏览器类型和版本的功能不可或缺。

1.判断浏览器的类型

如果不使用Asp.Net Ajax框架，那么我们一般通过window.navigator.userAgent来判断当前访问页面的浏览器类型。在Asp.Net Ajax框架中我们使用Sys.Browser的属性来判断浏览器类型

Sys.Browser.agent	表示浏览器类型。枚举类型，值分别有Sys.Browser.InternetExplorer,Sys.Browser.FireFox,Sys.Browser.Safari,Sys.Browser.Opera
Sys.Browser.hasDebuggerStatement	是否支持“debugger”命令
Sys.Browser.name	浏览器名称
Sys.Browser.version	浏览器版本

下面是一根据浏览器的类型得到显示窗口大小的经典例子


function getClientBounds()




...{


var clientWidth;


var clientHeight;




switch (Sys.Browser.agent)




...{


case Sys.Browser.InternetExplorer:


clientWidth = document.compatMode == "CSS1Compat" ?


document.documentElement.clientWidth : document.body.clientWidth;


clientHeight = document.compatMode == "CSS1Compat" ?


document.documentElement.clientHeight : document.body.clientHeight;


break;


case Sys.Browser.Safari:


clientWidth = window.innerWidth;


clientHeight = window.innerHeight;


break;


case Sys.Browser.Opera:


clientWidth = Math.min(window.innerWidth, document.body.clientWidth);


clientHeight = Math.min(window.innerHeight, document.body.clientHeight);


break;


default: // FireFox, etc.


clientWidth = Math.min(window.innerWidth, document.documentElement.clientWidth);


clientHeight = Math.min(window.innerHeight, document.documentElement.clientHeight);


break;


}






return ...{width: clientWidth, height: clientHeight};


}

从上面的例子可以看到，每种浏览器得到窗口的dom对象都不一样，基于浏览器兼容模式的开发困难点就在这里，我们不可能把所有的浏览器都考虑到，但是每种浏览器的dom对象原型都是不一样的。但Asp.Net Ajax帮我们封装了一部分。

2.针对dom元素的兼容操作

Sys.UI.DomElement静态类

在进行js开发的时候，我们会用到$get根据元素的id得到一个dom元素，这个符号是Sys.UI.DomElement.getElementById的缩写，不是js里面的document.getElementById方法的缩写。这个方法有两个参数，第一个是元素的id，第二个是元素的容器id。一般在一个dom中是不允许有两个相同id的元素。如果有我们通过documentById方法只能找到一个，那么可以根据元素所在的容器id来得到这个元素。

addCssClass(element,CssName)	给一个元素指定一个样式，CssName代表样式的名称
removeCssClass(element,CssName)	从一个元素上移除样式
containsCssClass(element,CssName)	判断一个元素是否指定了一个样式
toggleCssClass(element,CssName)	如果元素已经指定了样式，调用这个方法将移去样式，否则指定这样样式
getLocation(element)	得到元素的在页面上的位置，返回Sys.UI.Point类型对象
setLocation(element,x,y)	设置元素在页面上的位置
getBounds(element)	得到元素在页面上的文职，并且包含元素的长、宽信息。返回Sys.UI.Bounds类型对象

我们可以在使用这些函数之前用$符号来组成缩写词，如


$addCss = Sys.UI.DomElement.addCssClass

那么我们在后面使用Sys.UI.DomElement.addCssClass方法的时候可以直接使用$addCss来代替。

3.针对DOM事件的兼容操作

仅仅比较IE和FireFox，DOM事件的操作也大相径庭。 添加和删除event handler的方法不同； 获取Event对象的方法不同； Event对象的方法和属性不同。

在Asp.Net Ajax框架中提供了一套Dom事件兼容操作。

添加Event Handler：

$addHandler(element, eventName, handler) 给dom元素的事件添加一个事件处理器
注：eventName是没有“on”的，与我们平时写js代码不一样。我们平时写一个button的click事件为


<input type="button" id="button1" onclick="myFunction()" />

或使用js动态的添加事件，下例给出了在IE中和firefox中附件事件处理器和添加事件处理器，并且在兼容处理的方式


var button = document.getElementById("aButton");




// cannot get the event object in different browsers




button.onclick = function() ...{ /**//* .. */ };




// get the event object in different browsers


function eventHandler(e)




...{


// event object has different members


var element = e.srcElement | e.target;


}




// IE only


button.attachEvent("onclick", eventHandler);


button.detachEvent("onclick", eventHandler);




// FireFox


button.addEventListener("click", eventHandler);


button.removeEventListener("click", eventHandler);




// both browsers


if (button.attachEvent)




...{


button.attachEvent("onclick", eventHandler);


}


else




...{


button.addEventListener("click", eventHandler);


}

这两种方式一个兼容性不好，一个处理起来需要考虑的浏览器类型太多。在Asp.Net Ajax框架中我们使用如下方式添加事件


$addHandler($get("mouseEvent"), "mousedown", onMouseDown);



$addHandlers(element, events, owner)
• events为一个存放Event Handler的字典，这个字典应该是事件名作为key，handler作为value
• Owner为执行Event Handler的上下文对象

去除Event Handler：
$removeHandler(element, eventName, handler)
$removeHandlers(element);

在dom元素触发事件时，会将一个Sys.UI.DomEvent类的对象传递到事件处理器中，如下例


function onMouseDown(e)




...{


$get("displayMouseEvent").innerHTML = String.format(


"altKey: {0} <br />" +


"ctrlKey: {1} <br />" +


"shitKey: {2} <br />" +


"clientX & Y: ({3}, {4}) <br />" +


"screenX & Y: ({5}, {6}) <br />" +


"offsetX & Y: ({7}, {8}) <br />" +


"button: {9}",


e.altKey, e.ctrlKey, e.shiftKey,


e.clientX, e.clientY,


e.screenX, e.screenY,


e.offsetX, e.offsetY,


Sys.UI.MouseButton.toString(e.button));


}

那么DomEvent对象有一些属性和方法，说明如下

preventDefault()	阻止事件默认行为
stopPropagation()	阻断事件向上传递，就是阻止事件冒泡传递至父元素
altKey / ctrlKey / shiftKey	触发事件时用户是否按着Alt / Ctrl / Shift键
type	一个表示事件类型的字符串
target	触发事件的DOM元素
button	一个Sys.UI.MouseButton的枚举值，表明触发事件时鼠标按的是左中右键的哪一个
keyCode	一个表示当年按键的整数值，可以和Sys.UI.Key枚举的项找到对应关系
clientX & clientY	鼠标在document可是范围内的位置（和滚动条状态无关）
screenX & screenY	鼠标在屏幕中的位置
offsetX & offsetY	鼠标在触发事件的对象中的相对位置
rawEvent	浏览器的原生事件对象

这里说明一下阻止事件冒泡传递至父元素，例如一个div里面包了一个图片，图片和div都有onClick事件。这时候当你点击图片的时候，不仅会触发图片的onClick事件，而且点击事件会冒泡，同时会触发div的onClick事件。这个就是javascropt的事件冒泡。使用dom编程利用下面代码阻止事件冒泡传递


window.event.cancelBubble = true;// 释放这句话，事件就不能向上冒泡了(only for IE)

阻止执行默认的事件处理函数。例如一个超链接。它的点击事件就是打开链接，这个打开链接的事件是默认的。现在你为超链添加了click事件。这时候，你再点击超链接，它会先后做两件事情：执行你的click事件，然后打开链接。但是我们如果只想让它执行click事件，而不想让它打开链接，那么就用这个函数