JavaScript事件基礎(chǔ)和事件綁定
事件驅(qū)動(dòng)
1.事件
JavaScript偵測到的用戶的操作或是頁面的一些行為(怎么發(fā)生的)
2.事件源
引發(fā)事件的元素。(發(fā)生在誰的身上)
3.事件處理程序
對(duì)事件處理的程序或是函數(shù) (發(fā)生了什么事)
JavaScript事件分類
補(bǔ)充事件:
onscroll
onresize
重點(diǎn)講解事件:
onmousewheel 鼠標(biāo)滾動(dòng);IE
addEventListener("DOMMouseScroll",scrollfun,false) W3C
mouseout 鼠標(biāo)離開
mouseover 鼠標(biāo)懸停
事件綁定
1.一般綁定事件t
在腳本中綁定
直接在HTML元素綁定
2.同一個(gè)事件綁定多個(gè)事件處理程序
IE:
對(duì)象.attachEvent("事件(on)",move) 添加
對(duì)象. detachEvent("事件(on)","處理程序") 刪除
FF:
對(duì)象.addEventListener("事件","處理程序",布爾值) 添加
對(duì)象.removeEventListener("事件","處理程序",布爾值) 刪除
事件對(duì)象
一、什么是事件對(duì)象
用來記錄一些事件發(fā)生時(shí)的相關(guān)的信息的對(duì)象
1.只有當(dāng)事件發(fā)生的時(shí)候才產(chǎn)生弟断，只能在處理函數(shù)內(nèi)部訪問
2.處理函數(shù)運(yùn)行結(jié)束后自動(dòng)銷毀胳挎。
二豪硅、如何獲取事件對(duì)象
IE：window.event
FF: 對(duì)象.on事件=function (e){}
事件對(duì)象的屬性
關(guān)于鼠標(biāo)事件
相對(duì)于瀏覽器位置的
clientX 當(dāng)鼠標(biāo)事件發(fā)生的時(shí)候拷窜，鼠標(biāo)相對(duì)于瀏覽器X軸的位置
clientY 當(dāng)鼠標(biāo)事件發(fā)生的時(shí)候，鼠標(biāo)相對(duì)于瀏覽器Y軸的位置
相對(duì)于屏幕位置的
screenX 當(dāng)鼠標(biāo)事件發(fā)生的時(shí)候锡足，鼠標(biāo)相對(duì)于屏幕X軸的位置
screenY
相對(duì)于事件源的位置
IE:
offsetX 當(dāng)鼠標(biāo)事件發(fā)生的時(shí)候，鼠標(biāo)相對(duì)于事件源X軸的位置
offsetY
FF:
layerX 當(dāng)鼠標(biāo)事件發(fā)生的時(shí)候壳坪，鼠標(biāo)相對(duì)于事件源X軸的位置
layerY
事件對(duì)象的屬性
關(guān)于鼠標(biāo)滾輪的
滾輪事件
if(document.attachEvent){
document.attachEvent("onmousewheel",scrollFn); //IE舶得、 opera
}else if(document.addEventListener){
document.addEventListener("mousewheel",scrollFn,false);
//chrome,safari -webkit-
document.addEventListener("DOMMouseScroll",scrollFn,false);
//firefox -moz-
}
事件對(duì)象屬性:
事件對(duì)象.wheelDelta 獲取滾輪滾動(dòng)的方向 IE
事件對(duì)象.detail 獲取滾輪滾動(dòng)的方向 FF
關(guān)于鼠標(biāo)移入移出的
mouseout mouseover
事件對(duì)象屬性
事件對(duì)象.fromElement 鼠標(biāo)從哪來 IE
事件對(duì)象.toElement 鼠標(biāo)到哪去 IE
事件對(duì)象.relatedTarget FF
在mouseover事件中代表IE中的fromElement
在mouseout事件中代表IE中的toElement
事件對(duì)象的屬性
關(guān)于鍵盤事件
keyCode 獲得鍵盤碼
空格:32 回車13 左上右下：37 38 39 40
altKey 判斷alt鍵是否被按下 按下是true 反 之是false 布爾值
ctrlKey
shiftKey
type 用來檢測事件的類型 主要是用于多個(gè)事件通用一個(gè)事件處理程
序的時(shí)候
事件流
當(dāng)頁面元素觸發(fā)事件的時(shí)候，該元素的容器以及整個(gè)頁面都會(huì)按照特定順序響應(yīng)該元素的觸發(fā)事件爽蝴，事件傳播的順序叫做事件流程沐批。
事件流的分類
- 冒泡型事件(所有的瀏覽器都支持)
由明確的事件源到最不確定的事件源依次向上觸發(fā)。 - 捕獲型事件(IE不支持 w3c標(biāo)準(zhǔn) 火狐)
不確定的事件源到明確的事件源一次向下觸發(fā)蝎亚。
addEventListener(事件九孩，處理函數(shù)，false)
addEventListener(事件发框，處理函數(shù)躺彬，true)
事件流
阻止事件流(事件對(duì)象)
IE: 事件對(duì)象.cancelBubble=true;
FF: 事件對(duì)象.stopPropagation();
獲得目標(biāo)事件源的對(duì)象
IE： 事件對(duì)象.srcElement
FF: 事件對(duì)象阻止瀏覽器默認(rèn)行為
if (ev.preventDefault )
ev.preventDefault(); //阻止默認(rèn)瀏覽器動(dòng)作(W3C)
else
ev.returnValue = false;//IE中阻止函數(shù)器默認(rèn)動(dòng)作的
方式
事件流
