事件對(duì)象：存儲(chǔ)了(描述了)事件更加詳細(xì)的信息
坐標(biāo)信息（位置）：
橫坐標(biāo)(x軸)：
event.clientX;
兼容：Chrome,IE系
ev.clientX;
兼容：高級(jí)瀏覽器
低級(jí)：undefined
兼容寫(xiě)法：
var oEvent = ev || event;
查看當(dāng)前鼠標(biāo)的坐標(biāo)位置：
onmousemove -> 當(dāng)你移動(dòng)鼠標(biāo)時(shí)候
觸發(fā)非常密 不要用alert 調(diào)試
eg:
div跟著鼠標(biāo)走
*** 使用clientX,clientY 最好加上滾動(dòng)寬度,高度 防止在滾動(dòng)的時(shí)候DIV不跟隨鼠標(biāo)
事件冒泡：
子元素身上的事件赞辩，會(huì)傳遞給父元素雌芽，如果事件相同會(huì)執(zhí)行，不相同不會(huì)執(zhí)行辨嗽，會(huì)繼續(xù)往上冒
發(fā)生包含關(guān)系世落，不是平級(jí)關(guān)系
阻止事件冒泡：
oEvent.cancelBubble = true;
eg 放大鏡(淘寶產(chǎn)品圖):
a). 鼠標(biāo)移入、移出small 顯示糟需、隱藏span/big
b). 給small添加移動(dòng)事件
1. 讓span 跟著鼠標(biāo)走
(減去box的offsetLeft/offsetTop)
2. 限制范圍
1). 左邊最大移動(dòng)距離
small盒模型寬度/高度-span盒模型寬度/高度
2). 右邊最大移動(dòng)距離
大img的盒模型寬度/高度-big盒模型寬度/高度
3. 算比例
左邊X軸：scaleX = x/maxW
左邊X軸：scaleY = y/maxH
4. 右邊比例 - > 算img的left/top
scaleX = ? / (oImg.offsetWidth-oBig.offsetWidth)
scaleY = ? / (oImg.offsetHeight-oBig.offsetHeight)
比例：變化的數(shù)/定死的數(shù)
鍵盤(pán)事件：
<b>onkeydown 當(dāng)按下鍵盤(pán)的時(shí)候</b>
鍵位對(duì)應(yīng)的鍵碼：
oEvent.keyCode -> 鍵碼
對(duì)應(yīng)一個(gè)數(shù)字
規(guī)律
常用的鍵：
刪除鍵：8
回車(chē)鍵：13
左鍵：37
上鍵：38
右鍵：39
下鍵：40
組合鍵：
*** 在js里面鍵碼不能組合使用
ctrl:
ctrlKey
shift:
shiftKey
alt:
altKey
<b>oncontextmenu 當(dāng)點(diǎn)擊右鍵時(shí)候</b>
默認(rèn)行為：
右鍵有菜單 表單能提交 文本框能輸入內(nèi)容 點(diǎn)擊a鏈接能跳轉(zhuǎn)...
阻止默認(rèn)行為：
return false;
阻止復(fù)制內(nèi)容途徑：
a). ctrl + c
b). 右鍵
<b>eg 拖拽：</b>
a). 按下鼠標(biāo)
onmousedown 當(dāng)按下鼠標(biāo)的時(shí)候
b). 移動(dòng)
onmousemove 當(dāng)移動(dòng)鼠標(biāo)的時(shí)候
c). 抬起鼠標(biāo)
onmouseup 當(dāng)抬起鼠標(biāo)的時(shí)候
問(wèn)題：
a). 快速拖拽div就不跟著走了
解決：把move和 up加給docuemnt
b). 會(huì)選中文字
系統(tǒng)自帶的
阻止默認(rèn)行為
解決：return false;
IE低版本出問(wèn)題
捕獲(IE獨(dú)有的)：
設(shè)置捕獲
obj.setCapture();
釋放捕獲：
obj.releaseCapture();
克绿爰选：
obj.cloneNode(); -> 淺克隆
返回新的物體
obj.cloneNode(true); -> 深度克隆 會(huì)將內(nèi)容也復(fù)制
參數(shù)：默認(rèn)是false -> 淺克隆
事件沖突：
同一個(gè)元素身上，添加了一個(gè)事件洲押，但是希望執(zhí)行不同的函數(shù)
添加事件的方式：
a). <input type="button" onclick="xxx"
b). oBtn.onclick = xxxx;
事件綁定：解決事件沖突
一種全新的添加事件的方式
事件綁定：
obj.addEventListener(事件名武花，函數(shù)名，是否捕獲);
事件名 -> 不能加上 "on"
兼容：高級(jí)瀏覽器
obj.attachEvent(事件名杈帐，函數(shù)名);
事件名 -> 加上 "on"
兼容： IE10-
兼容性：
a). ||
b). if else
封裝一個(gè)給物體添加綁定事件的函數(shù)：
obj -> 哪個(gè)物體
sEv -> 事件名
fn -> 函數(shù)名
addEvent(obj,sEv,fn);
事件解綁定：
問(wèn)題：
碰見(jiàn)匿名函數(shù)出問(wèn)題了
原因：
函數(shù)每次都是new出來(lái)的体箕，只要是new出來(lái)的東西都不相等
關(guān)于匿名函數(shù)：
obj.removeEventListener(事件名，函數(shù)名挑童，是否捕獲);
事件名 -> 不能加上‘on’
參數(shù)要與事件的綁定保持一致
兼容：高級(jí)瀏覽器
obj.detachEvent(事件名累铅，函數(shù)名);
兼容：IE10-
兼容性：
removeEvent(obj,sEv,fn);
事件冒泡：
子級(jí) -> 父級(jí)
事件的捕獲(下沉)：
父級(jí) -> 子級(jí)
事件的捕獲沒(méi)用！站叼！ 直接給false
obj.removeEventListener(事件名娃兽，函數(shù)名，false);
this出問(wèn)題的地方：
a). 定時(shí)器里面的this
b). 函數(shù)包了一層
c). 事件綁定有問(wèn)題(attachEvent)
九宮格拖拽：
4個(gè)邊大年，4個(gè)角
右邊：
var downX = oEvent.clientX;
var oldW = oBox.offsetWidth;
下邊：
var downY = oEvent.clientY;
var oldH = oBox.offsetHeight;
左邊：
var downX = oEvent.clientX;
var oldW = oBox.offsetWidth;
var oldL = oBox.offsetLeft;
上邊：
var downY = oEvent.clientY;
var oldH = oBox.offsetHeight;
var oldT = oBox.offsetTop;
碰撞檢測(cè)：：
a). 什么時(shí)候碰上
r1 > l2 && b1 > t2 && l1 < r2 && t1 < b2
b). 判斷沒(méi)碰上 √
r1 < l2 || b1 < t2 || l1 > r2 || t1 > b2
