您好,欢迎访问一九零五行业门户网

javascript浏览器兼容教程之事件处理_基础知识

1. window.event
【分析说明】先看一段代码
复制代码 代码如下:
function et()
{
alert(event);//ie: [object]
}
以上代码在ie运行的结果是[object],而在firefox无法运行。
因为在ie中event作为window对象的一个属性可以直接使用,但是在firefox中却使用了w3c的模型,它是通过传参的方法来传播事件的,也就是说你需要为你的函数提供一个事件响应的接口。
【兼容处理】添加对event判断,根据浏览器的不同来得到正确的event:
复制代码 代码如下:
function et()
{
evt=evt?evt:(window.event?window.event:null);
//兼容ie和firefox
alert(evt);
}
2. 键盘值的取得
【分析说明】ie和firefox获取键盘值的方法不同,可以理解,firefox下的event.which与ie下的event.keycode相当。关于彼此不同,可参考《键盘事件中keycode、which和charcode 的兼容性测试》
【兼容处理】
复制代码
复制代码 代码如下:
function mykeypress(evt){
//兼容ie和firefox获得keyboardevent对象
evt = (evt) ? evt : ((window.event) ? window.event : )
//兼容ie和firefox获得keyboardevent对象的键值
var key = evt.keycode?evt.keycode:evt.which;
if(evt.ctrlkey && (key == 13 || key == 10)){
//同时按下了ctrl和回车键
//do something;
}
}
3. 事件源的获取
【分析说明】在使用事件委托的时候,通过事件源获取来判断事件到底来自哪个元素,但是,在ie下,event对象有srcelement属性,但是没有target属性;firefox下,even对象有target属性,但是没有srcelement属性。
【兼容处理】
复制代码 代码如下:
ele=function(evt){ //捕获当前事件作用的对象
evt=evt||window.event;
return
(obj=event.srcelement?event.srcelement:event.target;);
}
4. 事件监听
【分析说明】在事件监听处理方面,ie提供了attachevent和detachevent两个接口,而firefox提供的是addeventlistener和removeeventlistener。
【兼容处理】最简单的兼容性处理就是封装这两套接口:
复制代码 代码如下:
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);
}
其它类似信息

推荐信息