js小东西

如何获取event事件？
    事件对象需要作为参数传入事件。

    function fn(event){
        console.log(event)
    }
    或者
    function(){
        console.log(arguments[0])
    }
    
    缺德定律再现！
    IE中：          window.event
    正常浏览器中：    对象.on事件 = function(event){}

 兼容方式：
    function fn(eve){
        var e = eve || window.event;
    }

检测按下的鼠标按键：event.button
    返回值为0，左键；返回值为1，中键；返回值为2，右键

    检测相对于浏览器的位置：clientX和clientY
    当鼠标事件发生时，鼠标相对于浏览器左上角的位置
    
    检测相对于文档的位置：pageX和pageY
    当鼠标事件发生时，鼠标相对于文档左上角的位置。（IE7/8无）（类似于event.clientX和event.clientY）

    检测相对于屏幕的位置：screenX和screenY
    当鼠标事件发生时，鼠标相对于屏幕左上角的位置

    检测相对于事件源的位置：offsetX和offsetY
    当鼠标事件发生时，鼠标相对于事件发生元素左上角的位置

.键盘事件（keyup／keydown／keypress）
    键盘事件：
        onkeydown      键盘按下
        onkeyup        键盘抬起
        onkeypress     按下并抬起数字字母按键

得知按下的键盘上的哪个键：keyCode

event.keyCode        返回当前按键的ASCII码

        空格    32
        回车    13
        左      37
        上      38
        右      39
        下      40

    兼容问题：  var eve = eve || window.event
              var keyC = eve.keyCode || eve.which

    案例：通过键盘上下左右，控制页面中的元素位置移动


    ctrlKey        判断ctrl是否被按下，按下返回true
    shiftKey       判断shift是否被按下，按下返回true
    altKey         判断alt是否被按下，按下返回true

oncontextmenu    鼠标右键事件

如何阻止默认事件？
    e.preventDefault();
    window.event.returnValue = false;

处理兼容方式
    if( e.preventDefault ){
        e.preventDefault();
    }else{
        window.event.returnValue = false;
    }

.鼠标拖拽效果（onmousedown／onmousemove／onmouseup）


 拖拽分解：
        按下鼠标 ----> 移动鼠标 ----> 松开鼠标


    1.给目标元素添加onmousedown事件，拖拽的前提是在目标元素按下鼠标左键

    2.当onmousedown发生以后，此刻给document添加onmousemove事件，意味着此刻鼠标在网页的移动都将改变目标元素的位置

    3.在onmousemove事件中，设定目标元素的left和top，
    公式
    目标元素的left = 鼠标的clientX – （鼠标和元素的横坐标差，即offsetX）
    目标元素的top = 鼠标的clientY– （鼠标和元素的纵坐标差，即offsetY）

    4.当onmousedown发生以后，此刻给document添加onmouseup事件，意味着此刻鼠标在网页的任意位置松开鼠标，都会放弃拖拽的效果
    在onmouseup事件中，取消document的onmousemove事件即可。

 事件触发阶段主要由于事件流：DOM0级事件处理阶段和DOM2级事件处理；

    DOM0级事件处理，是一种赋值方式，是被所有浏览器所支持的，简单易懂容易操作；
        元素.onclick = function(){}

    DOM2级事件处理是所有DOM节点中的方法，可以重复绑定，但是浏览器兼容存在问题；

    非IE下：(这里的事件名不带on),第三个参数表示是在捕获阶段还是冒泡阶段。可以重复绑定事件，执行顺序按照绑定顺序来执行。

    oDiv.addEventListener('click',fn,false);
    oDiv.removeEventListener('click',fn ,false);

    IE下：

    只有冒泡阶段,所以没有第三个参数；（这里的事件名需要加on）
    oDiv.attachEvent()；
    oDiv.detachEvent() ;

冒泡：从下往上（从里往外）
捕获：从上往下（从外往内）

    兼容问题解决：
1.封装成对象的方式
    var EventUtil={
        addHandler:function(DOM,EventType,fn){
            if(DOM.addEventListener){
                DOM.addEventListener(EventType,fn,false);
            }else if(DOM.attachEvent){
                DOM.attachEvent('on'+EventType,fn)
            }else{
                DOM['on'+EventType]=fn
            }
        },
        removeHandler:function(DOM,EventType,fn){
            if(DOM.removeEventListener){
                DOM.removeEventListener(EventType,fn,false)
            }else if(DOM.detachEvent){
                DOM.detachEvent('on'+EventType,fn)
            }else{
                DOM['on'+EventType]=null;
            }
        }
    }