鼠标事件

所有的鼠标事件，事件处理程序中的事件对象，都为MouseEvent

• altKey: 触发事件时，是否按下了键盘的alt键
• ctrlKey;触发事件时，是否按下啦键盘的ctrl键
• shiifKey：触发事件时，是否按下啦键盘的shift键
• button: 触发事件时，鼠标按键类型
  • 0：左键
  • 1：中键
  • 2：右键

    事件

    1：click
    单击事件
    可以通过 on或addEventListener() 进行监听

    // on 监听事件
    var ul = document.getElementsByClassName('ullrc')[0];
    ul.onclick = function(){console.log("你触发啦单击事件")};
    // addEventListener() 监听事件
    ul.addEventListener('click',function(){console.log("click")},false );

    2：onmousedown / onmousemove / onmouseup
    鼠标按下 / 鼠标移动 / 鼠标抬起

    // onmousedown 为例子
    document.onmousedown = function(e){console.log("鼠标按下")}
    // addEventListener() 监听事件
    document.addEventListener('mousedown',function(){console.log("鼠标按下")},false );

    3：鼠标的移入与移出
    mouseover/mouseout mouseenter/mouseleave
    over和out 不考虑子元素，从父元素移动到子元素对父元素而言，任然算离开，
    enter和leave，考虑子元素，子元素仍然是父元素的一部分，
    mouseenter和mouseleave不会冒泡

    位置：

    page: pageX/pageY , 当前鼠标距离页面的横纵坐标
    client clientX/clientY.鼠标相对于视口的坐标
    offset offsetX/offseY,鼠标相对于事件源的内边距的坐标
    screen screenX/screenY,鼠标相对于屏幕
    layer layerX/layerY,非标准，返回相对于文档的值，页面滚动考虑在内，如果是定位元素，返回相对于相对于定位元素的左上角的距离。
    x y 等同于clientX clintY
    movement: movementX/movementY,只在鼠标移动事件中有效，相对于鼠标上一次位置，偏移的距离