javascript
JavaScript之event事件
目錄
1：事件驅(qū)動1
2：事件分類2
3：事件對象event3
4：關(guān)于鼠標事件對象屬性3
應(yīng)用：5
5：關(guān)于鍵盤事件對象的屬性6
6：目標事件源對象7
7. 事件冒泡7
應(yīng)用：8
CSS模擬下拉菜單。8
綜合應(yīng)用：8
?
1：事件驅(qū)動
1.事件event
所謂事件就是js偵測到的用戶的操作或是頁面的一些行為(怎么發(fā)生的)
2.事件源
引發(fā)事件的元素。(發(fā)生在誰的身上)
3.事件處理程序
對事件處理的程序或是函數(shù) (發(fā)生了什么事)
4.事件對象
當事件發(fā)生的時候，具體發(fā)生了哪些信息，（當按鍵盤的時候按的哪個鍵或者鼠標光標在頁面的哪個位置等等）。
2：事件分類
1.鼠標事件
onclick ?????點擊鼠標 ????ondblclick ????雙擊鼠標
onmousedown ??鼠標按下 ????onmouseup ????鼠標抬起
onmousemove ??鼠標移動 ??
??onmouseover ??鼠標放上去??onmouseout ???鼠標離開 ????
onmouseenter ?鼠標進入onmouseleave ?鼠標離開
2.鍵盤事件
onkeyup ???鍵盤抬起 ????onkeydown ???鍵盤按下
onkeypress ??鍵盤按下或按住
3.?表單事件
onfocus ????獲得焦點
onblur?????失去焦點
onchange ???改變文本區(qū)域的內(nèi)容
?4.頁面事件
onload ??????????當頁面加載完成
onbeforeunload ??當頁面卸載完成之前
3：事件對象event
用來記錄一些事件發(fā)生時的相關(guān)信息的對象。
1.只有當事件發(fā)生的時候才產(chǎn)生，只能在處理函數(shù)內(nèi)部訪問。
2.處理函數(shù)運行結(jié)束后自動銷毀。
如何獲取事件對象：
IE：window.event
火狐ff：對象.on事件=function(event){}
兼容的獲取方式
對象.on事件=function(event){
var evt = event || window.event
}
4：關(guān)于鼠標事件對象屬性
相對于瀏覽器位置的：
clientX ??當鼠標事件發(fā)生的時候，鼠標相對于瀏覽器左上角X軸的位置。
clientY ??當鼠標事件發(fā)生的時候，鼠標相對于瀏覽器左上角Y軸的位置。
相對于文檔位置的：
pageX ????當鼠標事件發(fā)生的時候，鼠標相對于文檔X軸的位置。（IE7/8無） （類似于event.clientX、event.clientY）
pageY ????當鼠標事件發(fā)生的時候，鼠標相對于文檔Y軸的位置。（IE7/8無）
相對于屏幕位置的：
screenX ??當鼠標事件發(fā)生的時候，鼠標相對于屏幕X軸的位置。
screenY ??當鼠標事件發(fā)生的時候，鼠標相對于屏幕Y軸的位置。
相對于事件源的位置：
offsetX ??當鼠標事件發(fā)生的時候，鼠標相對于父元素左上角X軸的位置。
offsetY ??當鼠標事件發(fā)生的時候，鼠標相對于父元素左上角Y軸的位置。
?
?
應(yīng)用：
1：光標的實時顯示。
?
?
2：跟隨鼠標的提示框。
?
?
5：關(guān)于鍵盤事件對象的屬性
keyCode：獲得鍵盤碼（ascll碼）。空格：32 ?回車13 ??左上右下：37 38 39 40。which屬性有兼容性問題。?e.keyCode || e.which
ctrlKey：判斷ctrl鍵是否被按下，按下是true,反之是false ?布爾值。還有shiftKey ??altKey。（使用keydown事件）
type：用來檢測事件的類型。
button：0代表鼠標按下了左鍵 || ?1代表按下了滾輪 ?|| ?2代表按下了右鍵。不過老版本的IE并沒有遵守W3C的規(guī)范，它的button屬性含義如下：1鼠標左鍵 2鼠標右鍵 3左右同時按 4滾輪 5左鍵加滾輪 6右鍵加滾輪 7三個同時。目前IE11.0版本，無兼容性問題。
6：目標事件源對象
IE：事件對象.srcElement
火狐：事件對象.target????e.target?????||e.srcElement
7. 事件冒泡
冒泡型事件：事件按照從最特定的事件目標到最不特定的事件目標(document對象)的順序觸發(fā)。
div -> body -> html -> document （由內(nèi)往外傳遞）
?
事件的捕獲 跟 冒泡相反
?
//不讓事件繼續(xù)冒泡,取消冒泡
var e = evt || window.event;
e.cancelBubble = true;//ie8 及 ie8以下
e.stopPropagation(); //其他瀏覽器
?
應(yīng)用：
CSS模擬下拉菜單。
?
?
?
綜合應(yīng)用：
聊天對話框。
//newLi.scrollIntoView();//將元素滾動到可見位置
?
轉(zhuǎn)載于:https://www.cnblogs.com/huangzhenhui/p/7553589.html
總結(jié)
以上是生活随笔為你收集整理的JavaScript之event事件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【Codeforces Round #4
- 下一篇： CSDN专訪：大数据时代下的商业存储