Javascript的事件处理模型依据不同的浏览器而有所区别,主要分两种:
1.Firefox,Chrome,Safira支持的DOM Level 2事件模型;
2.IE自己的事件处理模型。
而 DOM Level 0 则是所有浏览器都支持的事件机制,但是在IE以及其它支持DOM Level 2的浏览器中,表现仍然有不同。以下代码在IE6,Firefox 3.0中运行通过。
[size=large][b]一。DOM Level 0的事件模型:[/b][/size]
1.事件的注册方式为使用 on + 事件名=function(){};
2.事件的移除方式为 on + 事件名 = null;
3.处理函数中,this 指向目标对象本身;
4.同一个事件只支持一个处理函数;
5.浏览器差别:
(1)在FF中,事件本身会作为参数传递给处理函数;
(2)在IE中,事件是作为window的一个变量存在,处理函数里面可以通过window.event访问;
(3)event对象所具有的属性随浏览器的不同而不同:IE拥有自己的事件属性,其它浏览器则使用DOM Level 2的事件属性
[size=large][b]二。DOM Level 2 的事件模型[/b][/size]
1.支持捕获阶段和冒泡阶段的事件处理。 事件流程如下图:
[img]http://dl.iteye.com/upload/attachment/264346/feddfcfa-699d-3050-95ba-966481a9b76c.gif[/img]
2.事件的注册、移除分别使用addEventListener和removeEventListener
3.尽管目标对象处在冒泡阶段,但是它的eventPhase值为2。
4.取消事件的进一步传递,可以在任一阶段使用
event.stopPropagation();
5.通过 addEventListener方法添加的事件,只能通过removeEventListener进行消除,也就是说,不能通过on + 事件名取消
6.支持对同一事件注册多个事件函数;
7.removeEventListener不能消除匿名事件函数。
8.事件本身将作为参数传递给处理函数。
9.在事件处理函数里面,this 恒等于属性currentTarget,target则指向触发事件的最终对象.
10.常用事件对象属性列表:
[img]http://dl.iteye.com/upload/attachment/264344/8de67c62-3e4e-3480-a4b3-31c1e4db9a93.jpg[/img]
[size=large][b]三。IE的事件模型[/b][/size]
1.IE仅支持冒泡阶段的事件处理;
2.事件的注册、移除分别使用attachEvent和detachEvent;
3.处理函数的作用域为window。
4.取消事件的进一步传递,可以使用
[window.]event.cancelBubble = true;
5.常用事件对象属性列表:
[img]http://dl.iteye.com/upload/attachment/264350/43851a98-3f5a-3925-91bc-7768834cff91.jpg[/img]
[size=large][b]四。由于事件模型的不同,我们使用以下简单代码,用于跨浏览器的处理。[/b][/size]
一个简单的使用例子:
[size=large][b]五。以下是常用事件对象的小结[/b][/size]
1.获取事件触发的位置
2.判断是否同时有辅助键按下:
3.关于鼠标事件:
3.1 对于mouseout以及mouseover事件,事件发生的时候,可以获取到"相关联的对象"。
例如下面的代码:
当鼠标从myDiv移动到其它区域(body),mouseout事件触发,那么,相关联的对象就是 body.
当鼠标从其它区域(body)移动到myDiv,mouseover事件触发,那么,相关联的对象就是myDiv.
对于支持 DOM Level 2的浏览器,事件的相关联对象可以从 relatedTarget属性获得;IE则是通过fromElement,toElement来获取。
3.2 对于mousedown和mouseup事件,触发时候,可以获取到button属性。对于支持DOM Level2模型的浏览器,button的取值为:0:左键;1:中键(滚轮);2:右键
对于IE,有自己的许多取值,具体含义如下:
[img]http://dl.iteye.com/upload/attachment/264348/5502c14d-88ed-34db-8517-d9189542c4f7.jpg[/img]
通常,我们只需要区别是鼠标的哪一个按键就已经足够了。
整合以后的代码见EventUtil。
4.键盘事件
4.1 键盘支持3种事件:
keydown:当任一按键被按下的时候;
keypress:当任一字符按键按下的时候(也包括Esc按键);
keyup:当任一按键松开的时候;
4.2 如果一个字符按键一直被按下,那么keydown、keyress事件将重复触发;
如果是一个非字符按键一直被按下,那么keydown事件将重复触发。
通常,keydown、kepress事件将在输入框内容变化之前触发,keyup将在输入框内容变化之后触发。
这也就说明,我们可以在keydown或者keyress事件处理中取消其向后传递,从而实现屏蔽掉一些字符的输入。
键盘上的keyCode的值如下表,对于数字和字母根据ASCII表取值。
[img]http://dl.iteye.com/upload/attachment/264354/e54ac020-dbad-36f8-9cce-8cf02e7ed3e1.jpg[/img]
[img]http://dl.iteye.com/upload/attachment/264356/a385f798-bb66-386e-b6f6-af3a3184e69e.jpg[/img]
[i]注意:[/i]
对于keydown和keyup事件,字母(A~Z)的charCode取值为0,keyCode则是字母(大写)的ASCII值。例如 a 与 A的keyCode相同。
另外,对于分号 ';'Firefox与Safira返回其在ASCII码表里面的值59;IE,Chrome则返回值186。
4.3 当keypress事件触发时候,对于Firefox,Chrome,Safari,通过event的一个属性charCode来获取(此时keyCode值为0),IE和Opera则使用keyCode。
获取到keyCode以后,则可以通过String.fromCharCode()来获取字符
4.4 keydown(keyup)事件触发的时候与 keypress有所不同。
整理自《Professional.JavaScript.for.Web.Developers.2nd.Edition》,有修改。
1.Firefox,Chrome,Safira支持的DOM Level 2事件模型;
2.IE自己的事件处理模型。
而 DOM Level 0 则是所有浏览器都支持的事件机制,但是在IE以及其它支持DOM Level 2的浏览器中,表现仍然有不同。以下代码在IE6,Firefox 3.0中运行通过。
[size=large][b]一。DOM Level 0的事件模型:[/b][/size]
1.事件的注册方式为使用 on + 事件名=function(){};
2.事件的移除方式为 on + 事件名 = null;
3.处理函数中,this 指向目标对象本身;
4.同一个事件只支持一个处理函数;
5.浏览器差别:
(1)在FF中,事件本身会作为参数传递给处理函数;
(2)在IE中,事件是作为window的一个变量存在,处理函数里面可以通过window.event访问;
(3)event对象所具有的属性随浏览器的不同而不同:IE拥有自己的事件属性,其它浏览器则使用DOM Level 2的事件属性
var btn = document.getElementById('btn');
btn.onclick=function(e){
//FF中的输出:[object MouseEvent],undefined
//IE中的输出:undefined,object
alert(e);
alert(window.event);
alert(this == btn);//true
}
//事件的移除
btn.onclick = null;
[size=large][b]二。DOM Level 2 的事件模型[/b][/size]
1.支持捕获阶段和冒泡阶段的事件处理。 事件流程如下图:
[img]http://dl.iteye.com/upload/attachment/264346/feddfcfa-699d-3050-95ba-966481a9b76c.gif[/img]
2.事件的注册、移除分别使用addEventListener和removeEventListener
/* HTML 片段
<button id='btn'>go</button>
*/
var btn = document.getElementById('btn');
//addEventListener的第三个参数设置为 true,则侦听器只在捕获阶段处理事件,
//如果为false,则侦听器只在目标或冒泡阶段处理事件。
btn.addEventListener('click',function(event){
alert(event.eventPhase);//2
},false);
document.body.addEventListener('click',function(event){
alert('document.body.addEventListener: True:' + event.eventPhase);//1
},true);
document.body.addEventListener('click',function(event){
alert('document.body.addEventListener: ' + event.eventPhase);//3
},false);
3.尽管目标对象处在冒泡阶段,但是它的eventPhase值为2。
4.取消事件的进一步传递,可以在任一阶段使用
event.stopPropagation();
5.通过 addEventListener方法添加的事件,只能通过removeEventListener进行消除,也就是说,不能通过on + 事件名取消
6.支持对同一事件注册多个事件函数;
7.removeEventListener不能消除匿名事件函数。
btn.removeEventListener('click', function(){ //won ’ t work!
alert(this.id);
}, false);
var handler = function(){
alert(this.id);
};
btn.addEventListener('click', handler, false);
//other code here
btn.removeEventListener('click', handler, false); //works!
8.事件本身将作为参数传递给处理函数。
9.在事件处理函数里面,this 恒等于属性currentTarget,target则指向触发事件的最终对象.
//当body中的一个button被单击的时候
document.body.addEventListener('click',function(event){
alert(event.currentTarget === document.body); //true
alert(this === document.body); //true
alert(event.target === document.getElementById('btn')); //true
},false);
10.常用事件对象属性列表:
[img]http://dl.iteye.com/upload/attachment/264344/8de67c62-3e4e-3480-a4b3-31c1e4db9a93.jpg[/img]
[size=large][b]三。IE的事件模型[/b][/size]
1.IE仅支持冒泡阶段的事件处理;
2.事件的注册、移除分别使用attachEvent和detachEvent;
3.处理函数的作用域为window。
btn.attachEvent('onclick',function(event){
alert(event.type);//"click"
alert(this === window); //true
alert(window.event.type);//"click"
});
4.取消事件的进一步传递,可以使用
[window.]event.cancelBubble = true;
5.常用事件对象属性列表:
[img]http://dl.iteye.com/upload/attachment/264350/43851a98-3f5a-3925-91bc-7768834cff91.jpg[/img]
[size=large][b]四。由于事件模型的不同,我们使用以下简单代码,用于跨浏览器的处理。[/b][/size]
var EventUtil = {
addHandler: function(element, type, handler){
if (element.addEventListener){
element.addEventListener(type, handler, false);
} else if (element.attachEvent){
element.attachEvent('on' + type, handler);
} else {
element['on' + type] = handler;
}
},
removeHandler: function(element, type, handler){
if (element.removeEventListener){
element.removeEventListener(type, handler, false);
}
else if (element.detachEvent){
element.detachEvent('on' + type, handler);
}
else {
element['on' + type] = null;
}
},
getEvent: function(event){
return event ? event : window.event;
},
getTarget: function(event){
return event.target || event.srcElement;
},
preventDefault: function(event){
if (event.preventDefault){
event.preventDefault();
} else {
event.returnValue = false;
}
},
stopPropagation: function(event){
if (event.stopPropagation){
event.stopPropagation();
} else {
event.cancelBubble = true;
}
},
getRelatedTarget: function(event){
if (event.relatedTarget){
return event.relatedTarget;
} else if (event.toElement){
return event.toElement;
} else if (event.fromElement){
return event.fromElement;
} else {
return null;
}
},
getButton: function(event){
if (document.implementation.hasFeature('MouseEvents', '2.0')){
return event.button;
}
else {
switch(event.button){
case 0:
case 1:
case 3:
case 5:
case 7:
return 0;
case 2:
case 6:
return 2;
case 4:
return 1;
}
}
},
getCharCode: function(event){
if (typeof event.charCode == 'number' && event.charCode > 0){
return event.charCode;
}
else {
return event.keyCode;
}
}
};
一个简单的使用例子:
var btn = document.getElementById('myBtn');
var handler = function(){
alert('Clicked');
};
EventUtil.addHandler(btn, 'click', handler);
//other code here
EventUtil.removeHandler(btn, 'click', handler);
[size=large][b]五。以下是常用事件对象的小结[/b][/size]
1.获取事件触发的位置
//相对于页面的横向(从左到右)、纵向(从上到下)坐标
clientX,clientY
//相对于显示屏幕的横向(从左到右)、纵向(从上到下)坐标
screenX,screenY
2.判断是否同时有辅助键按下:
var div = document.getElementById('myDiv');
EventUtil.addHandler(div, 'click', function(event){
event = EventUtil.getEvent(event);
var keys = new Array();
if (event.shiftKey){
keys.push('shift');
}
if (event.ctrlKey){
keys.push('ctrl');
}
if (event.altKey){
keys.push('alt');
}
//IE不支持
if (event.metaKey){
keys.push('meta');
}
alert('Keys: ' + keys.join(','));
});
3.关于鼠标事件:
3.1 对于mouseout以及mouseover事件,事件发生的时候,可以获取到"相关联的对象"。
例如下面的代码:
< html >
< head >
< title > Related Elements Example < /title >
< /head >
< body >
< div id='myDiv' style='background-color:red;height:100px;width:100px;' > < /div >
< /body >
< /html>
当鼠标从myDiv移动到其它区域(body),mouseout事件触发,那么,相关联的对象就是 body.
当鼠标从其它区域(body)移动到myDiv,mouseover事件触发,那么,相关联的对象就是myDiv.
对于支持 DOM Level 2的浏览器,事件的相关联对象可以从 relatedTarget属性获得;IE则是通过fromElement,toElement来获取。
var div = document.getElementById('myDiv');
EventUtil.addHandler(div, 'mouseout', function(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
var relatedTarget = EventUtil.getRelatedTarget(event);
alert('Moused out of ' + target.tagName + ' to ' + relatedTarget.tagName);
});
3.2 对于mousedown和mouseup事件,触发时候,可以获取到button属性。对于支持DOM Level2模型的浏览器,button的取值为:0:左键;1:中键(滚轮);2:右键
对于IE,有自己的许多取值,具体含义如下:
[img]http://dl.iteye.com/upload/attachment/264348/5502c14d-88ed-34db-8517-d9189542c4f7.jpg[/img]
通常,我们只需要区别是鼠标的哪一个按键就已经足够了。
整合以后的代码见EventUtil。
4.键盘事件
4.1 键盘支持3种事件:
keydown:当任一按键被按下的时候;
keypress:当任一字符按键按下的时候(也包括Esc按键);
keyup:当任一按键松开的时候;
4.2 如果一个字符按键一直被按下,那么keydown、keyress事件将重复触发;
如果是一个非字符按键一直被按下,那么keydown事件将重复触发。
通常,keydown、kepress事件将在输入框内容变化之前触发,keyup将在输入框内容变化之后触发。
这也就说明,我们可以在keydown或者keyress事件处理中取消其向后传递,从而实现屏蔽掉一些字符的输入。
键盘上的keyCode的值如下表,对于数字和字母根据ASCII表取值。
[img]http://dl.iteye.com/upload/attachment/264354/e54ac020-dbad-36f8-9cce-8cf02e7ed3e1.jpg[/img]
[img]http://dl.iteye.com/upload/attachment/264356/a385f798-bb66-386e-b6f6-af3a3184e69e.jpg[/img]
[i]注意:[/i]
对于keydown和keyup事件,字母(A~Z)的charCode取值为0,keyCode则是字母(大写)的ASCII值。例如 a 与 A的keyCode相同。
另外,对于分号 ';'Firefox与Safira返回其在ASCII码表里面的值59;IE,Chrome则返回值186。
4.3 当keypress事件触发时候,对于Firefox,Chrome,Safari,通过event的一个属性charCode来获取(此时keyCode值为0),IE和Opera则使用keyCode。
获取到keyCode以后,则可以通过String.fromCharCode()来获取字符
//只允许退格键和数字输入
var textbox = document.getElementById('myText');
EventUtil.addHandler(textbox, 'keypress', function(event){
event = EventUtil.getEvent(event);
/*直接通过event.keyCode返回数字。即字母在ASCII表值。区分大小写。
ff 与 chrome都是返回0.
如果在ff与chrome中返回 event.charCode,将是字母在ASCII表值。区分大小写。*/
var code = EventUtil.getCharCode(event);
//alert(code);
var ch = String.fromCharCode(code);
//alert('Unicode:' + ch);
if(ch != 8 && (ch < '0' || ch > '9')){
EventUtil.preventDefault(event);
}
});
[/size]
4.4 keydown(keyup)事件触发的时候与 keypress有所不同。
EventUtil.addHandler(btn, 'keyup', function(event){
event = EventUtil.getEvent(event);
/*直接通过event.keyCode返回数字,字符A与字符a都返回65,即字母都是ASCII表对应的大写字母的值。
如果在ff与chrome中返回 event.charCode,同样不区分大小写。值为大写字母的值 。*/
var code = EventUtil.getCharCode(event);
alert(code);
var ch = String.fromCharCode(code);
alert(ch);
});
整理自《Professional.JavaScript.for.Web.Developers.2nd.Edition》,有修改。