jsDOM事件流

DOM事件流：
    事件流描述的是从页面中接受事件的顺序。事件发生时会在元素节点之间按照特定的顺序传播，这个过程即DOM事件流。
    DOM事件流分为三个阶段：
        1，捕获阶段
        2，当前目标阶段
        3，冒泡阶段
    事件冒泡：IE最早提出，事件开始是由最具体的元素接收，然后逐级向上传播到DOM最顶层的阶段
    事件捕获：网景最早提出，由DOM最顶层节点开始，然后逐级向下传播到最具体的元素接收的过程
    注意：
        1，js代码中只能执行捕获或者冒泡其中的一个阶段；
        2，onclick和attachEvent只能得到冒泡阶段；
        3，addEventListener('type',listener[,useCapture])第三个参数如果是true，表示事件捕获阶段调用事件处理程序，如果是false或者不写，表示事件冒泡阶段调用事件处理程序；
        4，onblur,onfocus,onmouseenter,onmouseleave没有冒泡的；
    事件对象：event对象代表事件的状态，事件发生后，跟事件的一系列信息数据集合都会在这个对象里面
        eventTarget.onclick = function(event){}
        eventTarget.addEventListener('click',function(event){})
        //event就是事件对象，可以写成e或者evt
        ie兼容写法：
            e = e || window.e;
    常见事件对象的属性和方法：
        返回触发事件的对象：
            e.target    //返回触发事件的对象 
            e.srcElement    //返回触发事件的对象，IE678使用
        返回事件的类型
            e.type    //返回事件的类型，比如click，mouseover，不带on
        阻止默认事件
            e.returnValue    //该属性阻止默认事件非标准ie678使用，比如不让链接跳转
            e.preventDefault() //该方法阻止默认事件，标准，比如不让链接跳转，表单提交；
        阻止冒泡
            e.stopPropagation()    //阻止冒泡，标准
            e.cancelBubble    //该属性阻止冒泡，非标准，ie678使用 window.event.cancelBubble = true;
        阻止冒泡事件兼容性问题：
            if( e && e.stopPropagation){
                e.stopPropagation();
            }else{
                widow.event.cancelBubble = true;
            }
    注意：
        this返回的是绑定事件的对象；
        e.target返回的是触发事件的对象（元素）
        currentTarget返回的也是绑定事件的对象，ie678不兼容；
        return false; 也可以阻止默认行为，没有兼容性问题；return后面的代码也不会执行，addEventListener方法里面没有效果，只在传统方法里面有用；
    事件委派(代理，委派)
        事件委派也称事件处理，在jQuery里面也称事件委派
        事件委托的原理：
            不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点上；
    常用的鼠标事件：
        鼠标事件对象：MouseEvent；
        e.clientX    //返回鼠标对于浏览器窗口可视区的x坐标
        e.clentY    //返回鼠标对于浏览器窗口可视区的Y坐标
        e.pageX        //返回鼠标相对于文档页面的X坐标，IE9+支持
        e.pageY        //返回鼠标相对于文档页面的Y坐标，IE9+支持
        e.screenX    //返回鼠标相对于电脑屏幕的X坐标
        e.screenY    //返回鼠标相对于电脑屏幕的Y坐标
    常用的键盘事件：
        onkeyup        //按键弹起触发
        onkeydown    //按键按下触发
        onkeypress    //某个键按下触发，不能识别功能键，Ctrl，shift，箭头等等；
            document.addEventListener('keyup',function(){    //不能加on
                /* 函数体 */
            })
            /* 三个事件的执行顺序，keydown-keypress-keyup;     */
        键盘事件对象：
            keyCode:    //返回按下键的ASCII码值；
            keyup&&keydown事件不区分字母大小写，可以press区分大小写；