鼠標事件
與鼠標相關的事件如圖所示，除了'mouseenter'和'mouseleave'外的所有鼠標事件都能冒泡。
在這里補充一個：
contextmenu [可以取消的事件，當上下文菜單即將出現時觸發。]
在開始之前有必要贅述一下事件對象的相關知識
事件對象
當觸發某個事件時，會產生一個事件對象，這個對象包含著所有與事件有關的信息。包括事件的目標元素、事件的類型以及其它與特定事件相關的事件。
事件對象，我們一般稱為event對象。事件對象作為參數傳遞給事件處理程序函數，IE8以及之前的版本event是作為window對象的屬性存在的。故有了以下常見的寫法：
function(e){ var e = e || e.window; /*you code*/ }
在標準的DOM事件和IE事件中，even對象t可用的屬性和方法也不一樣。
/*得到事件目標DOM對象*/
function getTarget(e){
var e =e || window.e;
return e.target || e.srcElement;
}
/*阻止冒泡*/
function stopPro(e){
var e = e || window.e;
window.event ? e.cancelBubble = true : e.stopPropagation();
}
事件對象提供了兩組屬性來區別瀏覽器坐標的屬性，一組是頁面可視區坐標，另一組是屏幕坐標。
相信通過上面的介紹，大家已經對以上內容了然于胸了。接下來我們一起來看看拖拽效果的實現吧。
拖拽效果
想想是怎么個事，想明白了很好實現的
首先我們來思考一下拖拽功能用到的事件
拖拽無非是鼠標按下點擊元素（DOM節點）
鼠標移動，元素移動
鼠標抬起，元素停止不動
所以這里我們需要綁定三個事件
mousedown、mousemove、mouseup
在這里
mousemove和mouseup事件觸發應該是由一個鼠標按下的前提
我們可以利用一個布爾變量儲存狀態表示當前是否鼠標按下
或者干脆在mousedown事件處理函數中去綁定mousemove、mouseup
實現的代碼主要是參照JS權威指南17.5鼠標事件的內容，直接在mousedown事件處理函數中去綁定mousemove和mouseup。代碼這里就不貼了，代碼地址如下，如若需要，可自行查看。
https://github.com/YLiJingan/Basic
說明：
drag()接受兩個參數，第一個是要拖動的元素，它必須是使用css position 屬性絕對定位的元素。第二個元素是觸發mousedown事件的事件對象。
drag()函數把mousedown事件發生的位置轉換為文檔坐標，為了計算鼠標指正到正在移動的元素左上角之間的距離。mouseover事件處理函數用于響應文檔元素的移動，mouseup事件處理函數用于注銷自己（mousedown）和mousemove事件處理函數。
參考資料：
《Javascript權威指南》
