日期:2014-05-16  浏览次数:20319 次

JS事件小结
事件是可以被 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();







?