事件驱动模型

事件驱动模型

-    事件驱动要素

    1.事件源
    
        触发事件的元素
    
    2.事件

    3.事件处理函数（事件句柄或事件监听器）

-    事件分类

    1.鼠标事件

        onclick   鼠标单击
        
        ondbclick  鼠标双击
        
        onmousedown  按下鼠标

        onmouseup   抬起鼠标按键

        onmousever  鼠标移上去的时候

        onmouseout  鼠标移开

    2.键盘事件

        onkeyup   键盘松开时

        onkeydown   键盘按下

        onkeypress   按下并放开任何字母数字键时发生
        
        onkeyup 是在用户放开任何先前按下的键盘键时发生。 
        onkeydown 是在用户按下任何键盘键

    3.表单事件

        onsubmit  提交

        onblur        失去焦点
        
        onfoucs            获得焦点

        onchage            事件在内容改变时触发

        input必须是失去焦点才会检测到内容发生改变。而change事件通常是用于下拉菜单select标签。

    4.页面事件
    
    onload   文档载入完成

    onunioad    文档载入时被撤销

    onbeforeunioad    文档载入前被撤销
        
-    事件绑定

    1、脚本绑定

    2、标签里绑定

    3、监听方式

    在IE下：

        添加： element.attachEvent(event,function) 

        绑定多个函数时，先执行后绑定的
    
        删除： element.detachEvent(event,function)

    非IE下：
        
        添加： element.addEventListener(event,function,useCapture)

        删除： element.removeEventListener(event,function,useCapture)

- 事件对象

    1、事件源对象
    
    当事件发生时，只能在事件函数内部访问的对象
        
    2.event对象获取

        element.onclick = function(e){
            var  ev = e || window.event;            
        }

    3.event对象属性

    a、鼠标事件

        clientX / clientY 相对于浏览器的坐标

        screenX / screenY 相对于屏幕的坐标

        offsetX / offsetY 相对于事件源本身的坐标（火狐浏览器：layerX / layerY）

    b.键盘事件

        event.kyCode  获取键盘码
        
        altKey、ctrlKey、shiftKey（布尔类型，返回true/false，判断alt、ctrl、shift这三个键是否被按下）

        event.type   检测事件类型