ملاحظات تعلم JS حول نموذج معالجة الحدث

توجد أربعة نماذج حدث في جميع المتصفحات: نموذج الحدث الأصلي، ونموذج الحدث القياسي ونموذج حدث IE، بالإضافة إلى نموذج حدث Netscape4، وسأقوم بتقديم شرح مفصل عنها.

1- هناك أربعة نماذج معالجة الحدث موجودة حاليًا وهي: نموذج الحدث الأصلي، نموذج الحدث القياسي، ونموذج حدث IE، بالإضافة إلى نموذج حدث Netscape4، ولكن يمكن تجاهله

2- يمكن تقسيم نماذج معالجة الحدث إلى معالجة الحدث الأساسية ومعالجة الحدث المتقدمة، ونموذج الحدث الأصلي ينتمي إلى معالجة الحدث الأساسية، ونموذج الحدث القياسي ونموذج حدث IE ينتميان إلى معالجة الحدث المتقدمة

أولاً: معالجة الحدث الأساسية:

معالجة الحدث الأساسية تشير بشكل رئيسي إلى معالجة الحدث التي يتم تحقيقها بواسطة نموذج الحدث الأصلي. وهي تتكون بشكل رئيسي من نوعين:

(1) كحدث معرف ميزة HTML، مثل <div onmouseover=”var a=1; alert();”>……</div> // هنا،onmouseover هو مجرد مثال، ويشمل العديد من الأحداث الأخرى

في هذا النمط، يتم تخصيص سلسلة JS لجهاز معالجة الحدث (مثل onmouseover إلخ)، ويقوم النظام بتغليف هذه السلسلة في وظيفة مجهولة المصدر. يمكن أن يحتوي هذا على كلمة المفتاح this، والتي تشير إلى العنصر هذا، وكلمة المفتاح event، والتي تمثل عنصر الحدث الذي يحدث عند الحدث (يستخدم في المتصفحات القياسية). مثل <div onmouseover=”f(this,event);”>……</div>

　في الواقع، يمكننا رؤية onmouseover إلخ كوظيفة، وهي وظيفة فارغة قبل تخصيص كود js لها. عند تخصيص كود js لها، فإنه يعني إضافة كود إلى وظيفة فارغة. لأن onmouseover إلخ هو وظيفة، يمكننا تسميتها بوضوح، مثل element.onmouseover(), ولكن هذا لن يؤدي إلى حدوث حدث mouseover بالفعل.

يمكنك إرجاع false من وظيفة الحدث (مثل onmoouseover إلخ) لمنع حدوث العمل الافتراضي.

الوظيفة تعمل داخل نطاق معرف لها، لذا إذا أعطيت قيمة لجهاز معالجة الحدث ككود js، فهذا يعني أنك قد قمت بتعريف وظيفة في بيئة هذا العنصر HTML، وهو بيئة خاصة، حيث أن نطاقه الأعلى ليس بيئة العنصر العالمي window، بل بينهما يوجد على الأقل بيئة نطاق واحدة. وعندما تعرف وظيفة في داخل <script>، فإن بيئة نطاقها الأعلى هي window (بالطبع يجب النظر في الوظائف المدمجة بشكل مختلف). لذا، من الأفضل وضع الكود في وظيفة معرفة في داخل <script>، ثم تخصيص هذه الوظيفة لجهاز معالجة الحدث، مثل <div onmouseover=“function();”>……</div>

(2) كحالة من جافا سكريبت معالجة الحدث مثل element.onmouseover=function(){……}

يُلاحظ في هذا النوع، لا يمكنك أيضًا تعيين سلسلة من أوامر JavaScript للوظيفة المعالجة، بل يجب أن تُعطى الوظيفة (ليس استدعاء الوظيفة) أو وظيفة مجهولة النaming لها، مثل element.onmouseover=function(){……} أو element.onmouseover=f؛ حيث أن f هي وظيفة، لا يمكنك إضافة الأقواس هنا

معالجة الحدث الأساسية ستنتقل أيضًا بشكل فقاعي

　ثانيًا، معالجة الحدث المتقدمة:

معالجة الحدث المتقدمة تشير إلى معالجة الحدث التي يتم تنفيذها باستخدام نموذج الحدث القياسي ونموذج الحدث IE.

