事件是可以被 JavaScript 侦测到的行为,使我们有能力创建动态页面。
事件举例:
鼠标点击
页面或图像载入
鼠标悬浮于页面的某个热点之上
在表单中选取输入框
确认表单
键盘按键
注意:事件通常与函数配合使用,当事件发生时函数才会执行。
1.事件获取
事件处理中IE未遵循W3C标准,IE中事件使用全局对象 window.event ,其他现代浏览器通过参数传入。
οnclick=function(e){
e=e||window.event;
}
2.阻止事件冒泡
function stopBubble(e){
if(e&&e.stopPropagation){
e.stopPropagation();
}else{
window.event.cancelBubble=true;
}
}
3.阻止事件默认动作
function stopDefault(e){
if(e&&e.preventDefault){
e.preventDefault();
}else{
window.event.returnValue=false;
}
return false;
}
4.绑定事件监听函数
(1)传统方式
优点:
1.简单稳定且兼容性强。
2.事件处理时,this引用的是当前元素。
缺点:
1.只在事件冒泡中运行,而非捕获和冒泡。
2.只能绑定一个函数,否则会覆盖上一个。
3.事件对象参数在IE下不可用。
示例:
form.οnsubmit=function(e){return stopDefault(e)};
document.body.οnkeypress=myKeyPressHandler;
window.οnlοad=function(){};
(2)DOM绑定(W3C)
优点:
1.同时支持捕获和冒泡。addEventListener的第三个参数:false(冒泡),true(捕获)。
2.事件处理时,this引用的是当前元素。
3.事件总是能通过第一个参数得到。
4.支持同一元素绑定多个事件而不冲突。
缺点:
1.IE不支持(IE使用attachEvent)。
示例:
window. addEventListener('load',function(e){},false);//false禁用事件捕获
(3)DOM绑定(IE)
优点:
1.支持同一元素绑定多个事件而不冲突。
缺点:
1.只支持冒泡阶段。
2.事件监听函数内的this指向window(巨大的缺陷)。
3.事件对象仅存在于window.event。
4.事件必须以ontype方式命名,比如click命名为onclick。
5.仅IE可用。
示例:
window. attachEvent ('onload',function(){});
5.事件类型
(1) 鼠标事件
A.说明:追踪鼠标操作,分为追踪定位和追踪点击。
B.示例:
追踪点击(click,dblclick,mousedown,mouseup) ;
追踪定位(mouseout,mouseover,mousemove);
C.事件属性:
type:表明是什么事件;
target(DOM)或srcElement(IE):表明触发事件的对象;
shiftKey,ctrlKey,altKey,metaKey(DOM):是否按下了Shift,Ctrl,Alt,Meta键;
button:0-未按下键;1-按左键;2-按右键;3-同时按下左右;4-按下中键;5-按下左和中;6-按下右和中;7-同时按下左中右;
(2) 键盘事件
A.说明:追踪键盘敲击和其上下文。
B.示例:
keydown,keypress,keyup
C.事件属性:
keyCode:按下的键的代码(等于Unicode值)
charCode(DOM):键对应的代码和字符会有一个分离;
target(DOM)或srcElement(IE):表明触发事件的对象;
shiftKey,ctrlKey,altKey,metaKey(DOM):是否按下了Shift,Ctrl,Alt,Meta键;
(3) UI事件
A.说明:追踪用户何时开始使用页面的某一部分。
B.示例:
blur,focus
(4) 表单事件
A.说明:追踪表单和表单域上的交互。
B.示例:
submit,select,change
(5) 加载和错误事件
A.说明:追踪页面本身,监听自身加载状态。
B.示例:
载入页面(load),用户离开页面(upload,beforeunload),错误事件(error)
其他分类
(1)HTML事件
load,unload,abort,error,select,change,submit,reset,resize,scroll,focus,blue
(2)变化事件
目前还没有主流浏览器支持,不讨论;
6.DOM和IE的区别:
1)获取目标:
IE: var oTarget = oEvent.srcElement;
DOM: var oTarget = oEvent.target;
2)获取字符代码;(在键盘事件中)
IE: var iCharCode = oEvent.keyCode;
DOM: var iCharCode = oEvent.charCode;
3)阻止默认行为,例如:<a href="xxx" οnclick="" >aa</a>或者鼠标右键行为.
IE: oEvent.returnValue = false;
DOM: oEvent.preventDefault();
4)停止冒泡事件流(事件复制)
IE: oEvent.cancelBubble = true;
DOM: oEvent.stopPropagation();