JavaScript-5.1-JavaScript 事件-JavaScript 事件

JavaScript 事件

JavaScript 是一門基於事件的語言，很多操作都離不開事件的支持
JavaScript 事件共分爲鼠標事件、鍵盤事件和 HTML 事件

一：鼠標事件

鼠標事件就是需要通過鼠標進行觸發的事件

事件	發生時間
onclick	用戶單擊對象時
ondblclick	用戶雙擊對象時
onmouseover	鼠標移到某個元素之上
onmouseout	鼠標移出某個元素時
onmousemove	鼠標被移動
onmousedown	鼠標按鍵被按下
onmouseup	鼠標按鍵被鬆開

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>鼠標事件</title>
	<style type="text/css">
		div{
			width: 400px;
			height: 100px;
			border:1px solid #888;
		}
		#div2{
			line-height: 100px;
			text-align: center;
		}
	</style>
</head>
<body>
	<div id="div1">
		<button id="btn1">鼠標單擊</button>
		<button id="btn2">鼠標雙擊</button>
	</div>
	<div id="div2">鼠標在此元素區域內</div>
	<div id="div3">
		<button id="btn3">用戶按鍵被按下，沒有擡起</button>
		<button id="btn4">用戶按鍵被按下，然後擡起</button>
	</div>
</body>
<script type="text/javascript">
	// 獲取元素節點
	var btn1 = document.getElementById('btn1');
	var btn2 = document.getElementById('btn2');
	var div3 = document.getElementById('div3');
	var div4 = document.getElementById('div4');
	var div2 = document.getElementById('div2');

	// 單擊對象,無論鼠標是否擡起都彈窗
	btn1.onclick = function(){
		alert('用戶單擊按鈕時，彈出此對話框');
	}

	// 雙擊對象,無論鼠標是否擡起都彈窗
	btn2.ondblclick = function(){
		alert("用戶雙擊按鈕時，彈出此對話框");
	}

	// 用戶鼠標移到該元素時
	div2.onmouseover = function(){
		alert("用戶鼠標移到該元素時，彈出此對話框");
	}

	// 用戶鼠標移出該元素時
	div2.onmouseout = function(){
		alert("用戶鼠標移出該元素時，彈出此對話框");
	}

	// 用戶在該元素區域內移動
	div2.onmousemove = function(){
		alert("用戶在該元素區域內移動，彈出此對話框");
	}

	// 用戶按鍵被按下，沒有擡起
	btn3.onmousedown = function(){
		alert("用戶鼠標按下沒有擡起時，彈出此對話框");
	}

	// 用戶按鍵被按下，然後擡起
	btn4.onmouseup = function(){
		alert("用戶鼠標按下然後擡起時，彈出此對話框");
	}
</script>
</html>

效果動態圖

onmouseover 與 onmousemove 的區別
鼠標都是移動觸發事件的發生，當鼠標移到一個元素時，先觸發 onmouseover，在該元素區域內移動觸發 onmousemove

onclick、onmousedown、onmouseup 區別
1.onclick：無論鼠標有無擡起都觸發
2.onmousedown：鼠標按下沒有擡起才觸發
3.onmouseup：鼠標按下擡起後才觸發

二：鍵盤事件

鍵盤事件是指通過按下鍵盤按鍵所觸發的事件
按下一個按鍵並擡起的過程，可以分爲三個階段

事件	發生時間
onkeydown	鍵盤按下去觸發
onkeypress	鍵盤按下並鬆開的瞬間觸發
onkeyup	鍵盤擡起時觸發

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>鍵盤事件</title>
</head>
<body>
	<div></div>
</body>
<script type="text/javascript">
	document.onkeyup = function(e){ // 觸發事件時，將事件因子通過事件觸發函數傳入
		var evn = window.event; // 取到事件因子
		var code = evn.keyCode; // 通過 keyCode 屬性確定 ASCII 碼值
		if(code==13){
			alert("Enter")
		}
	}
</script>
</html>

效果動態圖

1、鍵盤事件注意事項

（1）三個事件的執行順序

onkeydown
onkeypress
onkeyup

（2）長按時觸發的事件