【فهم المفهوم】 يمكن تقسيم انتقال الحدث إلى نوعين: واحد هو تسرب الحدث، والآخر هو انتقال الحدث.

تسرب الحدث: أي انتقال الحدث من الخارج إلى الداخل، يحدث الحدث في كل مستوى

انتقال الحدث؛ أي انتقال الحدث من الداخل إلى الخارج، يحدث الحدث في كل مستوى، وليس كل حدث ينتقل.

（1）نموذج الحدث القياسي

نموذج الحدث القياسي يمكنه حدوث انتقال الحدث والتسرب الحدث.

【shi jian zhu ce han shu】

addEventListener() هذا الطريقة تستخدم لتسجيل برنامج معالجة الحدث لعدد معين من العناصر، ويحتوي على ثلاثة معلمات، المعلمات الأولى هي اسم الحدث، يرجى ملاحظة عدم وجود بادئة on، المعلمات الثانية هي برنامج معالجة الحدث (يمكن أن يكون أيضًا وظيفة مجهولة النaming)، عند حدوث الحدث، يرسل النظام تلقائيًا Object Event كمعلمات أولى للوظيفة. المعلمات الثالثة هي قيمة منطقية، إذا كانت صحيحة، فإنها تستخدم فقط في مرحلة استقبال الحدث، وإذا كانت خطأ، فإنها تستخدم فقط في مرحلة انتقال الحدث، عادةً ما يتم تعيينها على خطأ

على سبيل المثال: element.addEventListener(“click”,f,false) //حيث أن f هي وظيفة

يمكن تعريف f وظيفة بهذا الشكل: function f(e){……} //تمثل المعلمات في وقت حدوث الحدث Object Event

من ميزات معالجة الحدث المتقدمة أن يمكنك تسجيل عدة وظائف معالجة الحدث لنفس العنصر، لا يمكن تحديد ترتيب تنفيذ هذه الوظائف، ولكن عادةً يتم تنفيذها وفقًا لترتيب التسجيل، إذا تم تسجيل وظيفة معالجة الحدث مرة أخرى، فإن الأولى فقط ستكون فعالة.

removeEventListener() هذا الطريقة تستخدم لفك تسجيل الحدث، وثلاثة معلماتها متطابقة معaddEventListener()

　(2) IE shi jian mo xing

　IE shi jian mo xing zhi chi zi chi shi jian bao pang chuan bo

【shi jian zhu ce han shu】

attacthEvent() cuo fa you liang ge can shu, yi ge wei shi jian ming, zhu yi you qian zhu on, di er ge wei shi jian chu li han shu. li mu element.attachEvent(“onclick”,f)

　IE shi jian mo xing de Event duan xiang bu shi zhi wei shi jian fa sheng shi zuo wei can shu chuan ru shi jian chu li han shu de, IE de Event duan xiang shi yi ge window de quan jiu duan xiang, zhi you zai shi jian fa sheng shi cai ke yi kan guo.

suoyi f han shu zhe me ding yi: function f(){var e=window.event;……} //zhong zhong e jiu qu de le Event duan xiang

detachEvent() cuo fa zai yong lai cai xiao shi jian zhu ce, can shu yu attacthEvent() xiang tai

　addEventListener() yu attacthEvent() de yi ge zhong yao qie bi shi attacthEvent() zhu ce de shi jian chu li han shu zhong de this guo jian yong hao yuan suo zhi xiang de shi window duan xiang, er addEventListener() zhu ce de shi jian chu li han shu zhong de this zhi xiang de shi fa sheng shi jian de yuan su

　(3)、IE yu zhun dai shi jian mo xing de Event duan xiang bi jiao

