كيف تبدأ بسرعة مع VUE3.0: أدخل التعلم
التوصيات ذات الصلة:
البرنامج التعليمي لـ JavaScriptأحداث صفحة
الأفكار: ما هو ترتيب تحميل صفحات HTML؟
الإجابة: يتم تحميل الصفحة من الأعلى إلى الأسفل بالترتيب الذي تمت به كتابة الكود.
المشاكل التي قد تحدث : إذا تم استخدام JavaScript لتشغيل عناصر DOM قبل تحميل الصفحة، فستحدث أخطاء في بناء الجملة.
الحل : يمكن لأحداث الصفحة تغيير توقيت تنفيذ تعليمات JavaScript البرمجية.
أحداث التركيز
في تطوير الويب، تُستخدم أحداث التركيز في الغالب لوظائف التحقق من صحة النماذج وهي واحدة من الأحداث الأكثر استخدامًا.
على سبيل المثال، تغيير نمط مربع النص عندما يتم التركيز على مربع النص، والتحقق من صحة البيانات المدخلة في مربع النص عندما يفقد مربع النص التركيز، وما إلى ذلك.
من أجل السماح للجميع بفهم كيفية استخدام أحداث التركيز بشكل أفضل، فيما يلي عرض توضيحي للتحقق مما إذا كان اسم المستخدم وكلمة المرور فارغين.
تنفيذ التعليمات البرمجية
<!DOCTYPE html>
<الرأس>
<ميتا محارف = "UTF-8">
<title>تحقق من أن اسم المستخدم وكلمة المرور فارغان</title>
<نمط>
الجسم {الخلفية: #ddd؛}
.box{الخلفية:#fff;الحشو:20px 30px;العرض:400px;الهامش: 0 تلقائي;محاذاة النص:المركز;}
.btn{العرض:180px;الارتفاع:40px;الخلفية:#3388ff;الحدود:1px صلب #fff;اللون:#fff;حجم الخط:14px;}
.ipt{العرض:260px;الحشو:4px 2px;}
.نصائح {العرض: 440 بكسل؛ الارتفاع: 30 بكسل؛ الهامش: 5 بكسل تلقائي؛ الخلفية: #fff؛ اللون: أحمر؛ الحدود: 1 بكسل صلب #ccc؛ العرض: لا شيء؛ ارتفاع الخط: 30 بكسل؛ الحشو على اليسار: 20 بكسل؛ الخط- الحجم: 13 بكسل؛}
</نمط>
</الرأس>
<الجسم>
<p id="tips" class="tips"></p>
<ص فئة = "مربع">
<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>
</ص>
<النص البرمجي>
نافذة.onload = وظيفة () {
addBlur($('user')); // تحقق مما إذا كانت القيمة فارغة بعد أن يفقد العنصر الذي يحمل معرف المستخدم التركيز. addBlur($('pass')); معرف التمرير يفقد التركيز ما إذا كانت القيمة فارغة}؛
function $(obj) { // احصل على العنصر المحدد بناءً على المعرف return document.getElementById(obj);
}
function addBlur(obj) { // أضف حدث فقدان التركيز للعنصر المحدد obj.onblur = function() {
isEmpty(this);
};
}
function isEmpty(obj) { // تحقق مما إذا كان النموذج فارغًا if (obj.value === '') {
$('tips').style.display = 'block';
$('tips').innerHTML = 'ملاحظة: لا يمكن أن يكون محتوى الإدخال فارغًا';
} آخر {
$('tips').style.display = 'none';
}
}
</script>
</الجسم>
</html> أحداث الماوس
أحداث الماوس هي الأحداث الأكثر استخدامًا في تطوير الويب.
على سبيل المثال، تبديل المحتوى المعروض في شريط علامات التبويب عندما ينزلق الماوس فوقه؛ لسحب مربع الحالة لضبط موضع العرض، وما إلى ذلك. تستخدم جميع تأثيرات صفحة الويب الشائعة أحداث الماوس.
في تطوير المشروع، غالبًا ما يتم تضمين بعض سمات الماوس شائعة الاستخدام، والتي تُستخدم للحصول على معلومات موضع الماوس الحالي.
سمات pageX وpageY غير متوافقة مع متصفحات IE6-8. لذلك، يلزم التوافق مع متصفحات IE6~8 أثناء تطوير المشروع.
إحداثيات الماوس في المستند تساوي إحداثيات الماوس في النافذة الحالية بالإضافة إلى طول النص الذي تم لفه بواسطة شريط التمرير.
لكي يتمكن الجميع من فهم استخدام أحداث الماوس بشكل أفضل، فلنأخذ العرض الدائري لموضع النقر بالماوس كمثال.
تنفيذ التعليمات البرمجية
<!DOCTYPE html>
<الرأس>
<ميتا محارف = "UTF-8">
<title>إظهار موضع النقر بالماوس</title>
<نمط>
.mouse{position:absolute;background:#ffd965;width:40px;height:40px;border-radius:20px;}
</نمط>
</الرأس>
<الجسم>
<p id="mouse" class="mouse"></p>
<النص البرمجي>
فار ماوس = document.getElementById('mouse');
// المتطلبات: عند النقر بالماوس على الصفحة، احصل على موضع النقر واعرض نقطة صغيرة document.onclick = function(event) {
// احصل على المعالجة المتوافقة لكائن الحدث var events = events ||.window.event;
// موضع الماوس على الصفحة var pageX = events.pageX ||.event.clientX + document.documentElement.scrollLeft;
var pageY = events.pageY ||.event.clientY + document.documentElement.scrollTop;
// احسب الموضع الذي يجب أن يُعرض فيه <p> var targetX = pageX - mouse.offsetWidth / 2;
var targetY = pageY - mouse.offsetHeight / 2;
// عرض <p> في الموقع الذي تم النقر عليه بالماوس
mouse.style.display = 'block';
mouse.style.left = targetX + 'px';
mouse.style.top = targetY + 'px';
};
</script>
</الجسم>
</html> [الحالة] تأثيرات السحب بالماوس
موضع المربع (القيم اليسرى والعليا) = موضع الماوس (القيم اليسرى والعليا) - المسافة بين الماوس والمربع (القيم اليسرى والعليا) عند الضغط على الماوس.
أعط مثالا
أفكار تنفيذ التعليمات البرمجية :
① اكتب HTML وقم بتصميم المربعات المنبثقة لتنفيذ تأثيرات السحب والإفلات.
② أضف حدث mousedown ومعالجه إلى شريط السحب.
③ التعامل مع أحداث حركة الماوس لتحقيق تأثيرات سحب الماوس.
④ تعامل مع حدث تحرير زر الماوس بحيث لا يتحرك المربع المنبثق بعد تحرير زر الماوس.
تنفيذ التعليمات البرمجية
<!DOCTYPE html>
<أتش تي أم أل>
<الرأس>
<ميتا محارف = "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{العرض:100%;الارتفاع:25px;لون الخلفية:#7c9299;الحدود السفلية:1px صلب #369;ارتفاع الخط:25px;اللون:#fff;المؤشر:نقل}
#box_ Close{float:right;cursor:pointer}
</نمط>
</الرأس>
<الجسم>
<p معرف = "مربع" فئة = "مربع">
<p id="drop" class="hd">
معلومات التسجيل (يمكن سحبها وإسقاطها)
<span id="box_ Close">[إغلاق]</span>
</ص>
<p class="bd"></p>
</ص>
<النص البرمجي>
// احصل على المربع المسحوب وشريط السحب var box = document.getElementById('box');
var drop = document.getElementById('drop');
drop.onmousedown = function(event) { // اضغط بالماوس على شريط السحب لسحب المربع var events = events || window.event;
// احصل على الموضع عند الضغط على الماوس var pageX = events.pageX ||.event.clientX + document.documentElement.scrollLeft;
var pageY = events.pageY ||.event.clientY + document.documentElement.scrollTop;
// احسب موضع موضع النقر بالماوس من المربع var spaceX = pageX - box.offsetLeft;
var spaceY = pageY - box.offsetTop;
document.onmousemove = function(event) { // احصل على موضع الماوس عندما يتحرك الماوس بالكامل ويتبع موضع الماوس var events = events ||.
// احصل على موضع الماوس بعد الحركة var pageX = events.pageX ||.event.clientX + document.documentElement.scrollLeft;
var pageY = events.pageY ||.event.clientY + document.documentElement.scrollTop;
// احسب وضبط موضع الصندوق بعد الحركة box.style.left = pageX - spaceX + 'px';
box.style.top = pageY - spaceY + 'px';
};
};
document.onmouseup = function() {// قم بإلغاء حركة الصندوق عند تحرير زر الماوس document.onmousemove = null;
};
</script>
</الجسم>
</html> أحداث لوحة المفاتيح
تشير أحداث لوحة المفاتيح إلى الأحداث التي يتم تشغيلها عندما يستخدم المستخدم لوحة المفاتيح.
على سبيل المثال، يضغط المستخدم على مفتاح Esc لإغلاق شريط الحالة المفتوح، ويضغط على مفتاح Enter لتبديل المؤشر لأعلى ولأسفل مباشرةً، وما إلى ذلك.
يوضح ما يلي استخدام مفتاح الإدخال Enter. التفاصيل كما هو موضح في المثال.
تنفيذ التعليمات البرمجية
<!DOCTYPE html>
<الرأس>
<ميتا محارف = "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>
<النص البرمجي>
فار المدخلات = document.getElementsByTagName('input');
لـ (var i = 0; i < inputs.length; ++i) {
المدخلات[i].onkeydown = وظيفة(ه) {
// احصل على المعالجة المتوافقة لكائن الحدث var e = events ||.
// تحديد ما إذا كان المفتاح الذي تم الضغط عليه هو Enter. إذا كان الأمر كذلك، دع الإدخال التالي يحصل على التركيز if (e.keyCode === 13) {
// اجتياز جميع مربعات الإدخال والعثور على رمز الإدخال الحالي for (var i = 0; i < inputs.length; ++i) {
إذا (المدخلات[i] === هذا) {
// احسب فهرس عنصر الإدخال التالي var Index = i + 1 >= inputs.length 0 : i + 1;
استراحة؛
}
}
// إذا كان الإدخال التالي لا يزال عبارة عن مربع نص، فاحصل على تركيز لوحة المفاتيح if (inputs[index].type === 'text') {
inputs[index].focus(); // حدث التركيز }
}
};
}
</script>
</الجسم>
</html> ملاحظة
قيمة المفتاح المحفوظة بواسطة حدث الضغط على المفتاح هي رمز ASCII، وقيمة
المفتاح المحفوظة بواسطة حدثي keydown وkeyup هي رمز المفتاح الظاهري.
للحصول على التفاصيل، يرجى الرجوع إلى الأدلة مثل MDN.
تشير أحداثالنموذج
إلى الأحداث التي تحدث عند تشغيل نماذج الويب.
على سبيل المثال، التحقق من النموذج قبل إرساله، أو عملية التأكيد عند إعادة تعيين النموذج، وما إلى ذلك. توفر JavaScript أحداث النماذج ذات الصلة.
يوضح ما يلي ما إذا كان سيتم إرسال بيانات النموذج وإعادة تعيينها كمثال. التفاصيل كما هو موضح في المثال.
تنفيذ التعليمات البرمجية
<!DOCTYPE html>
<الرأس>
<ميتا محارف = "UTF-8">
<title>أحداث النموذج</title>
</الرأس>
<الجسم>
<معرف النموذج = "تسجيل">
<label>اسم المستخدم: <input id="user" type="text"></label>
<نوع الإدخال = "إرسال" القيمة = "إرسال">
<نوع الإدخال = "إعادة تعيين" القيمة = "إعادة تعيين">
</النموذج>
<النص البرمجي>
// احصل على كائنات النموذج والعناصر التي تحتاج إلى التحقق منها var regist = document.getElementById('register');
فار المستخدم = document.getElementById('user');
regist.onsubmit = function(event) { // أضف حدث إرسال إلى النموذج // احصل على كائن الحدث وأخرج نوع الحدث الحالي var events = events ||
console.log(event.type);
// تحديد ما إذا كان محتوى عنصر النموذج فارغًا، إذا كان فارغًا، فارجع خطأ، وإلا فارجع صحيحًا
إرجاع قيمة المستخدم صحيح: خطأ؛
};
regist.onreset = function (event) { // أضف حدث إعادة تعيين إلى النموذج // احصل على كائن الحدث وأخرج نوع الحدث الحالي var events = events ||
console.log(event.type);
// تحديد ما إذا كنت تريد تأكيد إعادة التعيين، اضغط على "موافق" للعودة إلى "صحيح"، اضغط على "إلغاء" لإرجاع خطأ
returnfirm("الرجاء تأكيد ما إذا كنت تريد إعادة تعيين المعلومات. بعد إعادة التعيين، سيتم مسح جميع المحتويات المملوءة في النموذج");
};
</script>
</الجسم>
</html> التحليل العملي
لتأثيرات تكبير الصورة
: كيفية تنفيذ تأثيرات تكبير الصورة:
قم بإعداد صورتين متطابقتين، صورة صغيرة وصورة كبيرة.
يتم عرض الصورة المصغرة في منطقة العرض الخاصة بالمنتج.
يتم استخدام الصورة الكبيرة لعرض المنطقة المقابلة في الصورة الكبيرة بشكل متناسب عندما يتحرك الماوس فوق الصورة الصغيرة.
أفكار تنفيذ الكود :
① اكتب صفحة HTML لعرض الصور الصغيرة والأقنعة التي تخفي الماوس والصور الكبيرة.
② عندما يتحرك الماوس على الصورة الصغيرة، يتم عرض قناع الماوس والصورة الكبيرة.
③ عندما يتحرك الماوس، دع القناع يتحرك في الصورة الصغيرة.
④ حدد النطاق المتحرك للقناع في الصورة الصغيرة.
⑤ اعرض الصورة الكبيرة بشكل متناسب بناءً على تغطية القناع في الصورة الصغيرة.
التوصيات ذات الصلة: برنامج JavaScript التعليمي
ما سبق هو تحليل مفصل لأحداث JavaScript الخمسة الرئيسية لمزيد من المعلومات، يرجى الانتباه إلى المقالات الأخرى ذات الصلة على موقع PHP الصيني!
