事件
2.什么是事件？
onchange內(nèi)容發(fā)生改變的時候觸發(fā)
1）鼠標(biāo)事件MouseEvent
1. onclick 鼠標(biāo)點擊事件，多用在某個對象控制的范圍內(nèi)的鼠標(biāo)點擊
2. ondblclick ? 鼠標(biāo)雙擊事件
3. onmousedown ?鼠標(biāo)按下事件
4. onmouseup ? ?鼠標(biāo)抬起事件
5. onmouseover ?鼠標(biāo)移入事件
6.onmouseout ? 鼠標(biāo)移出事件
7. onmousemove ?鼠標(biāo)移動時事件
8. onmouseenter鼠標(biāo)移動到元素上時觸發(fā)(通常與 onmouseleave 事件一同使用)
9. onmouseleave 鼠標(biāo)移除元素時觸發(fā)(事件不支持冒泡)
10.oncontextmenu 鼠標(biāo)右鍵
11:onmousewheel 鼠標(biāo)滾輪事件
- wheelDelta 可以查看滾輪的滑動的距離
2)系統(tǒng)事件
1.onload ? 事件會在頁面或圖像加載完成后，在執(zhí)行 dom 0級事件，私有屬性
調(diào)用多次，只執(zhí)行最后一次
- ?document.ready()是DOM結(jié)構(gòu)加載完成后，在執(zhí)行（不代表所有文件都加載完）
調(diào)用多次，執(zhí)行多次
document.ready()的縮寫：
$(function(){
})()
2.onscroll 瀏覽器的滾動條位置發(fā)生變化時觸發(fā)的事件
3.onerror ?加載過程中發(fā)生錯誤時被觸發(fā)
4.onresize 當(dāng)瀏覽器的窗口大小被改變時觸發(fā)的事件
3)鍵盤事件keyboardEvent
1. onKeyDown ? 按下鍵盤按鍵
2. onKeyUp ? ? 放開鍵盤按鍵
3. onKeyPress ?當(dāng)鍵盤上的某個鍵被按下并且釋放時觸發(fā)的事件.[注意:頁面內(nèi)必須有被聚焦的對象]
4)表單事件
1.onfocus 當(dāng)某個元素獲得焦點時觸發(fā)的事件
2.onblur ?當(dāng)前元素失去焦點時觸發(fā)的事件 [鼠標(biāo)與鍵盤的觸發(fā)均可]
3.onChange 當(dāng)前元素失去焦點并且元素的內(nèi)容發(fā)生改變而觸發(fā)的事件[鼠標(biāo)與鍵盤的觸發(fā)均可
4.onReset ?當(dāng)表單中RESET的屬性被激發(fā)時觸發(fā)的事件
5.onSubmit ?一個表單被遞交時觸發(fā)的事件
DOM0級事件和DOM2級事件的區(qū)別
DOM0級事件和DOM2級事件的區(qū)別：
1）DOM0級事件是元素身上的私有屬性 2）DOM0級事件，當(dāng)給同一個元素，同一個行為上綁定多個不同的方法的時候，后面的方法會“覆蓋”前面的方法； 事件傳播機制只有冒泡階段
2）DOM2級事件是元素身上的公有屬性，存放在元素所屬的eventTarget這個類的原型上；2）DOM2級事件，可以給同一個元素的同一個行為上綁定多個不同的方法；執(zhí)行順序按照綁定順序執(zhí)行；addEventListener ?的第三個參數(shù)指定true 捕獲階段，false冒泡階段
事件對象
事件對象：就是描述了當(dāng)前所觸發(fā)行為的詳細信息； 是一個對象數(shù)據(jù)類型，里面保存著事件的相關(guān)信息
1）標(biāo)準(zhǔn)瀏覽器下，通過形參e來得到事件對象
2）IE6-8下的事件對象，跟形參沒有任何關(guān)系；通過window.event來獲取
兼容處理：e=e||window.event;
- e.type事件類型 是點擊事件還是移動事件？
4.關(guān)于事件對象的詳細信息：
1）clientX/clientY:當(dāng)前鼠標(biāo)落腳點距離可視區(qū)(能看見)左上角的坐標(biāo)位置；--兼容
2) pageX/pageY:當(dāng)前鼠標(biāo)落腳點距離第一屏左上角的坐標(biāo)位置；--不兼容； 針對于整個文檔
var ?pagey = e.clientY + (document.documentElement.scrollTop || document.body.scrollTop);
var pagex = e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft);
var pageY = e.pageY || pagey;
var pageX = e.pageX || pagex;
(3)event.offsetX、event.offsetY 鼠標(biāo)位置距離事件源（自身的元素）的xy軸
鼠標(biāo)相對于事件源元素（srcElement）的X,Y坐標(biāo)，只有IE事件有這2個屬性，標(biāo)準(zhǔn)事件沒有對應(yīng)的屬性。
(4)event.screenX、event.screenY 針對于顯示器的整個屏幕
鼠標(biāo)相對于用戶顯示器屏幕左上角的X,Y坐標(biāo)。標(biāo)準(zhǔn)事件和IE事件都定義了這2個屬性
事件源
- 事件源：（查看事件的源頭是哪個標(biāo)簽）var target=e.target||e.srcElement;當(dāng)前發(fā)生事件的這個元素--不兼容
兼容處理：e.target||e.srcElement;
tagName:標(biāo)簽名
nodeName:標(biāo)簽名
- 阻止事件冒泡： return false 也可以阻止默認行為- 阻止默認事件:e.preventDefault?e.preventDefault():e.returnValue=false;- 取消冒泡：e.stopPropagation?e.stopPropagation():e.cancelBubble=true- setCapture 聚焦 ? releaseCapture 釋放焦點- e.relatedTarget|| e.fromElement;阻止冒泡 阻止讓的子元素往上冒泡- if(this.contains(oTo)) return 如果遇到oTo的時候組織冒泡
事件委托
- 事件委托：一個容器內(nèi)document多個元素div相關(guān)行為click綁定的時候，可以采用事件委托方式進行綁定，執(zhí)行和性能上提升很多； 利用時間會進行冒泡傳播的機制，我們給最外層元素的相關(guān)行為時間觸發(fā)；- 事件流 也就是：利用冒泡的原理，把事件加到父級上，觸發(fā)執(zhí)行效果。- 事件冒泡:當(dāng)前元素相關(guān)行為click觸發(fā)的時候，會導(dǎo)致當(dāng)前元素的所有上級元素都有相關(guān)行為
事件傳播
1；事件傳播包括兩個階段：
1）捕獲階段（從外向里）:從外面開始，最先執(zhí)行的
2）冒泡階段（從里向外）：當(dāng)前目標(biāo)元素，相關(guān)行為觸發(fā)，他的所有上級元素的相關(guān)行為也會觸發(fā)，一直到document（一些瀏覽器 一直到windouw）
- 先捕獲，在冒泡
2：事件傳播包含三階段；
1）捕獲階段 從外向內(nèi) 先綁定哪一個，就先執(zhí)行哪一個
2）目標(biāo)階段 執(zhí)行到目標(biāo)元素時，停止捕獲，執(zhí)行完目標(biāo)階段后，在冒泡
3）冒泡階段 從內(nèi)向外，當(dāng)前目標(biāo)元素相關(guān)行為觸發(fā)，他的所有上級元素的相關(guān)行為都會觸發(fā)
ctrl+r替換
ctrl+f查找
- 事件池可以有多個函數(shù)
關(guān)于事件庫封裝
1）addEventListener 標(biāo)準(zhǔn)瀏覽器下 ?DOM2級事件綁定 點擊
1；可以按照綁定的先后順序，順序調(diào)用
2；this指向當(dāng)前綁定這個元素
3：不會出現(xiàn)重復(fù)綁定情況
dom2級事件
* 第一個參數(shù)是事件類型
* 第二個參數(shù)是處理函數(shù)
* 第三個參數(shù)是布爾類型 true捕獲階段 false冒泡階段
* ?bTn.addEventListener('click',
function()
{
}
,false)
- 移除的時候，要保證三者一致，事件行為，處理函數(shù)階段
- 捕獲階段綁定的，一定要寫true冒泡階段綁定的要移除false'
removeEventListenner('click',fn,false)
2)attachEvent() IE 瀏覽器下 添加事件
bTn.attachEvent('onclick',function()
{
}
)
1;
順序問題
2：this指向window 而當(dāng)不是當(dāng)前這個元素
3：有重復(fù)綁定問題
4:detachEvent 解除綁定事件
