الأحداث في المتصفح موجودة في شكل كائنات. وبالمثل ، هناك أيضًا اختلاف في الحصول على كائنات الأحداث بين متصفح IE ومتصفحات DOM القياسية. في متصفح IE ، يعد كائن الحدث حدثًا لكائن Windows. عادة ما تستخدم الطريقة التالية للوصول إليها.
نسخة الكود كما يلي:
op.onclick = function () {
var oevent = window.event ؛
}
على الرغم من أنها خاصية كائن نافذة ، إلا أنه لا يمكن الوصول إلى كائن الحدث إلا عند حدوث الحدث. بعد تنفيذ جميع وظائف معالجة الأحداث ، يختفي الكائن.
ينص DOM القياسي على أنه يجب تمرير كائنات الأحداث إلى وظائف معالجة الأحداث كمعلمات فريدة من نوعها. عادة ما يتم استخدام كائنات الأحداث في متصفحات Firefox مرة واحدة كمعلمات ، والرمز كما يلي:
نسخة الكود كما يلي:
op.onclick = function (oevent) {
}
لذلك ، لكي تكون متوافقة مع كلا المتصفحين ، عادة ما يتم استخدام الطريقة التالية
نسخة الكود كما يلي:
op.onclick = function (oevent) {
if (window.event) oevent = window.event ؛
}
بعد الحصول على كائن الحدث ، يمكن للمتصفح التعامل مع الأحداث المختلفة من خلال سلسلة من الخصائص والأساليب ، مثل أحداث الماوس وأحداث لوحة المفاتيح وأحداث المتصفح. انتظر
يسرد ما يلي الخصائص والأساليب الشائعة:
من ما سبق ، يمكننا أن نرى أن نوعين من المتصفحات لا يزال لديهم بعض أوجه التشابه. على سبيل المثال ، تكون سمة النوع متوافقة مع المتصفحات المختلفة. إنه يشير إلى نوع الحدث وإرجاع قيم مثل "Click" و "Mousemove".
هذا مفيد جدًا للتعامل مع أنواع متعددة من الأحداث في نفس الوظيفة.
كما يلي: نفس الوظيفة تتعامل مع أحداث متعددة.
نسخة الكود كما يلي:
<script language = "javaScript">
مقبض الوظيفة (oevent) {
var disp = document.getElementById ("display") ؛
if (window.event) oevent = window.event ؛ // التعامل مع التوافق والحصول على الكائن
if (oevent.type == "انقر")
disp.innerhtml += "أنت نقر علي!" ؛
آخر إذا (oevent.type == "Mouseover")
disp.innerhtml += "أنت تنتقل إلى الألغام" ؛
}
window.onload = function () {
var op = document.getElementById ("box") ؛
op.onclick = مقبض ؛
op.onmouseover = مقبض ؛
}
</script>
<viv>
<div id = "box"> </viv>
<p id = "display"> انقر فوق لي </p>
</div>
يضيف الرمز أعلاه وظيفتين للاستجابة للحدث إلى div من id = "box" ، وهذين الحدثان هما نفس الوظيفة.
في هذه الوظيفة ، فكر أولاً في الحصول على كائن الحدث متوافقًا ، ثم استخدام قرص سمة النوع لاسم الحدث.
عند اكتشاف مفاتيح التحول الثلاثة ، ALT ، و CTRL ، فإن الطرق المستخدمة من نوعين من المتصفحات هي نفسها تمامًا ، وكلاهما لهما السمات الثلاث لـ ShiftKey و Altkey و Ctrlkey.
الرمز كما يلي:
نسخة الكود كما يلي:
var bshift = oevent.shiftkey ؛
var balt = oevent.altkey ؛
var bctrl = oevent.ctrlkey ؛
بالإضافة إلى ذلك ، عند الحصول على مؤشرات الماوس ، تكون الأساليب المستخدمة من قبل كلا النوعين من المتصفحات متماثلة ، وكلاهما يتضمن ClientX ، Clienty ، ScreenX ، و Screeny.
من بينها ، يمثل ClientX والعميل موقع الماوس في منطقة العميل ، ولا يتضمنون شريط حالة المتصفح ، شريط القائمة ، إلخ.
الرمز كما يلي:
نسخة الكود كما يلي:
var iclientx = oevent.clientx ؛
var iclienty = oevent.clienty ؛
الرجوع إلى Screenx و Screeny إلى موضع الماوس على شاشة الكمبيوتر بأكملها ، والرمز هو
نسخة الكود كما يلي:
var iscreenx = oevent.screenx ؛
var iscreeny = oevent.screeny ؛
في كثير من الأحيان ، يريد المطورون معرفة أن هذا الحدث ينجم عن هذا الكائن ، أي هدف الحدث.
على افتراض أن العنصر <p> يخصص وظيفة معالج الأحداث onclick ، سيتم اعتبار <p> الهدف عندما يتم تشغيل حدث النقر.
في متصفح IE ، يوجد الهدف في خاصية srcelement لكائن الحدث ، الرمز هو كما يلي
نسخة الكود كما يلي: var otarget = oevent.srcelement ؛
في متصفح DOM القياسي ، يتم تضمين الهدف في السمة الهدف ، والرمز كما يلي
نسخة الكود كما يلي: var otarget = oevent.target ؛
احصل على هدف الحدث
نسخة الكود كما يلي:
<script language = "javaScript">
مقبض الوظيفة (oevent) {
var disp = document.getElementById ("display") ؛
if (window.event) oevent = window.event ؛ // التعامل مع التوافق والحصول على الكائن
var otarget ؛
إذا (oevent.srcelement) // التعامل مع التوافق والحصول على الأحداث
otarget = oevent.srcelement ؛
آخر
otarget = oevent.target ؛
disp.innerhtml + = "اسم العنصر:" + otarget.tagname + "<br>" + "محتوى العنصر:" + otarget.textContent + "<br>"
+ "العقدة التالية مباشرة:" + otarget.textContent + "<br>"
؛
}
window.onload = function () {
var op = document.getElementById ("box") ؛
op.onclick = مقبض ؛
}
</script>
<viv>
<div id = "box">
مربع المحتوى
</div>
<p id = "display"> </p>
</div>
(ملحق) خصائص كائن العنصر http://www.w3school.com.cn/xmldom/dom_element.asp
(ملحق) طرق كائن العنصر http://www.w3school.com.cn/xmldom/dom_element.asp
نظرًا لأن هدف الحدث يختلف في نوعين من المتصفحات ، يجب أن يضمن الكود التوافق. الممارسة المعتادة هي استخدام الكائن مباشرة كشرط للبيان IF. الرمز كما يلي
نسخة الكود كما يلي:
إذا (oevent.srcelement)
otarget = oevent.srcelement ؛
آخر
otarget = oevent.target ؛
هذه الطريقة شائعة الاستخدام أيضًا في الخصائص الأخرى.