事件

2.什么是事件？

onchange內(nèi)容發(fā)生改變的時(shí)候觸發(fā)

1）鼠標(biāo)事件MouseEvent

1. onclick 鼠標(biāo)點(diǎn)擊事件，多用在某個(gè)對(duì)象控制的范圍內(nèi)的鼠標(biāo)點(diǎn)擊

2. ondblclick ? 鼠標(biāo)雙擊事件

3. onmousedown ?鼠標(biāo)按下事件

4. onmouseup ? ?鼠標(biāo)抬起事件

5. onmouseover ?鼠標(biāo)移入事件

6.onmouseout ? 鼠標(biāo)移出事件

7. onmousemove ?鼠標(biāo)移動(dòng)時(shí)事件

8. onmouseenter鼠標(biāo)移動(dòng)到元素上時(shí)觸發(fā)(通常與 onmouseleave 事件一同使用)

9. onmouseleave 鼠標(biāo)移除元素時(shí)觸發(fā)(事件不支持冒泡)

10.oncontextmenu 鼠標(biāo)右鍵

11:onmousewheel 鼠標(biāo)滾輪事件

- wheelDelta 可以查看滾輪的滑動(dòng)的距離

2)系統(tǒng)事件

1.onload ? 事件會(huì)在頁面或圖像加載完成后，在執(zhí)行 dom 0級(jí)事件，私有屬性

調(diào)用多次，只執(zhí)行最后一次

- ?document.ready()是DOM結(jié)構(gòu)加載完成后，在執(zhí)行（不代表所有文件都加載完）

調(diào)用多次，執(zhí)行多次

document.ready()的縮寫：

$(function(){

})()

2.onscroll 瀏覽器的滾動(dòng)條位置發(fā)生變化時(shí)觸發(fā)的事件

3.onerror ?加載過程中發(fā)生錯(cuò)誤時(shí)被觸發(fā)

4.onresize 當(dāng)瀏覽器的窗口大小被改變時(shí)觸發(fā)的事件

3)鍵盤事件keyboardEvent

1. onKeyDown ? 按下鍵盤按鍵

2. onKeyUp ? ? 放開鍵盤按鍵

3. onKeyPress ?當(dāng)鍵盤上的某個(gè)鍵被按下并且釋放時(shí)觸發(fā)的事件.[注意:頁面內(nèi)必須有被聚焦的對(duì)象]

4)表單事件

1.onfocus 當(dāng)某個(gè)元素獲得焦點(diǎn)時(shí)觸發(fā)的事件

2.onblur ?當(dāng)前元素失去焦點(diǎn)時(shí)觸發(fā)的事件 [鼠標(biāo)與鍵盤的觸發(fā)均可]

3.onChange 當(dāng)前元素失去焦點(diǎn)并且元素的內(nèi)容發(fā)生改變而觸發(fā)的事件[鼠標(biāo)與鍵盤的觸發(fā)均可

4.onReset ?當(dāng)表單中RESET的屬性被激發(fā)時(shí)觸發(fā)的事件

5.onSubmit ?一個(gè)表單被遞交時(shí)觸發(fā)的事件

DOM0級(jí)事件和DOM2級(jí)事件的區(qū)別

DOM0級(jí)事件和DOM2級(jí)事件的區(qū)別：

1）DOM0級(jí)事件是元素身上的私有屬性 2）DOM0級(jí)事件，當(dāng)給同一個(gè)元素，同一個(gè)行為上綁定多個(gè)不同的方法的時(shí)候，后面的方法會(huì)“覆蓋”前面的方法； 事件傳播機(jī)制只有冒泡階段

2）DOM2級(jí)事件是元素身上的公有屬性，存放在元素所屬的eventTarget這個(gè)類的原型上；2）DOM2級(jí)事件，可以給同一個(gè)元素的同一個(gè)行為上綁定多個(gè)不同的方法；執(zhí)行順序按照綁定順序執(zhí)行；addEventListener ?的第三個(gè)參數(shù)指定true 捕獲階段，false冒泡階段

事件對(duì)象

事件對(duì)象：就是描述了當(dāng)前所觸發(fā)行為的詳細(xì)信息； 是一個(gè)對(duì)象數(shù)據(jù)類型，里面保存著事件的相關(guān)信息

1）標(biāo)準(zhǔn)瀏覽器下，通過形參e來得到事件對(duì)象

2）IE6-8下的事件對(duì)象，跟形參沒有任何關(guān)系；通過window.event來獲取

兼容處理：e=e||window.event;

- e.type事件類型 是點(diǎn)擊事件還是移動(dòng)事件？

4.關(guān)于事件對(duì)象的詳細(xì)信息：

1）clientX/clientY:當(dāng)前鼠標(biāo)落腳點(diǎn)距離可視區(qū)(能看見)左上角的坐標(biāo)位置；--兼容

2) pageX/pageY:當(dāng)前鼠標(biāo)落腳點(diǎn)距離第一屏左上角的坐標(biāo)位置；--不兼容； 針對(duì)于整個(gè)文檔

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)相對(duì)于事件源元素（srcElement）的X,Y坐標(biāo)，只有IE事件有這2個(gè)屬性，標(biāo)準(zhǔn)事件沒有對(duì)應(yīng)的屬性。

