欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

JavaScript五大事件是什么

這篇文章主要講解了“JavaScript五大事件是什么”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“JavaScript五大事件是什么”吧！

陳巴爾虎ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場(chǎng)景，ssl證書(shū)未來(lái)市場(chǎng)廣闊！成為創(chuàng)新互聯(lián)公司的ssl證書(shū)銷(xiāo)售渠道，可以享受市場(chǎng)價(jià)格4-6折優(yōu)惠！如果有意向歡迎電話(huà)聯(lián)系或者加微信：028-86922220（備注：SSL證書(shū)合作）期待與您的合作！

JavaScript五大事件是什么

頁(yè)面事件

思考：HTML頁(yè)面是按照什么樣的順序進(jìn)行加載的？

答案：頁(yè)面的加載是按照代碼的編寫(xiě)順序，從上到下依次執(zhí)行的。

會(huì)出現(xiàn)的問(wèn)題：若在頁(yè)面還未加載完成的情況下，就使用JavaScript操作DOM元素，會(huì)出現(xiàn)語(yǔ)法錯(cuò)誤。

JavaScript五大事件是什么

解決辦法：頁(yè)面事件可以改變JavaScript代碼的執(zhí)行時(shí)機(jī)。

  • load事件：用于body內(nèi)所有標(biāo)簽都加載完成后才觸發(fā)，又因其無(wú)需考慮頁(yè)面加載順序的問(wèn)題，常常在開(kāi)發(fā)具體功能時(shí)添加。

  • unload事件：用于頁(yè)面關(guān)閉時(shí)觸發(fā)，經(jīng)常用于清除引用避免內(nèi)存泄漏時(shí)使用。

JavaScript五大事件是什么

焦點(diǎn)事件

在Web開(kāi)發(fā)中，焦點(diǎn)事件多用于表單驗(yàn)證功能，是最常用的事件之一。

例如，文本框獲取焦點(diǎn)改變文本框的樣式，文本框失去焦點(diǎn)時(shí)驗(yàn)證文本框內(nèi)輸入的數(shù)據(jù)等。

JavaScript五大事件是什么

為了讓大家更好的掌握焦點(diǎn)事件的使用方法，下面以驗(yàn)證用戶(hù)名和密碼是否為空進(jìn)行演示。

JavaScript五大事件是什么