當長按一個鍵時，會不斷觸發 onkeydown 和 onkeypress
只有按鍵擡起以後纔會觸發 onkeyup 事件

（3）onkeydown/onkeyup 和 onkeypress 的區別

onkeypress 只能捕獲字母、數字、符號鍵，不能捕獲功能鍵（如 Enter 鍵、F1~F12鍵等）
onkeydown/onkeyup 基本可以捕獲所有功能鍵（特殊鍵盤的某些按鍵除外）
捕獲字母鍵時
- onkeypress 可以區分大小寫
- onkeydown/onkeyup 不區分大小寫
捕獲數組鍵時
- onkeydown/onkeyup 可以區分主鍵盤和小鍵盤
- onkeypress 不能夠區分

（4）通常將鍵盤事件聲明在 document 上

在使用鍵盤監聽時，通常會直接將鍵盤檢測到 document 上，onkeydown 和 onkeyup 通常監聽一個即可

document.onkeydown = function(){
		// 鍵盤按鍵按下時觸發的函數
	}

2、判斷鍵盤按鍵

在使用鍵盤事件時，除了需要檢測觸發的是 onkeydown 還是 onkeyup，更重要的是判斷用戶按下去的是哪一個按鍵
當監測鍵盤事件時，瀏覽器會默認將事件因子 e 傳入事件觸發函數中，事件因子可以通過 keyCode 等屬性確認按鍵 ASCII 碼值，進而確定用戶按下的是哪一個按鍵

(1)取到事件因子

絕大部分瀏覽器可以將事件因子通過觸發函數傳入，但是部分瀏覽器需要通過 window.event 手動取到

document.onkeydown = function(e){ // 觸發事件時，會將事件因子通過事件觸發函數傳入
	var evn = e;                         // 方法一取得事件因子
	var evn = window.event;    // 方法二取得事件因子
}

(2) 取到 ASCII 碼值

通過事件因子可以取到用戶按鍵的 ASCII 碼值

		var code = evn.keyCode;        // 方法一取到 ASCII 碼值
		var code = evn.which;             // 方法二取到 ASCII 碼值
		var code = evn.charCode;      // 方法三取到 ASCII 碼值

三：HTML 事件

鼠標事件和鍵盤事件是需要通過鼠標或鍵盤才能觸發的事件
HTML 事件，表示網頁中的 HTML 標籤發生變化的時候自動觸發的事件

事件	發生時間
onload	文檔或圖像加載後
onunload	文檔卸載後，即退出頁面時
onblur	元素失去焦點
onselect	文本被選中
oninput	元素在用戶輸入時觸發
onchange	內容被改變
onfocus	元素獲得焦點時
onsubmit	表單提交時
onreset	重置按鈕被單擊
onresize	窗口被重新調整大小時
onscroll	當文檔被滾動時發生的事件
ondrag	當元素正在拖動時發生的事件
ondragstart	當元素開始被拖動的時侯觸發的事件
ondragover	元素被拖動到指定區域的時候觸發的事件
ondrop	當放置被拖動元素時觸發的事件

1、案例

輸入框中輸入內容，下方提示文字可以動態顯示輸入數據
輸入框最多輸入 140 個字，超出字數限制給予提示

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>HTML 事件</title>
	<style type="text/css">
		textarea{
			width: 200px;
			height: 100px;
		}
		span{
			font-weight: bold;
			font-size:20px;
			color:#f00;
		}
		.div3{
			height:800px;
		}
	</style>
</head>
<body>
	<div>
		<form>
			<table>
				<tr>
					<td colspan="2">
						<input type="text" id="text">
					</td>
				</tr>
				<tr>
					<td colspan="2">
						<textarea  id="textContent" placeholder="請輸入文字"></textarea>
					</td>
				</tr>
				<tr>
					<td>
						<input type="reset"  value="重置" id="btn1">
						<input type="submit"  value="註冊" id="btn2">
					</td>
				</tr>
			</table>
		</form>
	</div>
	<div>
		已輸入<span id="write">0</span>個字，
		還可以輸入<span id="leftText">140</span>個字
	</div>
	<div class="div3"></div>
