目錄
- 事件
- Event物件
事件
為需要處理的事件撰寫相應的事件處理程式，要理解事件驅動和程式，就需要與非事件驅動的程式進行比較，實際上，現代的程式大多是事件驅動的，比如多執行緒的程式，肯定是事件驅動的，早期則存在許多非事件驅動的程式，這樣的程式，在需要等待某個條件觸發時，會不斷地檢查這個條件，直到條件滿足，這是很浪費cpu時間的，而事件驅動的程式，則有機會釋放cpu從而進入睡眠態（注意是有機會，當然程式也可自行決定不釋放cpu），當事件觸發時被作業系統喚醒，這樣就能更加有效地使用cpu.
就是對用戶的行為(例如,點擊滑鼠,按下鍵盤)進行回應.
常用的事件
| 事件 | 注釋 |
|---|---|
| onclick | 滑鼠左鍵點擊； |
| ondblclick | 滑鼠左鍵雙擊; |
| onfocus | 標簽獲得焦點(聚焦);(例如輸入型的標簽,在第一次進入時觸發;在標簽內再點擊無效;移出后再進入才會第二次觸發) |
| onblur | 標簽失去焦點(失焦); (例如輸入型的標簽;然后在焦點移出時觸發) |
| onmouseover | 滑鼠被移到某標簽之上;(滑鼠懸浮事件) |
| onmouseout | 滑鼠從某標簽移開; |
| onmousedown | 滑鼠按下標簽 |
| onload | 在網頁加載完畢后自動觸發相應的的事件處理程式;(一般寫在body標簽內;) |
| onchange | 當前標簽失去焦點并且標簽的內容發生改變時觸發事件. |
| Onkeydown | 鍵盤按下 |
| Onkeyup | 鍵盤抬起 |
案例練習:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//案例
//在這里寫函式;
function test1(){
console.log("滑鼠點擊了");
}
function test2(){
console.log("滑鼠雙擊了");
}
function test3(){
console.log("標簽獲得焦點");
}
function test4(){
console.log("標簽失去焦點");
}
function test5(){
console.log("移入該標簽");
}
function test6(){
console.log("移出該標簽");
}
function test7(){
console.log("該標簽失去焦點且內容被改變");
}
function test8(){
console.log("鍵盤按下時觸發");
}
function test9(){
console.log("鍵盤抬起時觸發");
}
</script>
</head>
<body>
<!-- 使用按鈕標簽演示滑鼠的點擊和雙擊;左鍵點擊按鈕1時就會觸發點擊事件;雙擊按鈕2時就會觸發按鈕的雙擊事件 -->
<input type="button" onclick="test1()" value="點擊該按鈕1"/> <hr/>
<input type="button" ondblclick="test2()" value="雙擊該按鈕2"/> <hr/>
<!-- 使用文本框標簽演示標簽的焦點獲得與失去 -->
<input type="text" onfocus="test3()" onblur="test4()" /><hr/>
<!-- 使用塊級標簽演示移入移出標簽效果 -->
<div onmouseover="test5()" onmouseout="test6()" style="width: 100px; background-color: chartreuse;">塊標簽</div>
<!-- 使用文本框演示標簽失去焦點且內容被改變; 當文本框失去焦點且文本框的內容被改變就會觸發; -->
<input type="text" onchange="test7()" /> <hr/>
<!-- 使用文本框演示鍵盤按下和抬起的事件;可以試著長按鍵盤某個鍵位;鍵盤按下事件就一直被執行;一旦松開那個鍵位就觸發鍵盤抬起事件; -->
<input type="text" Onkeydown="test8()" Onkeyup="test9()" /> <hr/>
</body>
</html>
Event物件
在學習了滑鼠或者鍵盤事件后;還需要為這些觸發事件計算好預設位置;
Event 物件代表事件的狀態，比如鍵盤按鍵的鍵位、滑鼠的位置，
瀏覽器上端橫向為X軸,左端豎向為y軸.
| 型別 | 注釋 |
|---|---|
| type | 可獲得被觸發的事件型別 |
| button | 被點擊的滑鼠鍵位( 0:左鍵 ,1:滾輪;2:右鍵) |
| altKey | 按下alt鍵位回傳true;其他鍵回傳false |
| ctrlKey | 按下ctrl鍵位回傳true;其他鍵回傳false |
| shiftKey | 按下shift鍵位回傳true;其他鍵回傳false |
| keyCode | 回傳被按下的鍵位編碼;注意;回傳的是編碼值 |
| offsetX | 滑鼠在當前標簽內的X軸 |
| offsetY | 滑鼠在當前標簽內的Y軸 |
| clientX | 滑鼠在瀏覽器內部X軸 |
| clientY | 滑鼠在瀏覽器內部Y軸 |
| screenX | 滑鼠在顯示幕內的X軸 |
| screenY | 滑鼠在顯示幕內的Y軸 |
鍵位型別以及事件型別案例:
type和button
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//寫一個函式統計滑鼠的鍵位;
function test(a){
console.log(a.button);//獲得被點擊的鍵位(0:左鍵,1:滾輪,2:右鍵)
console.log(a.type);//獲得事件型別
}
</script>
</head>
<body>
<!-- 使用滑鼠按下按鈕進行測驗 -->
<input type="button" value="這是按鈕" onmousedown="test(event)" />
</body>
</html>
效果:
坐標位置案例:
offsetX 滑鼠在當前標簽內的X軸
offsetY 滑鼠在當前標簽內的Y軸
clientX 滑鼠在瀏覽器內部X軸
clientY 滑鼠在瀏覽器內部Y軸
screenX 滑鼠在顯示幕內的X軸
screenY 滑鼠在顯示幕內的Y軸
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
寫一個函式統計滑鼠的位置;
function test(a){
console.log("滑鼠在當前標簽內的X軸位置:"+a.offsetX+"->Y軸位置:"+a.offsetY);
console.log("滑鼠在當前瀏覽器的X軸位置:"+a.clientX+"->Y軸位置:"+a.clientY);
console.log("滑鼠在當前顯示幕內的X軸位置:"+a.screenX+"->Y軸位置:"+a.screenY);
}
</script>
</head>
<body>
<!-- 使用塊級標簽進行滑鼠XY軸的測驗; -->
<div style="width: 200px; height: 150px; background-color: chartreuse;" onmousedown="test(event)">塊級標簽</div>
</body>
</html>
效果：
鍵盤事件案例
altKey 按下alt鍵位回傳true
ctrlKey 按下ctrl鍵位回傳true
shiftKey 按下shift鍵位回傳true
keyCode 回傳被按下的鍵位編碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function test0(a){
console.log(a.keyCode);//獲取按下的鍵位編碼;
}
function test1(b){
console.log(b.altKey);//按下alt鍵就回傳true;按其他鍵回傳false;
}
function test2(c){
console.log(c.shiftKey);//按下shift鍵就回傳true;按其他鍵回傳false;
}
function test3(d){
console.log(d.ctrlKey);//按下Ctrl鍵就回傳true;按其他鍵就回傳false;
}
</script>
</head>
<body>
<!-- 使用文本框進行鍵盤事件測驗 -->
<input type="text" onkeydown="test0(event)"/> <hr/>
<input type="text" onkeydown="test1(event)"/><hr/>
<input type="text" onkeydown="test2(event)"/><hr/>
<input type="text" onkeydown="test3(event)"/>
</body>
</html>
效果:
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/287741.html
標籤：其他