EVENT事件

标签：

    1、事件驱动要素：
        
        1、事件源：触发事件的元素；
    
        2、事件：被JS侦测到的行为；

        3、事件处理函数（事件句柄/事件监听器）：事件发生时进行的操作；

    2、事件分类：

        鼠标事件、键盘事件、表单事件、页面事件

    3、事件绑定：

        1、在JS脚本中绑定事件：

        例：html:<input type="button" id="btn" value="点我"/>

            javaScript:var btn = document.getElementById("btn");

        方式一：btn.onclick = function(){}

        方式二：function test(){
                console.log(123);
            }
                btn.onclick = test;

        2、不推荐使用：标签中绑定事件：
            
            <input type = "button" id ="btn" value="点我" onclick = "test()">

        3、监听器：

    IE：添加：element.attachEvent(event,function);
        删除：element.detachEvent(event,function);

    CHROM/FIREFOX：

        添加：element.addEventListener(event,funtion,useCapture);
        删除：element.removeEventListener(event,function,useCapture);

    4、事件对象：

        1、事件源对象：是指event对象，封装了与事件相关的详细信息

            ·当事件发生时，只能在事件函数内部访问的对象；
            ·处理函数结束后会自动销毁。

        2、获取EVENT对象：

        IE：window.event
        W3C:e

        3、EVENT对象的属性：
    
            1、鼠标事件：

    ·相对于浏览器位置：
        event.clientX:事件触发时，鼠标指针向对于浏览器页面（客户区）的水平坐标；
        event.clientY:事件触发时，鼠标指针向对于浏览器页面（客户区）的垂直坐标；

    ·相对于屏幕的位置：
        event.screenX:相对于屏幕的水平坐标；
        event.screenY:相对于屏幕的垂直坐标；

    ·相对于事件源的位置：
        event.offsetX:相对于事件源的水平坐标；
        event.offsetY:相对于事件源的垂直坐标；

        event.layerX:相对于事件源的水平坐标；(FIREFOX)
        event.layerY:相对于事件源的垂直坐标；(FIREFOX)

            2、键盘事件：
            
                keyCode:获取按下的键盘按键的值的字符代码；
                altKey:指示在事件发生时，Alt键是否被按下；
                ctrlKey:指示在事件发生时，Ctrl键是否被按下；
                shiftKey:指示在事件发生时，Shift键是否被按下；

            3、type属性：用来检测事件类型

    5、事件流：
        当页面元素触发事件时，该元素的容器和整个页面都会按照特定的顺序响应该元素的触发事件，事件传播的顺序叫做：事件流。

        1、事件流的分类：
            
            1、冒泡型事件：由明确的事件源向不明确的事件源依次向上触发。

            2、捕获型事件：（IE不支持）不明确事件源向明确的事件源依次向下触发。
        
            3.DOM标准的事件模型：

            DOM标准同时支持捕获型和冒泡型，但是捕获型事件先发生。

        2、阻止事件流：

            IE：event.cancleBubble = true;
            FF: event.stopPropagation();

        3、目标事件源：
    
            IE：srcElement;
            FF：target;

        4、阻止默认事件：

            event.preventDefault()

EVENT事件

标签：

原文地址：http://www.cnblogs.com/qingshixiaodao/p/5453644.html