กิจกรรมเพจ
: โหลดเพจ HTML ตามลำดับไหน?
คำตอบ: หน้าจะโหลดจากบนลงล่างตามลำดับที่เขียนโค้ด
ปัญหาที่อาจเกิดขึ้น : หากใช้ JavaScript เพื่อดำเนินการองค์ประกอบ DOM ก่อนที่จะโหลดเพจ ข้อผิดพลาดทางไวยากรณ์จะเกิดขึ้น
วิธีแก้ไข : กิจกรรมเพจสามารถเปลี่ยนระยะเวลาดำเนินการของโค้ด JavaScript ได้
เหตุการณ์โฟกัส
ในการพัฒนาเว็บ เหตุการณ์โฟกัสส่วนใหญ่จะใช้สำหรับฟังก์ชันการตรวจสอบความถูกต้องของแบบฟอร์ม และเป็นหนึ่งในเหตุการณ์ที่ใช้บ่อยที่สุด
ตัวอย่างเช่น การเปลี่ยนรูปแบบของกล่องข้อความเมื่อกล่องข้อความได้รับการโฟกัส การตรวจสอบความถูกต้องของข้อมูลที่ป้อนในกล่องข้อความเมื่อกล่องข้อความสูญเสียโฟกัส เป็นต้น
เพื่อให้ทุกคนเข้าใจวิธีใช้เหตุการณ์โฟกัสได้ดีขึ้น ต่อไปนี้คือการสาธิตเพื่อตรวจสอบว่าชื่อผู้ใช้และรหัสผ่านว่างเปล่าหรือไม่
การใช้รหัส
<!DOCTYPE html>
<หัว>
<meta charset="UTF-8">
<title>ตรวจสอบว่าชื่อผู้ใช้และรหัสผ่านว่างเปล่า</title>
<สไตล์>
ร่างกาย{พื้นหลัง:#ddd;}
.box{พื้นหลัง:#fff;padding:20px 30px;width:400px;margin: 0 auto;text-align:center;}
.btn{width:180px;height:40px;พื้นหลัง:#3388ff;border:1px solid #fff;color:#fff;font-size:14px;}
.ipt{ความกว้าง:260px;ช่องว่างภายใน:4px 2px;}
.tips{width:440px;height:30px;margin:5px auto;พื้นหลัง:#fff;สี:สีแดง;border:1px solid #ccc;display:none;line-height:30px;padding-left:20px;font- ขนาด:13px;}
</สไตล์>
</หัว>
<ร่างกาย>
<p id="เคล็ดลับ" class="เคล็ดลับ"></p>
<p class="กล่อง">
<p><label>ชื่อผู้ใช้: <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>
<สคริปต์>
window.onload = ฟังก์ชั่น () {
addBlur($('user')); // ตรวจสอบว่าค่าว่างเปล่าหลังจากองค์ประกอบที่มี id ของผู้ใช้สูญเสียโฟกัสหรือไม่ addBlur($('pass')); // ตรวจสอบว่าค่าขององค์ประกอบด้วย id ของ pass สูญเสียโฟกัส ไม่ว่าค่าจะว่างเปล่า};
ฟังก์ชั่น $(obj) { // รับองค์ประกอบที่ระบุตาม id return document.getElementById(obj);
-
ฟังก์ชั่น addBlur(obj) { // เพิ่มเหตุการณ์การสูญเสียโฟกัสสำหรับองค์ประกอบที่ระบุ obj.onblur = function() {
isEmpty(นี่);
-
-
function isEmpty(obj) { // ตรวจสอบว่าแบบฟอร์มว่างเปล่าหรือไม่ถ้า (obj.value === '') {
$('tips').style.display = 'บล็อก';
$('tips').innerHTML = 'หมายเหตุ: เนื้อหาที่ป้อนต้องไม่ว่างเปล่า! ';
} อื่น {
$('tips').style.display = 'ไม่มี';
-
-
</สคริปต์>
</ร่างกาย>
</html> เหตุการณ์ของเมาส์
เหตุการณ์ของเมาส์เป็นเหตุการณ์ที่ใช้กันมากที่สุดในการพัฒนาเว็บ
ตัวอย่างเช่น การสลับเนื้อหาที่แสดงในแถบแท็บเมื่อเลื่อนเมาส์ไปเหนือ การใช้เมาส์ลากกล่องสถานะเพื่อปรับตำแหน่งการแสดงผล เป็นต้น เอฟเฟกต์หน้าเว็บทั่วไปเหล่านี้ทั้งหมดใช้กิจกรรมของเมาส์
ในการพัฒนาโครงการ คุณลักษณะของเมาส์ที่ใช้กันทั่วไปมักเกี่ยวข้อง ซึ่งใช้เพื่อรับข้อมูลตำแหน่งเมาส์ปัจจุบัน
คุณลักษณะ pageX และ pageY เข้ากันไม่ได้ในเบราว์เซอร์ IE6-8 ดังนั้นจึงจำเป็นต้องมีความเข้ากันได้กับเบราว์เซอร์ IE6~8 ในระหว่างการพัฒนาโครงการ
พิกัดของเมาส์ในเอกสารจะเท่ากับพิกัดของเมาส์ในหน้าต่างปัจจุบันบวกกับความยาวของข้อความที่เลื่อนโดยแถบเลื่อน
เพื่อให้ทุกคนเข้าใจการใช้เหตุการณ์ของเมาส์ได้ดีขึ้น เรามาดูการแสดงตำแหน่งการคลิกเมาส์แบบวงกลมเป็นตัวอย่างกัน
การใช้รหัส
<!DOCTYPE html>
<หัว>
<meta charset="UTF-8">
<title>แสดงตำแหน่งการคลิกเมาส์</title>
<สไตล์>
.mouse{ตำแหน่ง:สัมบูรณ์;พื้นหลัง:#ffd965;ความกว้าง:40px;ความสูง:40px;รัศมีเส้นขอบ:20px;}
</สไตล์>
</หัว>
<ร่างกาย>
<p id="เมาส์" class="เมาส์"></p>
<สคริปต์>
var mouse = document.getElementById('เมาส์');
//ข้อกำหนด: เมื่อคลิกเมาส์บนหน้า รับตำแหน่งการคลิกและแสดงจุดเล็ก document.onclick = function(event) {
// รับการประมวลผลที่เข้ากันได้ของวัตถุเหตุการณ์ var event = event ||.
// ตำแหน่งของเมาส์บนหน้า var pageX = event.pageX ||. event.clientX + document.documentElement.scrollLeft;
var pageY = event.pageY ||. event.clientY + document.documentElement.scrollTop;
// คำนวณตำแหน่งที่ควรแสดง <p> var targetX = pageX - mouse.offsetWidth / 2;
var targetY = pageY - mouse.offsetHeight / 2;
// แสดง <p> ณ ตำแหน่งที่คลิกด้วยเมาส์
mouse.style.display = 'บล็อก';
mouse.style.left = targetX + 'px';
mouse.style.top = เป้าหมาย Y + 'px';
-
</สคริปต์>
</ร่างกาย>
</html> [กรณี] เอฟเฟกต์การลากเมาส์
ตำแหน่งของกล่อง (ค่าด้านซ้ายและด้านบน) = ตำแหน่งของเมาส์ (ค่าด้านซ้ายและด้านบน) - ระยะห่างระหว่างเมาส์และกล่อง (ค่าด้านซ้ายและด้านบน) เมื่อกดเมาส์
ยกตัวอย่าง
แนวคิดในการนำโค้ดไปใช้ :
① เขียน HTML และออกแบบกล่องป๊อปอัปเพื่อใช้เอฟเฟกต์แบบลากและวาง
2) เพิ่มเหตุการณ์การเลื่อนเมาส์และตัวจัดการไปที่แถบลาก
3 จัดการเหตุการณ์การเคลื่อนไหวของเมาส์เพื่อให้ได้เอฟเฟกต์การลากเมาส์
④ จัดการเหตุการณ์การปล่อยปุ่มเมาส์เพื่อไม่ให้กล่องป๊อปอัปขยับอีกต่อไปหลังจากปล่อยปุ่มเมาส์
การใช้รหัส
<!DOCTYPE html>
<html>
<หัว>
<meta charset="UTF-8">
<title>การลากเมาส์</title>
<สไตล์>
เนื้อความ{ระยะขอบ: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;สีพื้นหลัง:#7c9299;border-bottom:1px solid #369;line-height:25px;color:#fff;cursor:move}
#box_close{ลอย:ขวา;เคอร์เซอร์:ตัวชี้}
</สไตล์>
</หัว>
<ร่างกาย>
<p id="box" class="box">
<p id="วาง" class="hd">
ข้อมูลการลงทะเบียน (ลากและวางได้)
<span id="box_close">【ปิด】</span>
</p>
<p class="bd"></p>
</p>
<สคริปต์>
// รับกล่องที่ลากแล้วลากแถบ var box = document.getElementById('box');
var drop = document.getElementById('ดร็อป');
drop.onmousedown = function(event) { // กดเมาส์บนแถบลากเพื่อลากกล่อง var event = event || window.event;
// รับตำแหน่งเมื่อกดเมาส์ var pageX = event.pageX ||. event.clientX + document.documentElement.scrollLeft;
var pageY = event.pageY ||. event.clientY + document.documentElement.scrollTop;
// คำนวณตำแหน่งของตำแหน่งที่คลิกเมาส์จากกล่อง var spaceX = pageX - box.offsetLeft;
var spaceY = pageY - box.offsetTop;
document.onmousemove = function(event) { // รับตำแหน่งเมาส์เมื่อเลื่อนเมาส์
// รับตำแหน่งของเมาส์หลังจากการเคลื่อนไหว var pageX = event.pageX ||. event.clientX + document.documentElement.scrollLeft;
var pageY = event.pageY ||. event.clientY + document.documentElement.scrollTop;
// คำนวณและกำหนดตำแหน่งของกล่องหลังการเคลื่อนไหว box.style.left = pageX - spaceX + 'px';
box.style.top = pageY - spaceY + 'px';
-
-
document.onmouseup = function() {//ยกเลิกการเคลื่อนที่ของกล่องเมื่อปล่อยปุ่มเมาส์ document.onmousemove = null;
-
</สคริปต์>
</ร่างกาย>
</html> เหตุการณ์ของแป้นพิมพ์
เหตุการณ์ของแป้นพิมพ์หมายถึงเหตุการณ์ที่เกิดขึ้นเมื่อผู้ใช้ใช้แป้นพิมพ์
ตัวอย่างเช่น ผู้ใช้กดปุ่ม Esc เพื่อปิดแถบสถานะที่เปิดอยู่ และกดปุ่ม Enter เพื่อสลับเคอร์เซอร์ขึ้นและลงโดยตรง เป็นต้น
ข้อมูลต่อไปนี้สาธิตการใช้การสลับปุ่ม Enter รายละเอียดดังแสดงในตัวอย่าง
การใช้รหัส
<!DOCTYPE html>
<หัว>
<meta charset="UTF-8">
<title>กด Enter เพื่อเปลี่ยน</title>
</หัว>
<ร่างกาย>
<p>ชื่อผู้ใช้: <input type="text"></p>
<p>อีเมล: <input type="text"></p>
<p>หมายเลขโทรศัพท์มือถือ: <input type="text"></p>
<p>คำอธิบายส่วนตัว: <input type="text"></p>
<สคริปต์>
อินพุต var = document.getElementsByTagName('อินพุต');
สำหรับ (var i = 0; i < inputs.length; ++i) {
อินพุต [i] .onkeydown = ฟังก์ชั่น (e) {
// รับการประมวลผลที่เข้ากันได้ของวัตถุเหตุการณ์ var e = event ||.
// ตรวจสอบว่าคีย์ที่กดคือ Enter หรือไม่ หากเป็นเช่นนั้น ให้อินพุตถัดไปได้รับการโฟกัสหาก (e.keyCode === 13) {
// สำรวจกล่องอินพุตทั้งหมดและค้นหาตัวห้อยของอินพุตปัจจุบันสำหรับ (var i = 0; i < inputs.length; ++i) {
ถ้า (อินพุต [i] === สิ่งนี้) {
// คำนวณดัชนีขององค์ประกอบอินพุตถัดไป var = i + 1 >= inputs.length ? 0 : i + 1;
หยุดพัก;
-
-
// หากอินพุตถัดไปยังคงเป็นกล่องข้อความ ให้รับโฟกัสของแป้นพิมพ์หาก (inputs[index].type === 'text') {
อินพุต [ดัชนี] .focus (); // เหตุการณ์โฟกัสทริกเกอร์ }
-
-
-
</สคริปต์>
</ร่างกาย>
</html> โปรดทราบว่า
ค่าคีย์ที่บันทึกไว้ในเหตุการณ์การกดปุ่มคือรหัส ASCII และ
ค่าคีย์ที่บันทึกไว้ในเหตุการณ์การกดปุ่มและคีย์อัพเป็นรหัสคีย์เสมือน
สำหรับรายละเอียด โปรดดูคู่มือ เช่น MDN
เหตุการณ์แบบฟอร์ม
หมายถึง เหตุการณ์ที่เกิดขึ้นเมื่อใช้งานเว็บฟอร์ม
ตัวอย่างเช่น การตรวจสอบแบบฟอร์มก่อนส่ง การดำเนินการยืนยันเมื่อแบบฟอร์มถูกรีเซ็ต เป็นต้น JavaScript ให้เหตุการณ์แบบฟอร์มที่เกี่ยวข้อง
ข้อมูลต่อไปนี้จะแสดงให้เห็นว่าจะส่งและรีเซ็ตข้อมูลแบบฟอร์มเป็นตัวอย่างหรือไม่ รายละเอียดดังแสดงในตัวอย่าง
การใช้รหัส
<!DOCTYPE html>
<หัว>
<meta charset="UTF-8">
<title>กิจกรรมแบบฟอร์ม</title>
</หัว>
<ร่างกาย>
<แบบฟอร์ม id="ลงทะเบียน">
<label>ชื่อผู้ใช้: <input id="user" type="text"></label>
<ประเภทอินพุต = "ส่ง" ค่า = "ส่ง">
<ประเภทอินพุต = "รีเซ็ต" ค่า = "รีเซ็ต">
</แบบฟอร์ม>
<สคริปต์>
// รับวัตถุแบบฟอร์มและองค์ประกอบที่ต้องตรวจสอบ var regist = document.getElementById('register');
ผู้ใช้ var = document.getElementById('ผู้ใช้');
regist.onsubmit = function(event) { // เพิ่มเหตุการณ์ส่งไปยังแบบฟอร์ม // รับวัตถุเหตุการณ์และส่งออกประเภทเหตุการณ์ปัจจุบัน var event = event || window.event;
console.log(event.type);
// ตรวจสอบว่าเนื้อหาขององค์ประกอบแบบฟอร์มว่างเปล่าหรือไม่ หากว่างเปล่า ให้คืนค่าเท็จ หรือไม่เช่นนั้นก็คืนค่าจริง
ส่งคืน user.value ? true : false;
-
regist.onreset = function (event) { // เพิ่มเหตุการณ์รีเซ็ตลงในแบบฟอร์ม // รับวัตถุเหตุการณ์และส่งออกประเภทเหตุการณ์ปัจจุบัน var event = event || window.event;
console.log(event.type);
// พิจารณาว่าจะยืนยันการรีเซ็ตหรือไม่ กด "ตกลง" เพื่อคืนค่าเป็นจริง กด "ยกเลิก" เพื่อคืนค่าเท็จ
return Confirm('โปรดยืนยันว่าคุณต้องการรีเซ็ตข้อมูลหรือไม่ หลังจากรีเซ็ตแล้ว เนื้อหาทั้งหมดที่กรอกในแบบฟอร์มจะถูกล้าง');
-
</สคริปต์>
</ร่างกาย>
</html> การวิเคราะห์ เอฟเฟกต์การขยายภาพ
แบบลงมือปฏิบัติจริง
วิธีการใช้เอฟเฟกต์การขยายภาพ:
1 เตรียมรูปภาพที่เหมือนกันสองรูปภาพ รูปภาพเล็กและรูปภาพขนาดใหญ่
2 ภาพขนาดย่อจะแสดงในพื้นที่แสดงผลิตภัณฑ์
3 ภาพขนาดใหญ่ใช้เพื่อแสดงพื้นที่ที่เกี่ยวข้องในภาพขนาดใหญ่ตามสัดส่วนเมื่อเมาส์เลื่อนไปที่ภาพขนาดเล็ก
แนวคิดในการนำโค้ดไปใช้ :
1 เขียนหน้า HTML เพื่อแสดงรูปภาพขนาดเล็ก หน้ากากที่ซ่อนเมาส์ และรูปภาพขนาดใหญ่
2 เมื่อเมาส์เลื่อนไปที่ภาพขนาดเล็ก หน้ากากเมาส์และภาพขนาดใหญ่จะปรากฏขึ้น
3 เมื่อเมาส์ขยับ ให้มาสก์ขยับในภาพเล็ก
④ จำกัดช่วงการเคลื่อนย้ายของหน้ากากในภาพขนาดเล็ก
⑤ แสดงภาพขนาดใหญ่ตามสัดส่วนของความครอบคลุมของมาส์กในภาพขนาดเล็ก