- jQuery從入門到精通 （軟件開(kāi)發(fā)視頻大講堂）
- 明日科技
- 2152字
- 2020-11-28 23:47:28
6.1 JavaScript事件處理
6.1.1 事件與事件名稱
事件是一些可以通過(guò)腳本響應(yīng)的頁(yè)面動(dòng)作。當(dāng)用戶按下鼠標(biāo)鍵或者提交一個(gè)表單，甚至在頁(yè)面上移動(dòng)鼠標(biāo)時(shí)，事件就會(huì)出現(xiàn)。事件處理是一段JavaScript代碼，總是與頁(yè)面中的特定部分以及一定的事件相關(guān)聯(lián)。當(dāng)與頁(yè)面特定部分關(guān)聯(lián)的事件發(fā)生時(shí)，事件處理器就會(huì)被調(diào)用。
絕大多數(shù)事件的命名都是描述性的，很容易理解。例如click、submit、mouseover等，通過(guò)名稱就可以猜測(cè)其含義。但也有少數(shù)事件的名稱不易理解，例如blur（英文的字面意思為“模糊”），表示一個(gè)域或者一個(gè)表單失去焦點(diǎn)。通常，事件處理器的命名原則是，在事件名稱前加上前綴on。例如，對(duì)于click事件，其處理器名為onClick。
6.1.2 JavaScript的常用事件
為了便于讀者查找JavaScript中的常用事件，下面以表格的形式對(duì)各事件進(jìn)行說(shuō)明。JavaScript的相關(guān)事件如表6.1所示。
表6.1 JavaScript的相關(guān)事件
續(xù)表
續(xù)表
【例6.1】在頁(yè)面中單擊某個(gè)位置，會(huì)彈出對(duì)話框，顯示被觸發(fā)的事件類型。（實(shí)例位置：光盤\TM\sl\6\1）
（1）創(chuàng)建一個(gè)名稱為index.html的文件。
（2）在頁(yè)面的<body>標(biāo)記中，定義onmousedown事件的處理函數(shù)為getEventType()，參數(shù)event是Event對(duì)象。具體代碼如下：
<body onmousedown="getEventType(event)">
<h3 class="title">JavaScript事件類型</h3>
<p>在頁(yè)面中單擊某個(gè)位置，會(huì)彈出對(duì)話框，顯示被觸發(fā)的事件類型。</p>
</body>
（3）在頁(yè)面的<head>標(biāo)記內(nèi)，編寫getEventType()函數(shù)，調(diào)用alert()方法顯示event.type屬性，代碼如下：
<script type="text/javascript">
function getEventType(){
alert(event.type); //彈出提示框，顯示事件類型
}
</script>
運(yùn)行本實(shí)例，單擊頁(yè)面主體位置，運(yùn)行結(jié)果如圖6.1所示。
圖6.1 彈出事件類型提示框
6.1.3 event對(duì)象
JavaScript的event對(duì)象用來(lái)描述JavaScript的事件，它主要作用于IE和NN4以后的各個(gè)瀏覽器版本中。event對(duì)象代表事件狀態(tài)，如事件發(fā)生的元素、鍵盤狀態(tài)、鼠標(biāo)位置和鼠標(biāo)按鈕狀態(tài)。一旦事件發(fā)生，便會(huì)生成event對(duì)象，如單擊一個(gè)按鈕，瀏覽器的內(nèi)存中就產(chǎn)生相應(yīng)的event對(duì)象。
event對(duì)象具有以下屬性。
（1）altLeft屬性
用于設(shè)置或獲取左Alt鍵的狀態(tài)。檢索左Alt鍵的當(dāng)前狀態(tài)，返回值true表示關(guān)閉，false為不關(guān)閉。
語(yǔ)法：
[window.]event. altLeft
由于altLeft屬性是boolean值，因此可以將該屬性應(yīng)用到if語(yǔ)句中，根據(jù)獲取的值不同而執(zhí)行不同的操作。
（2）ctrlLeft屬性
用于設(shè)置或獲取左Ctrl鍵的狀態(tài)。檢索左Ctrl鍵的當(dāng)前狀態(tài)，返回值true表示關(guān)閉，false為不關(guān)閉。
語(yǔ)法：
[window.]event. ctrlLeft
由于ctrlLeft屬性是boolean值，因此可以將該屬性應(yīng)用到if語(yǔ)句中，根據(jù)獲取的值不同而執(zhí)行不同的操作。
（3）shiftLeft屬性
用于設(shè)置或獲取左Shift鍵的狀態(tài)。檢索左Shift鍵的當(dāng)前狀態(tài)，返回值true表示關(guān)閉，false為不關(guān)閉。
語(yǔ)法：
[window.]event. shiftLeft
由于這3個(gè)屬性的值同樣也都是boolean類型的，所以也可以將它們組合成一個(gè)條件在if語(yǔ)句中應(yīng)用，并且也可以和altKey、ctrlKey和shiftKey屬性同時(shí)使用。
（4）button屬性
用于設(shè)置或獲取事件發(fā)生時(shí)用戶所單擊的鼠標(biāo)鍵。
語(yǔ)法：
[window.]event.button
該屬性的值如表6.2所示。
表6.2 button屬性的值和說(shuō)明
當(dāng)用戶按下多個(gè)鍵時(shí)，每次按鍵都激活一個(gè)onmousedown事件。如果用戶首先單擊左鍵，則onmousedown事件激活，event.button屬性值為1；如果此時(shí)單擊右鍵，那么onmousedown事件再次發(fā)生，但event.button屬性值為3。如果腳本同時(shí)按下兩個(gè)按鍵執(zhí)行特殊動(dòng)作，那么就應(yīng)該忽略單一按鍵動(dòng)作，因?yàn)樵谔幚磉^(guò)程中很可能激活單鍵事件，從而干擾目標(biāo)行為。
注意
button屬性僅用于onmousedown、onmouseup和onmousemove事件。對(duì)于其他事件，無(wú)論鼠標(biāo)狀態(tài)如何，都返回0（例如：onclick）。
（5）clientX屬性
用于獲取鼠標(biāo)在瀏覽器窗口中的X坐標(biāo)，該屬性是一個(gè)只讀屬性，即只能獲取到鼠標(biāo)的當(dāng)前位置，不能改變鼠標(biāo)的位置。
語(yǔ)法：
[window.]event. clientX
（6）clientY屬性
用于獲取鼠標(biāo)在瀏覽器窗口中的Y坐標(biāo)，該屬性是一個(gè)只讀屬性，即只能獲取到鼠標(biāo)的當(dāng)前位置，不能改變鼠標(biāo)的位置。
語(yǔ)法：
[window.]event. clientY
（7）X屬性
用于設(shè)置或獲取鼠標(biāo)指針位置相對(duì)于CSS屬性中有position屬性的上級(jí)元素的X軸坐標(biāo)。如果沒(méi)有CSS屬性中有position屬性的上級(jí)元素，默認(rèn)以body元素作為參考對(duì)象。
語(yǔ)法：
[window.]event. X
如果鼠標(biāo)事件觸發(fā)后，鼠標(biāo)移出窗口外，則返回的值為-1。這是個(gè)只讀屬性，只能通過(guò)它獲取鼠標(biāo)的當(dāng)前位置，卻不能用它來(lái)更改鼠標(biāo)的位置。
（8）Y屬性
用于設(shè)置或獲取鼠標(biāo)指針位置相對(duì)于CSS屬性中有position屬性的上級(jí)元素的Y軸坐標(biāo)。如果沒(méi)有CSS屬性中有position屬性的上級(jí)元素，默認(rèn)以body元素作為參考對(duì)象。
語(yǔ)法：
[window.]event. Y
如果鼠標(biāo)事件觸發(fā)后，鼠標(biāo)移出窗口外，則返回的值為-1。這是個(gè)只讀屬性，只能通過(guò)它獲取鼠標(biāo)的當(dāng)前位置，卻不能用它來(lái)更改鼠標(biāo)的位置。
（9）cancelBubble屬性
用于檢測(cè)是否接受上層元素的事件的控制。如果該屬性的值是false，則允許被上層元素的事件控制；否則值為true，不被上層元素的事件控制。
語(yǔ)法：
[window.] event.cancelBubble[ = cancelBubble]
該屬性的值是一個(gè)可讀寫的布爾值，默認(rèn)值是false。
（10）srcElement屬性
用于設(shè)置或獲取觸發(fā)事件的對(duì)象。srcElement屬性是事件初始目標(biāo)的HTML元素對(duì)象引用。由于事件通過(guò)元素容器層次氣泡，可以在任何一個(gè)層次進(jìn)行處理，因此由一個(gè)屬性指向產(chǎn)生初始事件的元素是很有幫助的。
語(yǔ)法：
[window.]event. srcElement
通過(guò)該屬性可以讀、寫屬于該元素的屬性，并調(diào)用它的任何方法。
【例6.2】將altKey、ctrlKey和shiftKey屬性進(jìn)行組合，組成一個(gè)綜合的條件，應(yīng)用if語(yǔ)句判斷當(dāng)Ctrl鍵、Shift鍵和Alt鍵同時(shí)被按下時(shí)執(zhí)行一個(gè)操作。（實(shí)例位置：光盤\TM\sl\6\2）
（1）創(chuàng)建一個(gè)名稱為index.html的文件。
（2）在頁(yè)面的<head>標(biāo)記內(nèi)，編寫example ()函數(shù)，判斷Ctrl、Shift和Alt按鍵是否被同時(shí)按下，如果同時(shí)按下，則彈出提示對(duì)話框并且將頁(yè)面跳轉(zhuǎn)至index_ok.html文件。令用戶按下鍵盤按鍵時(shí)調(diào)用example ()函數(shù)，代碼如下：
<script>
function example(){ //創(chuàng)建自定義函數(shù)
//應(yīng)用if語(yǔ)句判斷Ctrl鍵、Shift鍵和Alt鍵是否同時(shí)被按下
if(window.event.ctrlKey && window.event.altKey && window.event.shiftKey){
//如果Ctrl鍵、Shift鍵和Alt鍵同時(shí)被按下，則執(zhí)行下面的內(nèi)容
alert(’明日科技，給您拜年了！'); //彈出一個(gè)對(duì)話框
window.location.href='index_ok.html'; //連接到一個(gè)文件
}
}
document.onkeydown=example; //應(yīng)用onkeydown事件輸出自定義函數(shù)example中的內(nèi)容
</script>
運(yùn)行本實(shí)例，單擊頁(yè)面主體位置，運(yùn)行結(jié)果如圖6.2所示。
圖6.2 altKey、ctrlKey和shiftKey屬性的綜合應(yīng)用
- SPSS數(shù)據(jù)挖掘與案例分析應(yīng)用實(shí)踐
- Go Web編程
- 新編Visual Basic程序設(shè)計(jì)上機(jī)實(shí)驗(yàn)教程
- Python程序設(shè)計(jì)教程（第2版）
- 實(shí)戰(zhàn)Java程序設(shè)計(jì)
- Django Design Patterns and Best Practices
- Babylon.js Essentials
- Unity Android Game Development by Example Beginner's Guide
- Redmine Cookbook
- Mastering ASP.NET Core 2.0
- ASP.NET開(kāi)發(fā)寶典
- 微信小程序開(kāi)發(fā)邊做邊學(xué)（微課視頻版）
- iOS Development with Xamarin Cookbook
- FusionCharts Beginner’s Guide：The Official Guide for FusionCharts Suite
- jQuery EasyUI從零開(kāi)始學(xué)