function addEvent(elem, eventName, handler) {
if (elem.attachEvent) {
elem.attachEvent("on" + eventName, function(){
handler.call(elem)});
//此处使用回调函数call()，让this指向elem
} else if (elem.addEventListener) {
elem.addEventListener(eventName, handler, false);
}
}
function removeEvent(elem, eventName, handler) {
if (elem.detachEvent) {
elem.detachEvent("on" + eventName, function(){
handler.call(elem)});
//此处使用回调函数call()，让this指向elem
} else if (elem.removeEventListener) {
elem.removeEventListener(eventName, handler, false);
}
}
需要特别注意，Firefox下，事件处理函数中的this指向被监听元素本身，而在IE下则不然,可使用回调函数call，让当前上下文指向监听的元素。
5. 鼠标位置
【分析说明】IE下，even对象有x，y属性，但是没有pageX，pageY属性；Firefox下，even对象有pageX，pageY属性，但是没有x，y属性。
【兼容处理】使用mX(mX = event.x ? event.x : event.pageX;)来代替IE下的event.x或者Firefox下的event.pageX。复杂点还要考虑绝对位置
复制代码 代码如下:
function getAbsPoint(e){
var x = e.offsetLeft, y = e.offsetTop;
while (e = e.offsetParent) {
x += e.offsetLeft;
y += e.offsetTop;
}
alert("x:" + x + "," + "y:" + y);
}
五、其他差异的兼容处理
1. XMLHttpRequest
【分析说明】new ActiveXObject("Microsoft.XMLHTTP");只在IE中起作用，Firefox不支持，但支持XMLHttpRequest。
【兼容处理】
复制代码 代码如下:
function createXHR() {
var xhr=null;
if(window.XMLHttpRequest){
xhr=new ActiveXObject("Msxml2.XMLHTTP");
}else{
try {
xhr=new ActiveXObject("Microsoft.XMLHTTP");
}
catch() {
xhr=null;
}
}
if(!xhr)return;
return xhr;
}
2. 模态和非模态窗口
【分析说明】IE中可以通过showModalDialog和showModelessDialog打开模态和非模态窗口，但是Firefox不支持。
【解决办法】直接使用window.open(pageURL,name,parameters)方式打开新窗口。 如果需要传递参数，可以使用frame或者iframe。
3. input.type属性问题
IE下 input.type属性为只读，但是Firefox下可以修改
4. 对select元素的option操作
设置options，IE和Firefox写法不同：
Firefox:可直接设置
复制代码 代码如下:
option.text = 'foooooooo';
IE:只能设置
复制代码 代码如下:
option.innerHTML = 'fooooooo';
删除一个select的option的方法：
Firefox:可以
复制代码 代码如下:
select.options.remove(selectedIndex);
IE7:可以用
复制代码 代码如下:
select.options[i] = null;
IE6:需要写
复制代码 代码如下:
select.options[i].outerHTML = null;
5. img对象alt和title的解析
【分析说明】img对象有alt和title两个属性，区别在于，alt：当照片不存在或者load错误时的提示。
title：照片的tip说明, 在IE中如果没有定义title，alt也可以作为img的tip使用，但是在Firefox中，两者完全按照标准中的定义使用
在定义img对象时。
【兼容处理】最好将alt和title对象都写全，保证在各种浏览器中都能正常使用 。
6. img的src刷新问题
【分析说明】先看一下代码：
复制代码 代码如下:
<img onclick= "this.src= 'a.jpg'" src="https://www.jb51.net/article/aa.jpg"/>
在IE 下，这段代码可以用来刷新图片，但在FireFox下不行。主要是缓存问题。
【兼容处理】在地址后面加个随机数就解决了:
复制代码 代码如下:
<img onclick= "javascript:this.src=this.src+'?'+Math.random()"src="a.jpg"/>
总结