日期:2014-05-16 浏览次数:20319 次
事件是可以被 JavaScript 侦测到的行为,使我们有能力创建动态页面。 事件举例: 鼠标点击 页面或图像载入 鼠标悬浮于页面的某个热点之上 在表单中选取输入框 确认表单 键盘按键 注意:事件通常与函数配合使用,当事件发生时函数才会执行。 1.事件获取 事件处理中IE未遵循W3C标准,IE中事件使用全局对象 window.event ,其他现代浏览器通过参数传入。 onclick=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.onsubmit=function(e){return stopDefault(e)}; document.body.onkeypress=myKeyPressHandler; window.onload=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" onclick="" >aa</a>或者鼠标右键行为. IE: oEvent.returnValue = false; DOM: oEvent.preventDefault(); 4)停止冒泡事件流(事件复制) IE: oEvent.cancelBubble = true; DOM: oEvent.stopPropagation();
?