IE shi jian duan xiang	IE shi jian duan xiang	zhun dai shi jian duan xiang	zhun dai shi jian duan xiang
altKey	true biao shi an ni le ALT jian, false biao shi mei you	altKey	true biao shi an ni le ALT jian. false biao shi mei you
ctrlKey	true biao shi an ni le CTRL jian, false biao shi mei you	ctrlKey	true biao shi an ni le CTRL jian, false biao shi mei you
shiftKey	true biao shi an ni le SHIFT jian, false biao shi mei you	shiftKey	true biao shi an ni le SHIFT jian, false biao shi mei you
button	ma sou shi jian. 0 biao shi mei you an ni ma sou jian, 1 wei an ni zuo jian, 2 wei an ni you jian, 4 wei zhong jian jian, 3 wei tong shi an ni zuo jian he you jian, 5 wei an ni zuo jian he zhong jian, 6 wei an ni you jian he zhong jian, 7 wei an ni zuo jian, zhong jian, you jian	button	0 wei zuo jian, 1 wei zhong jian, 2 wei you jian
clientX	shi jian fa sheng shi, ma sou jiao zhi zai chu li yuan jing xiang (bu bao han gong ju tiao, gun dao ceng et cun) de X jiao duan	clientX	shi jian fa sheng shi, ma sou jiao zhi zai chu li yuan jing xiang (bu bao han gong ju tiao, gun dao ceng et cun) de X jiao duan
clientY	tong shang	clientY	tong shang
screenX	shi jian fa sheng shi, ma sou jiao zhi zai quan ju shi pin shang de X jiao duan	screenX	shi jian fa sheng shi, ma sou jiao zhi zai quan ju shi pin shang de X jiao duan
screenY	tong shang	screenY	tong shang
type	shi jian de ming cheng (ru click)	type	shi jian de ming cheng (ru click)
srcElement	yuan qing shi de yuan su	target	yuan qing shi de yuan su
keyCode	dui yu keypress shi jian, biao shi an jian de unicode zi mu, dui yu keydown he keyup shi jian ze biao shi an jian de shu zi ma ma	charCode	biao shi an jian de Unicode zi mu
		keyCode	يعني رمز الرقم المميز للزر
cancelBubble	إذا كانت القيمة true، فإنها تعيق استمرار تفشي الحدث	stopPropagation	يمكنك استدعاء هذه الطريقة لمنع استمرار تفشي الحدث
		cancelBubble	القيمة true تعني أن تفشي الحدث تم إلغاؤه، والقيمة false تعني أن لم يتم إلغاؤه
returnValue	إذا كانت القيمة false، فإنها تعيق سلوك الحدث الافتراضي	preventDefault()	بالإمكان استخدام هذه الطريقة لمنع سلوك الحدث الافتراضي
offsetX	الحصول على محور x للفارغ الذي أثار الحدث عند حدوث الحدث، باستخدام الزاوية العلوية اليسرى للفارغ نفسه (لا تحتاج إلى حساب التدرج والهوامش)	layerX	إذا لم يتم تعيين العنصر الذي أثار الحدث بشكل ديناميكي، فإنه يعود إلى محور x للأسرة القريبة التي تم تعيينها بشكل ديناميكي، باستخدام الزاوية العلوية اليسرى للجدار الخارجي للأسرة كنقطة البداية. 　　　　　　　 إذا تم تعيين العنصر الذي أثار الحدث بشكل ديناميكي، فإنه يعود إلى محور x للفارغ الذي أثار الحدث، باستخدام الزاوية العلوية اليسرى للحدود للفارغ كنقطة البداية.
x	الحصول على محور x للأسرة القريبة للعنصر الذي أثار الحدث الذي تم تعيينه بشكل ديناميكي، باستخدام الزاوية العلوية اليسرى للجدار الخارجي للأسرة كنقطة البداية

هذا هو نهاية محتوى هذا المقال، نأمل أن يكون قد ساعد في تعلمكم، ونأمل أن تشجعوا دائمًا على دعم دروس النفخ.

البيان: محتويات هذا المقال تم جمعها من الإنترنت، ملكية المحتوى تخص صاحب الحقوق، المحتوى تم تقديمه من قبل مستخدمي الإنترنت بشكل متعاوني وتم تحميله بشكل مستقل، لا يمتلك هذا الموقع حقوق الملكية، لم يتم تعديل المحتوى بشكل يدوي، ولا يتحمل هذا الموقع أي مسؤولية قانونية ذات صلة. إذا اكتشفتم محتوى يشتبه في حقوق النسخ، يرجى إرسال بريد إلكتروني إلى: notice#oldtoolbag.com (عند إرسال البريد الإلكتروني، يرجى استبدال #بـ @) لإبلاغنا، وتقديم الأدلة ذات الصلة، إذا تم التحقق من ذلك، سيتم حذف المحتوى المشبوه بسرعة.