تصف هذه المقالة استخدام إضافة وحذف الاستماع في JavaScript. شاركه للرجوع إليه. التحليل المحدد هو كما يلي:
الاستماع للحدث في JS هو استخدام AddeventListener لربط حدث. هذا الاستخدام شائع جدًا وبسيط في jQuery ، لكنه أكثر تعقيدًا في JS الأصلي. هنا نقوم بتنظيم الاختبارات وأمثلة على طرق مختلفة لحدث AddEventListener للرجوع إليه وتعلمك.
عندما كنت أعمل لاعبًا قبل يومين ، واجهت بعض المتاعب في حذف الشاشة ولم يكن من الممكن حذفه. بعد النظر إليها ، وجدت أن المعلمات يجب أن تكون مقابلة بالكامل. ماذا يعني أن تكون مقابلة تماما؟ بعبارة أخرى:
نسخة الكود كما يلي: $ ('. video') [0] .AdDeventListener ('timeUpdate' ، currenttimeHandler ، true) ؛
على سبيل المثال ، يجب تمرير ثلاثة معلمات في هذه الجملة بحيث يمكن حذفها. لماذا هو ضروري؟ نعم ، الجزء المؤلم هنا:
عند إضافة وإزالة ، يمكن تجاهل المعلمة الثالثة ، ولكن وضعها الافتراضي مختلف في هذا الوقت! !
عادة ما يكون AddeventListener خطأ ...
1. أضف الاستماع المخصص للحدث
نسخة الكود كما يلي: var eventHandlesCounter = 1 ؛ // احسب عدد الاستماع إلى الحدث المضافة ، يتم استخدام 0 كبت محجوزة
وظيفة addevent (obj ، evt ، fn) {
if (! fn .__ eventid) {fn .__ eventId = eventHandlesCounter ++ ؛}
if (! obj .__ eventHandles) {obj .__ eventHandles = [] ؛ }
if (! obj .__ eventHandles [evt]) {
obj .__ eventHandles [evt] = [] ؛
if (OBJ ["ON"
obj .__ eventHandles [evt] [0] = obj ["on"+evt] ؛
OBJ ["on"+evt] = المقابر ؛
}
}
obj .__ eventHandles [evt] [fn .__ eventId] = fn ؛
وظيفة المقابض () {
var fns = obj .__ eventHandles [evt] ؛
لـ (var i = 0 ؛ i <fns.length ؛ i ++)
fns [i] .Call (هذا) ؛
}
}
2. تخصيص الاستماع لحذف الحذف
نسخة التعليمات البرمجية كما يلي: دالة Delevent (OBJ ، EVT ، FN) {
if (! obj .__ eventHandles ||! obj .__ eventHandles [evt] ||! fn .__ eventid) {
العودة كاذبة
}
if (obj .__ eventHandles [evt] [fn .__ eventid] == fn) {
حذف obj .__ eventHandles [evt] [fn .__ eventId] ؛
}
}
3. تصحيح الطريقة أعلاه
نسخة الكود كما يلي: وظيفة AddEvent (OBJ ، EVT ، FN ، USECAPTURE) {
if (obj.addeventListener) {// فضل استخدام تسجيل حدث W3C
OBJ.AddeventListener (EVT ، FN ، !!
}آخر{
إذا (!
if (! obj .__ eventHandles) {obj .__ eventHandles = [] ؛}
if (! obj .__ eventHandles [evt]) {
obj .__ eventHandles [evt] = [] ؛
if (obj ["on"+evt]) {
(obj .__ eventHandles [evtype] [0] = obj ["on"+evtype]) .__ eventId = 0 ؛
}
OBJ ["on"+evtype] = addevent.execeventHandles ؛
}
}
}
addEvent .__ eventHandlesCounter = 1 ؛
addevent.execeventHandles = function (evt) {
إذا (! هذا .__ eventHandles) {return true ؛}
evt = evt || window.event ؛
var fns = this .__ eventHandles [evt.type] ؛
لـ (var i = 0 ؛ i <fns.length ؛ i ++) {
if (fns [i] extryof function) {
fns [i] .Call (هذا) ؛
}
}
} ؛
وظيفة Delevent (OBJ ، EVT ، FN ، USECAPTURE) {
if (obj.removeeventListener) {// قم بإزالة معالج الحدث أولاً باستخدام طريقة W3C
Obj.RemoveEventListener (EVT ، FN ، !! usecapture) ؛
}آخر {
if (obj .__ eventHandles) {
var fns = obj .__ eventHandles [evt] ؛
if (fns) {delete fns [fn .__ eventid] ؛}
}
}
4. توحيد كائنات الأحداث
نسخة الكود كما يلي: Function FixEvent (evt) {
if (! evt.target) {
evt.target = evt.srcelement ؛
evt.preventDefault = fixevent.preventDefault ؛
evt.StopPropagation = fixEvent.StopPropagation ؛
if (evt.type == "mouseover") {
evt.RELEDTARGET = evt.fromelement ؛
} آخر إذا (evt.type == "mouseout") {
evt.ReledTarget = evt.ToElement ؛
}
evt.charcode = (evt.type == "keypress")؟ evt.keycode: 0 ؛
evt.EventPhase = 2 ؛
evt.timestamp = (date date ()). getTime () ؛
}
إرجاع EVT.
}
fixevent.preventDefault = function () {this.returnvalue = false ؛}
fixevent.stopPropagation = function () {this.cancelBubble = true ؛} ؛
لا يتم تنفيذ وظيفة FixEvent بشكل منفصل ، ويجب أن تحتوي على معلمة كائن حدث ، ويتم تنفيذها فقط عند حدوث الحدث! أفضل طريقة هي دمجها في execeventhandles لوظيفة addevent.
انسخ الرمز كما يلي: addevent.execeventHandles = function (evt) {// قم بإرسال جميع وظائف معالجة الأحداث وتنفيذها
إذا (! هذا .__ eventHandles) {return true ؛}
evt = fixevent (evt || window.event) ؛ // توحيده هنا
var fns = this .__ eventHandles [evt.type] ؛
لـ (var i = 0 ؛ i <fns.length ؛ i ++) {
if (fns [i] extryof function) {
fns [i] .Call (هذا ، evt) ؛ // واستخدامه كمعلمة الأولى لوظيفة معالج الأحداث
// بهذه الطريقة ، يمكنك استخدام طريقة موحدة للوصول إلى كائن الحدث داخل وظيفة معالج الحدث}}} ؛
ما ورد أعلاه مكتوب من قبل ماجستير ، وما يلي هي بعض الأمثلة على أحداث المراقبة الفعلية
انسخ الرمز كما يلي: <! doctype html public "-// w3c // dtd html 4.01 Transitional // en">
<html>
<head>
<title> test6.html </itlem>
<script type = "text/javaScript">
اختبار الوظيفة () {
Window.Alert ("لقد صوتت مرة واحدة") ؛
document.getElementById ("1"). detachevent ("onClick" ، test) ؛
}
</script>
</head>
<body>
<type type = "button" value = "pott" id = "1"/>
<script type = "text/javaScript">
document.getElementById ("1"). anclesevent ("onClick" ، test) ؛
</script>
</body>
</html>
هنا ، document.getElementById ("1"). anclesevent ("onClick" ، test) ؛ يستخدم لربط الحدث الديناميكي ، ويستخدم رمز النسخ على النحو التالي:
document.getElementById ("1"). detachevent ("onclick ، test) يلغي الوقت ديناميكيًا ، بحيث يمكن أن يكون هذا الحدث مطابقًا مرة واحدة فقط ، ولن يتم إنتاج أي تأثير عند النقر فوق هذا الزر في المرة القادمة.
بعد ذلك ، عرض آخر لحدث لوحة المفاتيح يتم مراقبه في الوقت المناسب لتحديد ما إذا كان الإدخال رقمًا. إذا لم يكن رقمًا ، فسيتم مطالبته ديناميكيًا ، ثم يرفض مدخلاته.
انسخ الرمز كما يلي: <! doctype html public "-// w3c // dtd html 4.01 Transitional // en">
<html>
<head>
<title> test7.html </itlem>
<script type = "text/javaScript">
اختبار الوظيفة (الحدث) {
// في كل مرة يضغط المستخدم على مفتاح ، سيحدد ما إذا كان رقمًا
if (event.keycode <48 || event.keycode> 57) {
window.alert ("أنت لا تدخل رقم") ؛
العودة كاذبة
}
}
</script>
</head>
<body>
<type type = "text" onkeypress = "return test (event) ؛" /> الرجاء إدخال رقم
</body>
</html>
الحدث هنا هو كائن حدث ، يمكنه إرجاع الكثير من المعلومات. يرجى الرجوع إلى المستندات ذات الصلة للحصول على التفاصيل.
الملحق: التوافق في مراقبة الأحداث
1. أي استخدام طريقة مرفق/detachevent لإضافة وحذف مستمعي الأحداث ؛ يستخدم W3C طريقة AddEventListener/RemoveEventListener.
2. أي استخدام طريقة تسمية Onevent لأحداثها ، في حين أن W3C هي طريقة التسمية للحدث.
3. يستخدم مستمع حدث IE كائن حدث عالمي ، بينما تقوم W3C بتمرير كائن الحدث كمعلمة للمستمع.
4. من أجل تجنب تشغيل سلوك الحدث الافتراضي ، فإن نهج IE هو مطالبة المبرمجين بتعيين قيمة عقار ReturnValue في كائن الحدث إلى خطأ ، في حين أن نهج W3C هو تنفيذ طريقة PreventDefault.
5. أي لا يوفر الدعم لمرحلة التقاط الحدث.
6. لإيقاف تسليم الحدث ، يتمثل نهج IE في تعيين CancelBubble لكائن الحدث إلى True ، في حين أن نهج W3C هو تعيين طريقة التوقف عن التنفيذ.
7. IE يدعو مستمع الحدث كدالة مستقلة ، بينما في W3C يسمى كوسيلة كائن. هذا يعني أنه في IE ، تشير هذه الكلمة الرئيسية في المستمع إلى كائن حدوث الحدث ولكن كائن عالمي عديمة الفائدة (كائن نافذة).
8. أي لديه مشاكل تسرب الذاكرة في استخدام مستمعي الأحداث. في متصفح IE ، إذا كنت ترغب في إنشاء مستمع حدث لعنصر واستخدام هذا العنصر في المستمع ، فلن يتم إصدار مساحة الذاكرة التي يشغلها المستمع وعقد DOM المرتبطة قبل أن يدخل المستخدم صفحة أخرى.
آمل أن تكون هذه المقالة مفيدة لبرمجة JavaScript للجميع.