事件（鼠标）,元素宽高，元素定位的计算

事件流：
a. 事件捕获
b. 处于目标
c. 事件冒泡

事件冒泡：
事件捕获：

事件委派：利用事件冒泡
阻止事件冒泡：event.stopPropagation()

注册事件监听：
a. addEventListener() / attachEvent()
b. 事件句柄
c. HTML标签中的事件属性

与事件关联的默认动作：
点击超级链接跳转页面
表单中点击提交按钮提交表单
浏览器页面中点击右键弹出右键菜单
.......

阻止与事件关联的默认动作：
标准：event.preventDefault();
非标准：event.returnValue = false;
兼容：event.preventDefault ? event.preventDefault() : event.returnValue = false;

拖拽：
按下鼠标键：mousedown
事件源：待拖拽的元素
事件处理程序：
获取鼠标按下时光标在事件源元素坐标系中的坐标
绑定鼠标移动事件

移动鼠标：mousemove
    事件源：document
    事件处理程序：
        计算拖拽的元素定位 (用光标在窗口中的坐标-光标在拖拽元素中的坐标)
        设置CSS定位

松开鼠标键：mouseup
    事件源：document
    事件处理程序：取消鼠标移动事件

滚动距离：
document.documentElement.scrollTop || document.body.scrollTop -- 顶部
document.documentElement.scrollLeft || document.body.scrollLeft -- 左侧
// 页面滚动，触发 window.onscroll 事件
window.onscroll = function() {}

计算宽高：
element.clientWidth
element.clientHeight
-- 边框以内的宽高(内容+padding-滚动条)
element.offsetWidth
element.offsetHeight
-- 边框及边框以内的宽高

如果元素隐藏（display:none），则计算宽高为 0

视口的宽高：
window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight

计算定位：
element.offsetTop
element.offsetLeft
-- 获取元素相对于其有定位父元素的顶部、左侧距离
element.offsetParent
-- 获取有定位的父级

event.pageX 如果浏览器不支持使用该属性，如何获取在文档中的光标位置？
event.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft)

mouseenter(mouseleave) 与 mouseover(mouseout)：
mouseenter 没有事件冒泡，从后代元素上移动经过，不会重复触发事件
mouseover 有事件冒泡，从后代元素上移动经过，可重复触发事件