</body>
<script type="text/javascript">
	var textContent = document.getElementById('textContent');
	var write = document.getElementById('write');
	var leftText = document.getElementById('leftText');
	var text = document.getElementById('text');
	var btn1 = document.getElementById('btn1');
	var btn2 = document.getElementById('btn2');

	textContent.oninput = function(){
		var max = 140;
		if(textContent.value.length>max){
			/*
			substring：用於提取字符串中介於兩個指定下標之間的字符
			有兩個參數，索引從0開始
			一個參數時，則表示開始位置
			兩個參數時
			    第一個參數爲開始的索引，對應 String 數字中的開始位置（包括）
			    第二個參數爲截至的索引位置（不包括），對應 String 中的結束位置
			*/
			textContent.value = textContent.value.substring(0,max);
			leftText.innerText = 0;
			alert("不能超過"+max+"個字！");
		}
		write.innerText = textContent.value.length;
		leftText.innerText = max-textContent.value.length;
	}

	textContent.onselect = function(){
		alert("文本被選中");
	}

	text.onfocus = function(){
		alert("元素獲得焦點");
	}

	document.onreset = function(){
		alert("重置按鈕");
	}

	document.onsubmit = function(){
		alert("提交按鈕");
	}

	window.onresize = function(){
		alert("窗口被調整");
	}

	window.onscroll = function(){
		alert("正在滾動");
	}
</script>
</html>

效果動態圖

四：event 事件因子

取到事件因子有兩種方式，除了鍵盤事件，還可以在任何事件的觸發函數中使用 window.event 取到事件因子對象

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>event 事件因子</title>
</head>
<body>
	<div>
		<button id="btn1">事件因子</button>
	</div>
</body>
<script type="text/javascript">
	var btn1 = document.getElementById('btn1');
	btn1.onclick = function(e){
		var evn = window.event;
		console.log(evn);
	}
</script>
</html>

效果圖

屬性名	說明
keyCode	檢測鍵盤事件相對應的 Unicode 字符碼
srcElement	返回觸發事件的元素
type	返回當前 event 對象表示的事件名稱
button	檢查按下的鼠標鍵
x,y	返回鼠標相對應於 css 屬性中有 position 屬性的上級元素的 x 和 y 座標
clientX,clientY	返回鼠標在瀏覽器窗口區域窗口中的 x 和 y 座標
screenX,screenY	返回鼠標相對於用戶屏幕中 x 和 y 座標
altKey	檢查 Alt 鍵的狀態。當 Alt 鍵按下時，值爲 True；否則爲 False
ctrlKey	檢查 Ctrl 鍵的狀態。當Ctrl 鍵按下時，值爲 True；否則爲 False
shiftKey	檢查 Shift 鍵的狀態。當Shift 鍵按下時，值爲 True；否則爲 False
toElement	檢測 onmouseover 和 onmouseout 事件發生時，鼠標所進入的元素
fromElement	檢測 onmouseover 和 onmouseout 事件發生時，鼠標所離開的元素

注意
檢測鼠標按鍵的 button 屬性僅用於 onmousedown、onmouseup 和 onmousemove 事件
對於其他時間，不管鼠標狀態如何，都返回 0 （比如 onclick ）
他有8個屬性值，分別是 0 沒按鍵、1 按左鍵、2 按右鍵、3 按左右鍵、4 按中間鍵、5 按左鍵和中間鍵、6 按右鍵和中間鍵、7 按所有鍵

JavaScript-5.1-JavaScript 事件-JavaScript 事件

JavaScript-5.1-JavaScript 事件-JavaScript 事件

JavaScript 事件

一：鼠標事件

二：鍵盤事件

1、鍵盤事件注意事項

（1）三個事件的執行順序

（2）長按時觸發的事件

（3）onkeydown/onkeyup 和 onkeypress 的區別

（4）通常將鍵盤事件聲明在 document 上

2、判斷鍵盤按鍵

(1)取到事件因子

(2) 取到 ASCII 碼值

三：HTML 事件

1、案例

四：event 事件因子

CSS-8.3-浮動與清除

css-8.4-定位

JavaScript-1.6-JavaScript 案例

JavaScript-1.3-JavaScript 中的變量函數

JavaScript-5.2-JavaScript 事件-JavaScript 的事件模型

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結