بالنسبة لأنواع أحداث المستخدم ، فإن الأكثر شيوعًا هو الماوس ولوحة المفاتيح والمتصفح.
1. حدث الماوس:
يتم استخدام جميع أحداث الماوس بشكل متكرر. يتم استخدام الأمثلة التالية لاختبار أحداث الماوس المختلفة.
نسخة الكود كما يلي:
<script language = "javaScript">
مقبض الوظيفة (oevent) {
var disp = document.getElementById ("display") ؛
if (window.event) oevent = window.event ؛ // التعامل مع التوافق والحصول على الكائن
disp.innerhtml + = "mouse اسم الحدث:" + oevent.type + "<br>" ؛
}
window.onload = function () {
var op = document.getElementById ("box") ؛
op.onmousedown = مقبض ؛
op.onmouseover = مقبض ؛
op.onmouseup = مقبض ؛
op.onmouseout = مقبض ؛
op.onclick = مقبض ؛
op.ondblclick = مقبض ؛
}
</script>
<viv>
<div id = "box">
مربع المحتوى
</div>
<p id = "display"> </p>
</div>
اختبار زر القيمة المفتاح الماوس (مع جدول مرجع)
نسخة الكود كما يلي:
<script language = "javaScript">
وظيفة testclick (oevent) {
var odiv = document.getElementById ("display") ؛
إذا (window.event)
oevent = window.event ؛
odiv.innerhtml += oevent.button ؛ // إخراج قيمة الزر
}
document.onmousedown = testClick ؛
window.onload = testClick ؛ // لم يضغط الاختبار على أي مفاتيح
</script>
<viv>
<p id = "display"> </p>
</div>
2. أحداث لوحة المفاتيح
لا توجد أنواع كثيرة من أحداث لوحة المفاتيح ، فقط ثلاثة أنواع من الأحداث.
KeyDown (اضغط على مفتاح ، واضغط مع الاستمرار في تشغيله)
keypress (يتم تشغيله عند الضغط على المفتاح وإنشاء حرف ، أي أنه يتجاهل مفاتيح الوظائف مثل التحول ، ALT ، CTRL)
keyup (يتم تشغيله عند إصدار مفتاح)
مثال الاستماع إلى لوحة المفاتيح:
نسخة الكود كما يلي:
<script language = "javaScript">
مقبض الوظيفة (oevent) {
if (window.event) oevent = window.event ؛ // التعامل مع التوافق والحصول على كائن الحدث
var odiv = document.getElementById ("display") ؛
odiv.innerhtml + = oevent.type + "" ؛ // اسم الحدث الإخراج
}
window.onload = function () {
var otextarea = document.getElementById ("textin") ؛
otextarea.onkeydown = مقبض ؛ // استمع إلى جميع أحداث لوحة المفاتيح
otextarea.onkeyup = مقبض ؛
otextarea.onkeypress = مقبض ؛
}
</script>
<viv>
<textarea rows = "4" cols = "50" id = "textin">
</textarea>
<p id = "display"> </p>
</div>
بالنسبة للوحة المفاتيح ، فإن الشيء الأكثر أهمية هو اسم الحدث ، ولكن ما يتم الضغط عليه. نظرًا لأن IE لا يحتوي على خاصية charcode ، فإن رمز Keycode هو نفسه رمز مفاتيح DOM القياسي فقط عند حدوث أحداث keydown و keyup.
في أحداث keypress ، يتم استخدام الطريقة التالية.
نسخة الكود كما يلي: oevent.charcode = (oevent.type == "keypress")؟ oevent.keycode :() ؛
السبب في عدم اعتماد رمز المفاتيح هو أنه يمثل مفاتيح لوحة المفاتيح ، وليس أحرف الإخراج. لذلك ، الإخراج "A" و "A" ، رمز المفاتيح مكافئ ، ويتميز charcode بالأحرف.
بالإضافة إلى ذلك ، في Keypress ، تكون قيمة رمز المفاتيح الخاص بـ DOM القياسي دائمًا 0 ؛
مثال: الخصائص ذات الصلة لأحداث لوحة المفاتيح:
نسخة الكود كما يلي:
<script language = "javaScript">
مقبض الوظيفة (oevent) {
var odiv = document.getElementById ("display") ؛
if (window.event) oevent = window.event ؛ // التعامل مع التوافق والحصول على كائن الحدث
// اضبط قيمة IE charcode
oevent.charcode = (oevent.type == "keypress")؟ oevent.keycode: 0 ؛
odiv.innerhtml + = oevent.type + ": charcode" + oevent.charcode + "keycode" + oevent.keycode + "<br>" ؛ // اختبار الإخراج
}
window.onload = function () {
var otextarea = document.getElementById ("textin") ؛
otextarea.onkeydown = مقبض ؛ // استمع إلى جميع أحداث لوحة المفاتيح
otextarea.onkeypress = مقبض ؛
}
</script>
<viv>
<textarea rows = "4" cols = "50" id = "textin">
</textarea>
<p id = "display"> </p>
</div>
3.HTM الحدث
بالنسبة للمتصفحات ، فإن العديد من أحداث HTML لها أحداث خاصة بها ، وغالبًا ما يتعرض المستخدمون من قبل المستخدمين ، مثل التحميل ، والخطأ ، والاختيار ، وما إلى ذلك.
يعد حدث التحميل أحد الأحداث الشائعة الاستخدام ، لأنه لم يتم بناء إطار DOM قبل اكتمال تحميل الصفحة ، لذلك لا يمكن أن تحدث عمليات ذات صلة.
قم بتعيين تحميل إلى كائنات النوافذ ، فإن حدث التفريغ يعادل أساليب Onload و OnUnload التي يتميز بها <Body>.