1. الأحداث عبر النظام الأساسي
ما هو الحدث عبر المنصات؟ وهذا هو ، يتم تنفيذ نفس الحدث على متصفحات مختلفة ، والطرق المستخدمة مختلفة.
ما هو كائن EventUtil؟ ما هي وظيفتها؟ أي حاوية تجمع بين جميع الوظائف المتعلقة بالأحداث لتسهيل إدارة كائنات الأحداث ، وليس لها سمات. إنه يتعامل بشكل أساسي مع التشغيل بين أحداث DOM و IE لجعلها متشابهة قدر الإمكان.
دعونا نلقي نظرة على خصائص الكائن والأساليب بين DOM و IE للمقارنة (لا توجد سوى الخصائص والأساليب المختلفة بين الاثنين). هناك خمس نقاط رئيسية:
خصائص DOM وطرقها أي خصائص وطرق
Charcode Keycode
PrevingDefault ReturnValue = false
conferenceTarget fromObj | Toobj
إيقاف CancelBuble = صحيح
الهدف srcobj
دعونا نلقي نظرة على ذلك مع عرض تجريبي صغير ، والذي يمكنه حل مشكلة توافق المنصات المتقاطعة للأحداث:
<html> <head> <title> eventUtil </itlect> <script eventType = "text/javaScript"> var eventutil = {// استمع إلى AddListener الحدث: function (obj ، eventtype ، fn) {if (obj.addeventListener) {obj.addeventListener (eventtype ، fn) ؛ } آخر إذا (obj.attachevent) {obj.attachevent ('on' + eventType ، fn) ؛ } آخر {obj ['on' + eventType] = fn ؛ }} ، // إرجاع كائن الحدث getevent: function (event) {return event || window.event ؛ // حدث العودة؟ الحدث: window.event ؛ } ، // إرجاع كائن الحدث الهدف getTarget: function (event) {return event.target || event.srcobj ؛ } ، PreventDefault: function (event) {if (event.preventDefault) {event.preventDefault () ؛ } آخر {event.returnvalue = false ؛ }} ، removelistener: function (obj ، eventType ، fn) {if (obj.removeeventListener) {obj.removeeventListener (eventType ، fn ، false) ؛ } آخر إذا (obj.deattachevent) {obj.detachevent (eventType ، fn) ؛ } آخر {obj ['on' + eventType] = null ؛ }} ، stopPropagation: function (event) {if (event.stopPropagation) {event.stopPropagation () ؛ } آخر {event.cancelBubble = true ؛ }}} ؛ </script> </head> <body> <input eventtype = "button" value = "Click Me" ID = "BTN"/> <p> event </p> <a> hello word! </a> <script eventtype = "text/javaScript"> function addbtnlisten (event) {var event = eventUtil.getEvent (event) ؛ var target = eventUtil.getTarget (event) ؛ تنبيه ("اسمي كوك") ؛ ALERT (event.eventtype) ؛ تنبيه (الهدف) ؛ EventUtil.StopPropagation (الحدث) ؛ } function getBodyListen (event) {Alert ("Click Body") ؛ } وظيفة getLinkListen (event) {Alert ("منع الحدث الافتراضي") ؛ var event = eventUtil.getEvent (event) ؛ EventUtil.preventDefault (event) ؛ } window.onload = function () {var btn = document.getObjById ("btn") ؛ var link = document.getobjsbytagname ("a") [0] ؛ EventUtil.AddListener (BTN ، "Click" ، AddBtnListen) ؛ EventUtil.AddListener (document.body ، "Click" ، getBodyListen) ؛ EventUtil.AddListener (الرابط ، "Click" ، getLinkListen) ؛ } </script> </body> </html>يمكن أن تحل الطريقة أعلاه قضية الأحداث عبر المنصات. بعد ذلك ، دعونا نلقي نظرة على خصائص charcode.
أولاً ، حدد طريقة جديدة لـ EventUtil ، Formatevent ، يقبل معلمة ، أي كائن الحدث.
EventUtil.formatevent = function (event) {if (isie && iswin) --- اكتشاف مشاكل المتصفح {event.charcode = (event.type == "keypress")؟ event.keycode: 0 ؛ event.eventPhase = 2 ؛-يشير إلى مرحلة الفقاعات ، أي فقط يدعم الحدث المرحلة الفقاعية} ؛}2. حول الهدف الفقاعي واليرومة
الهدف في المرحلة المستهدفة من دفق الحدث ؛ CurrentTarget موجود في مرحلة التقاط ، والهدف والفقاعة من تيار الحدث. فقط عندما يكون دفق الحدث في المرحلة المستهدفة ، يكون المؤشران متماثلان ، وعندما يكون في مراحل الالتقاط والفقاعة ، يشير الهدف إلى الكائن الذي تم النقر عليه ويشير Current -arget إلى الوالد للحدث الحالي.
<div id = "Outer" style = "Background:#099"> <p> أنا الهدف Div </p> ---- انقر فوق هذا الجزء ، الإخراج: e.target.tagname: p || e.currentTarget.tagname: div <p id = "inner" style = "background:#9c0"> أنا الهدف p </p> --- انقر فوق هذا الجزء ، الإخراج: e.target.tagname: p || e.currentTarget.tagname: div <br> --- انقر فوق هذا الجزء ، الإخراج: e.target.tagname: div || e.currentTarget.tagname: div </viv> // انظر إلى عمود التغيير الثاني: <div id = "outer" style = "background:#099" e.currentTarget.tagname: div <p id = "inner" style = "background:#9c0"> أنا الهدف p </p> --- انقر فوق هذا الجزء ، الإخراج: e.target.tagname: p || e.currentTarget.tagname: div <br> --- انقر فوق هذا الجزء ، الإخراج: e.target.tagname: div || e.currentTarget.tagname: div </viv>
وظيفة getObj (id) {return document.getElementById (id) ؛ } وظيفة addEvent (obj ، event ، fn) {if (window.attachevent) {obj.attachevent ("on" + event ، fn) ؛ } آخر if (window.adDeventListener) {obj.addeventListener (event ، fn ، false) ؛ }} اختبار الوظيفة (e) {Alert (" } var outer = getObj ("Outer") ؛ var inner = getObj ("inner") ؛ // addevent (الداخلية ، "انقر" ، اختبار) ؛ addEvent (الخارجي ، "انقر" ، اختبار) ؛3. الفرق بين IE و DOM
دومي
احصل على الحدث المستهدف.
احصل على رمز الحرف event.charcode event.keycode
قم بحظر Event.PrevetDefault () Event.ReturnValue = خطأ
pubble event.stoppropagation () event.cancelBubble = true
فيما يتعلق بحظر السلوك الافتراضي ، على سبيل المثال ، عندما ينقر المستخدم على النقر بزر الماوس الأيمن ، إذا كنت لا تريد أن تظهر القائمة ، فيمكنك استخدام السلوك الافتراضي:
document.body.oncontextMenu = function (event) {if (isie) {var oevent = window.event ؛ oevent.RETURNVALUE = false ؛ // يمكن أيضًا إرجاعها خطأ مباشرة ؛ منع السلوك الافتراضي} آخر {oevent.preventDefault () ؛ }}4. حدث الماوس
<p> استخدم الماوس الخاص بك للنقر ونقر نقرًا مزدوجًا على Red Square </p> <div onMouseover = "HandleVent (event)" onMouseout = "HandleVent (event)" onMousedOwn = "Genealevent (event)" onMouseup = "Genealevent (event)" onClick = "Genallevent (event)" ondblck = "eventy) id = "txt1" rows = "5" cols = "45"> </textarea> </p> <!-اكتشاف أحداث لوحة المفاتيح-> <p> <pp report type = "text" id = "textbox" onKeyDown = "endled (event)" onkeypress = "event (event)" onKeyup = "handle (event) cols = "45"> </textarea> </p>
ملف JS كما يلي:
دالة HandleVent (event) {var otext = document.getElementById ('txt1') ؛ otext.value+= "/n"+event.type ؛ otext.value+= "/n target is"+(event.srcelement || event.target) .id ؛ otext.value+= "/n at ("+event.clientx+"،"+event.clienty+") في العميل" ؛ otext.value+= "/n button down هو"+event.button ؛ var arrkeys = [] ؛ otext.value+= "/n conferenceTarget Is"+event.RelelingTarget.tagname ؛ //event.reledTarget.TagName يمكن تحديد مصدر ومصدر مقبض الوظيفة (الحدث) {var otext2 = document.getElementById ('txt2') ؛ otext2.value+= "/n"+event.type ؛ var arrkeys = [] ؛ if (event.shiftkey) {arrkeys.push ("shift") ؛} if (event.ctrlkey) {arrkeys.push ("ctrl") ؛} if (event.altkey) {arrkeys.push ("alt") ؛ما سبق هو كل شيء عن هذا المقال ، آمل أن يكون مفيدًا لتعلم الجميع.