代碼實(shí)現(xiàn)

	<!DOCTYPE html>
	<head>
	<meta charset="UTF-8">
	<title>驗(yàn)證用戶(hù)名和密碼是否為空</title>
	<style>
	body{background:#ddd;}
	.box{background:#fff;padding:20px 30px;width:400px;margin: 0 auto;text-align:center;}
	.btn{width:180px;height:40px;background:#3388ff;border:1px solid #fff;color:#fff;font-size:14px;}
	.ipt{width:260px;padding:4px 2px;}
	.tips{width:440px;height:30px;margin:5px auto;background:#fff;color:red;border:1px solid #ccc;display:none;line-height:30px;padding-left:20px;font-size:13px;}
	</style>
	</head>
	<body>
	<p id="tips" class="tips"></p>
	<p class="box">
	<p><label>用戶(hù)名：<input id="user" class="ipt" type="text"></label></p>
	<p><label>密　碼：<input id="pass" class="ipt" type="password"></label></p>
	<p><button id="login" class="btn">登錄</button></p>
	</p>
	<script>
	window.onload = function() {
	addBlur($('user')); // 檢測(cè)id為user的元素失去焦點(diǎn)后，value值是否為空
	addBlur($('pass')); // 檢測(cè)id為pass的元素失去焦點(diǎn)后，value值是否為空
	};
	function $(obj) { // 根據(jù)id獲取指定元素
	return document.getElementById(obj);
	}
	function addBlur(obj) { // 為指定元素添加失去焦點(diǎn)事件
	obj.onblur = function() {
	isEmpty(this);
	};
	}
	function isEmpty(obj) { // 檢測(cè)表單是否為空
	if (obj.value === '') {
	$('tips').style.display = 'block';
	$('tips').innerHTML = '注意：輸入內(nèi)容不能為空! ';
	} else {
	$('tips').style.display = 'none';
	}
	}
	</script>
	</body>
	</html>

鼠標(biāo)事件

鼠標(biāo)事件是Web開(kāi)發(fā)中最常用的一類(lèi)事件。

例如，鼠標(biāo)滑過(guò)時(shí)，切換Tab欄顯示的內(nèi)容；利用鼠標(biāo)拖拽曳狀態(tài)框，調(diào)整它的顯示位置等，這些常見(jiàn)的網(wǎng)頁(yè)效果都會(huì)用到鼠標(biāo)事件。

JavaScript五大事件是什么

在項(xiàng)目開(kāi)發(fā)中還經(jīng)常涉及一些常用的鼠標(biāo)屬性，用來(lái)獲取當(dāng)前鼠標(biāo)的位置信息。

JavaScript五大事件是什么

JavaScript五大事件是什么

IE6—8瀏覽器中不兼容pageX和pageY屬性。因此，項(xiàng)目開(kāi)發(fā)時(shí)需要對(duì)IE6~8瀏覽器進(jìn)行兼容處理。

JavaScript五大事件是什么

鼠標(biāo)在文檔中的坐標(biāo)等于鼠標(biāo)在當(dāng)前窗口中的坐標(biāo)加上滾動(dòng)條卷去的文本長(zhǎng)度。

為了讓大家更好的理解鼠標(biāo)事件的使用，以圓形顯示鼠標(biāo)單擊位置為例演示。

JavaScript五大事件是什么

代碼實(shí)現(xiàn)

	<!DOCTYPE html>
	<head>
	<meta charset="UTF-8">
	<title>顯示鼠標(biāo)單擊位置</title>
	<style>
	.mouse{position:absolute;background:#ffd965;width:40px;height:40px;border-radius:20px;}
	</style>
	</head>
	<body>
	<p id="mouse" class="mouse"></p>
	<script>
	var mouse = document.getElementById('mouse');
	//需求：鼠標(biāo)在頁(yè)面上單擊時(shí)，獲取單擊時(shí)的位置，并顯示一個(gè)小圓點(diǎn)
	document.onclick = function(event) {
	// 獲取事件對(duì)象的兼容處理
	var event = event || window.event;
	// 鼠標(biāo)在頁(yè)面上的位置
	var pageX = event.pageX || event.clientX + document.documentElement.scrollLeft;
	var pageY = event.pageY || event.clientY + document.documentElement.scrollTop;
	// 計(jì)算<p>應(yīng)該顯示的位置
	var targetX = pageX - mouse.offsetWidth / 2;
	var targetY = pageY - mouse.offsetHeight / 2;
	// 在鼠標(biāo)單擊的位置顯示<p>
	mouse.style.display = 'block';
	mouse.style.left = targetX + 'px';
	mouse.style.top = targetY + 'px';
	};
	</script>
	</body>
	</html>

【案例】鼠標(biāo)拖曳特效

JavaScript五大事件是什么

盒子的位置（left和top值）= 鼠標(biāo)的位置（left和top值）- 鼠標(biāo)按下時(shí)與盒子之間的距離（left和top值）。

舉個(gè)例子

JavaScript五大事件是什么

代碼實(shí)現(xiàn)思路：

① 編寫(xiě)HTML，設(shè)計(jì)彈框用于實(shí)現(xiàn)拖拽特效。

② 為拖拽條添加mousedown事件及其處理程序。

③ 處理鼠標(biāo)移動(dòng)事件，實(shí)現(xiàn)鼠標(biāo)的拖拽的特效。

④ 處理釋放鼠標(biāo)按鍵的事件，實(shí)現(xiàn)鼠標(biāo)按鈕松開(kāi)后，彈框不再移動(dòng)。

代碼實(shí)現(xiàn)

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>鼠標(biāo)拖動(dòng)</title>
	<style>
	body{margin:0}
	.box{width:400px;height:300px;border:5px solid #eee;box-shadow:2px 2px 2px 2px #666;position:absolute;top:30%;left:30%}
	.hd{width:100%;height:25px;background-color:#7c9299;border-bottom:1px solid #369;line-height:25px;color:#fff;cursor:move}
	#box_close{float:right;cursor:pointer}
	</style>
	</head>
	<body>
	<p id="box" class="box">
	<p id="drop" class="hd">
	注冊(cè)信息 (可以拖拽)
	<span id="box_close">【關(guān)閉】</span>
	</p>
	<p class="bd"></p>
	</p>
	<script>
	// 獲取被拖動(dòng)的盒子和拖動(dòng)條
	var box = document.getElementById('box');
	var drop = document.getElementById('drop');
	drop.onmousedown = function(event) { // 鼠標(biāo)在拖動(dòng)條上 按下 可拖動(dòng)盒子
	var event = event || window.event;
	// 獲取鼠標(biāo)按下時(shí)的位置
	var pageX = event.pageX || event.clientX + document.documentElement.scrollLeft;
	var pageY = event.pageY || event.clientY + document.documentElement.scrollTop;
	// 計(jì)算鼠標(biāo)按下的位置 距 盒子的位置
	var spaceX = pageX - box.offsetLeft;
	var spaceY = pageY - box.offsetTop;
	document.onmousemove = function(event) { // 鼠標(biāo)移動(dòng)的時(shí)候 獲取鼠標(biāo)的位置 整個(gè)盒子跟著鼠標(biāo)的位置走
	var event = event || window.event;
	// 獲取移動(dòng)后鼠標(biāo)的位置
	var pageX = event.pageX || event.clientX + document.documentElement.scrollLeft;
	var pageY = event.pageY || event.clientY + document.documentElement.scrollTop;
	// 計(jì)算并設(shè)置盒子移動(dòng)后的位置
	box.style.left = pageX - spaceX + 'px';
	box.style.top = pageY - spaceY + 'px';
	};
	};
	document.onmouseup = function() {// 釋放鼠標(biāo)按鍵時(shí) 取消盒子的移動(dòng)
	document.onmousemove = null;
	};
	</script>
	</body>
	</html>

鍵盤(pán)事件

鍵盤(pán)事件是指用戶(hù)在使用鍵盤(pán)時(shí)觸發(fā)的事件。

例如，用戶(hù)按Esc鍵關(guān)閉打開(kāi)的狀態(tài)欄，按Enter鍵直接完成光標(biāo)的上下切換等。

JavaScript五大事件是什么

下面以Enter鍵切換的使用進(jìn)行演示。具體如例所示。

JavaScript五大事件是什么

代碼實(shí)現(xiàn)

	<!DOCTYPE html>
	<head>
	<meta charset="UTF-8">
	<title>按Enter鍵切換</title>
	</head>
	<body>
	<p>用戶(hù)姓名：<input type="text"></p>
	<p>電子郵箱：<input type="text"></p>
	<p>手機(jī)號(hào)碼：<input type="text"></p>
	<p>個(gè)人描述：<input type="text"></p>
	<script>
	var inputs = document.getElementsByTagName('input');
	for (var i = 0; i < inputs.length; ++i) {
	inputs[i].onkeydown = function(e) {
	// 獲取事件對(duì)象的兼容處理
	var e = event || window.event;
	// 判斷按下的是不是回車(chē)，如果是，讓下一個(gè)input獲取焦點(diǎn)
	if (e.keyCode === 13) {
	// 遍歷所有input框，找到當(dāng)前input的下標(biāo)
	for (var i = 0; i < inputs.length; ++i) {
	if (inputs[i] === this) {
	// 計(jì)算下一個(gè)input元素的下標(biāo)
	var index = i + 1 >= inputs.length ? 0 : i + 1;
	break;
	}
	}
	// 如果下一個(gè)input還是文本框，則獲取鍵盤(pán)焦點(diǎn)
	if (inputs[index].type === 'text') {
	inputs[index].focus(); // 觸發(fā)focus事件
	}
	}
	};
	}
	</script>
	</body>
	</html>

注意

keypress事件保存的按鍵值是ASCII碼，

keydown和keyup事件保存的按鍵值是虛擬鍵碼。

具體參考MDN等手冊(cè)

表單事件

表單事件指的是對(duì)Web表單操作時(shí)發(fā)生的事件。

例如，表單提交前對(duì)表單的驗(yàn)證，表單重置時(shí)的確認(rèn)操作等。JavaScript提供了相關(guān)的表單事件。

JavaScript五大事件是什么

下面以是否提交和重置表單數(shù)據(jù)為例進(jìn)行演示。具體如例所示。

JavaScript五大事件是什么

代碼實(shí)現(xiàn)

	<!DOCTYPE html>
	<head>
	<meta charset="UTF-8">
	<title>表單事件</title>
	</head>
	<body>
	<form id="register">
	<label>用戶(hù)名：<input id="user" type="text"></label>
	<input type="submit" value="提交">
	<input type="reset" value="重置">
	</form>
	<script>
	// 獲取表單和需要驗(yàn)證的元素對(duì)象
	var regist = document.getElementById('register');
	var user = document.getElementById('user');
	regist.onsubmit = function(event) { // 為表單添加submit事件
	// 獲取事件對(duì)象、輸出當(dāng)前事件類(lèi)型
	var event = event || window.event;
	console.log(event.type);
	// 判斷表單元素內(nèi)容是否為空，若為空，則返回false，否則返回true
	return user.value ? true : false;
	};
	regist.onreset = function (event) { // 為表單添加reset事件
	// 獲取事件對(duì)象、輸出當(dāng)前事件類(lèi)型
	var event = event || window.event;
	console.log(event.type);
	// 判斷是否確認(rèn)重置，按“確定”則返回true，按“取消”返回false
	return confirm('請(qǐng)確認(rèn)是否要重置信息，重置后表單填寫(xiě)的內(nèi)容將全部清空');
	};
	</script>
	</body>
	</html>

動(dòng)手實(shí)踐

圖片放大特效

分析如何實(shí)現(xiàn)圖片放大特效：

  • 準(zhǔn)備兩張相同的圖片，小圖和大圖。

  • 小圖顯示在商品的展示區(qū)域。

  • 大圖用于鼠標(biāo)在小圖上移動(dòng)時(shí)，按比例的顯示大圖中的對(duì)應(yīng)區(qū)域。

代碼實(shí)現(xiàn)思路：

  • ① 編寫(xiě)HTML頁(yè)面，展示小圖、隱藏鼠標(biāo)的遮罩及大圖。

  • ② 當(dāng)鼠標(biāo)在小圖上移動(dòng)時(shí)，顯示鼠標(biāo)的遮罩和大圖。

  • ③ 當(dāng)鼠標(biāo)移動(dòng)時(shí)，讓遮罩跟著在小圖中進(jìn)行移動(dòng)。

  • ④ 限定遮罩在小圖中的可移動(dòng)范圍。

  • ⑤ 根據(jù)遮罩在小圖中的覆蓋范圍，按比例的顯示大圖。

感謝各位的閱讀，以上就是“JavaScript五大事件是什么”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)JavaScript五大事件是什么這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！

當(dāng)前題目：JavaScript五大事件是什么
本文網(wǎng)址：http://www.chinadenli.net/article8/gpciip.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供標(biāo)簽優(yōu)化、、網(wǎng)站維護(hù)、定制開(kāi)發(fā)、網(wǎng)站設(shè)計(jì)公司、用戶(hù)體驗(yàn)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

網(wǎng)站托管運(yùn)營(yíng)