(4)event.screenX、event.screenY 針對(duì)于顯示器的整個(gè)屏幕

鼠標(biāo)相對(duì)于用戶顯示器屏幕左上角的X,Y坐標(biāo)。標(biāo)準(zhǔn)事件和IE事件都定義了這2個(gè)屬性

事件源

- 事件源：（查看事件的源頭是哪個(gè)標(biāo)簽）var target=e.target||e.srcElement;當(dāng)前發(fā)生事件的這個(gè)元素--不兼容

兼容處理：e.target||e.srcElement;

tagName:標(biāo)簽名

nodeName:標(biāo)簽名

- 阻止事件冒泡： return false 也可以阻止默認(rèn)行為- 阻止默認(rèn)事件:e.preventDefault?e.preventDefault():e.returnValue=false;- 取消冒泡：e.stopPropagation?e.stopPropagation():e.cancelBubble=true- setCapture 聚焦 ? releaseCapture 釋放焦點(diǎn)- e.relatedTarget|| e.fromElement;阻止冒泡 阻止讓的子元素往上冒泡- if(this.contains(oTo)) return 如果遇到oTo的時(shí)候組織冒泡

事件委托

- 事件委托：一個(gè)容器內(nèi)document多個(gè)元素div相關(guān)行為click綁定的時(shí)候，可以采用事件委托方式進(jìn)行綁定，執(zhí)行和性能上提升很多； 利用時(shí)間會(huì)進(jìn)行冒泡傳播的機(jī)制，我們給最外層元素的相關(guān)行為時(shí)間觸發(fā)；- 事件流 也就是：利用冒泡的原理，把事件加到父級(jí)上，觸發(fā)執(zhí)行效果。- 事件冒泡:當(dāng)前元素相關(guān)行為click觸發(fā)的時(shí)候，會(huì)導(dǎo)致當(dāng)前元素的所有上級(jí)元素都有相關(guān)行為

事件傳播

1；事件傳播包括兩個(gè)階段：

1）捕獲階段（從外向里）:從外面開始，最先執(zhí)行的

2）冒泡階段（從里向外）：當(dāng)前目標(biāo)元素，相關(guān)行為觸發(fā)，他的所有上級(jí)元素的相關(guān)行為也會(huì)觸發(fā)，一直到document（一些瀏覽器 一直到windouw）

- 先捕獲，在冒泡

2：事件傳播包含三階段；

1）捕獲階段 從外向內(nèi) 先綁定哪一個(gè)，就先執(zhí)行哪一個(gè)

2）目標(biāo)階段 執(zhí)行到目標(biāo)元素時(shí)，停止捕獲，執(zhí)行完目標(biāo)階段后，在冒泡

3）冒泡階段 從內(nèi)向外，當(dāng)前目標(biāo)元素相關(guān)行為觸發(fā)，他的所有上級(jí)元素的相關(guān)行為都會(huì)觸發(fā)

ctrl+r替換

ctrl+f查找

- 事件池可以有多個(gè)函數(shù)

關(guān)于事件庫封裝

1）addEventListener 標(biāo)準(zhǔn)瀏覽器下 ?DOM2級(jí)事件綁定 點(diǎn)擊

1；可以按照綁定的先后順序，順序調(diào)用

2；this指向當(dāng)前綁定這個(gè)元素

3：不會(huì)出現(xiàn)重復(fù)綁定情況

dom2級(jí)事件

* 第一個(gè)參數(shù)是事件類型

* 第二個(gè)參數(shù)是處理函數(shù)

* 第三個(gè)參數(shù)是布爾類型 true捕獲階段 false冒泡階段

* ?bTn.addEventListener('click',

function()

{

}

,false)

- 移除的時(shí)候，要保證三者一致，事件行為，處理函數(shù)階段

- 捕獲階段綁定的，一定要寫true冒泡階段綁定的要移除false'

removeEventListenner('click',fn,false)

2)attachEvent() IE 瀏覽器下 添加事件

bTn.attachEvent('onclick',function()

{

}

)

1;

順序問題

2：this指向window 而當(dāng)不是當(dāng)前這個(gè)元素

3：有重復(fù)綁定問題

4:detachEvent 解除綁定事件