شرح أربعة طرق لربط الحدث في jQuery

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

يقدم jQuery أربعة طرق للاستماع للأحداث، وهي bind،live،delegate،on، والمكافئات للإزالة هي unbind،die،undelegate،off. قبل أن نبدأ في النظر فيهم

أولاً: bind(type,[data],function(eventObject))

bind هو أكثر الطرق استخدامًا، ويستخدم لربط المستمعين إلى نوع معين من الأحداث على العناصر المختارة، ويبدو المعنى للمعاملات كالتالي:

type: نوع الحدث، مثل click،change،mouseover، إلخ;

data: المعاملات المدخلة إلى وظيفة المستمع، يمكن الحصول عليها من خلال event.data. اختياري;

function: وظيفة المستمع، يمكن إدخال كائن الحدث، هنا كائن الحدث هو كائن الحدث الم封装 من قبل jQuery، وهو مختلف عن كائن الحدث الأصلي، ويجب الانتباه عند استخدامه.

كود bind:

bind: function( types, data, fn ) {
العودة: this.on( types, null, data, fn );
}
$('#myol li').bind('click',getHtml);

ميزة bind هي ربط المستمعين إلى العنصر المستهدف، واحد لكل رابط، وهو مناسب لاستخدامه عندما لا يتم إضافة العناصر بشكليندين في الصفحة. ولكن إذا تم إضافة عنصر جديد إلى القائمة مثل 'عنصر القائمة 5'، فإن النقر عليه لن يكون له رد فعل، ويجب bind مرة أخرى. إذا أردنا تجنب هذا التعقيد، يمكننا استخدام live.

jQuery يقدم أيضًا طرقًا مختصرة للربط بالأحداث مثل a.click(function(){});،a.change(function(){});، إلخ، وتعمل هذه الطرق بنفس الطريقة التي يعمل فيها bind، وهي مجرد اختصارات.

ثانيًا: live(type, [data], fn)

معاملات live مثل bind، ما الذي يجعله غريب؟ دعونا ننظر في الكود المصدر أولاً:

live: function( types, data, fn ) {
jQuery( this.context ).on( types, this.selector, data, fn );
return this;
}

可以看到live方法并没有将监听器绑定到自己(this)身上，而是绑定到了this.context上了。这个context是什么东西呢?其实就是元素的限定范围，看了下面的代码就清楚了：

$('#myol li').context; //document
$('#myol li','#myol').context; //document
$('#myol li',$('#myol')[0]); //ol

通常情况下，我们都不会像第三种方式那样使用选择器，所以也就认为这个context通常就是document了，即live方法把监听器绑定到了 document上了。不把监听器直接绑定在元素上，你是不是想起事件委托机制来了呢?若没有，可以点击这里回忆一下。live正是利用了事件委托机制来 完成事件的监听处理，把节点的处理委托给了document。在监听函数中，我们可以用event.currentTarget来获取到当前捕捉到事件的 节点。下面的例子来揭晓：

$('#myol li').live('click',getHtml);

三：live存在那样的缺点，所以我们就思考，既然老爷子负担那么重，可不可以别把监听器绑定在document上呢，绑定在就近的父级元素上不就好了。顺应正常逻辑，delegate诞生了。

参数多了一个selector，用来指定触发事件的目标元素，监听器将被绑定在调用此方法的元素上。看看源码：

delegate: function( selector, types, data, fn ) {
return this.on( types, selector, data, fn );
}

又是调用了on，并且把selector传给了on。看来这个on真的是举足轻重的东西。照样先不管它。看看示例先：

$('#myol').delegate('li','click',getHtml);

看了这么多，你是不是迫不及待想看看这个on的真实面目了呢，这就来：

on(type,[selector],[data],fn)

المعلمات مشابهة لـ delegate ولكن هناك فرق دقيق، أولاً يتم تبديل موضع type وselector، ثانيًا أصبح selector خيارًا. السبب في تبديل الموضع لا يمكن التحقق منه، لكن يجب أن يكون لجعل الشكل يبدو أكثر راحة للعين.

دعونا نرى مثالًا بدون إرسال selector أولاً:

$('#myol li').on('click',getHtml);

يمكن رؤية event.currentTarget هو li نفسه، وهو نفس تأثير bind. بالنسبة لتحويل selector، فهو يعني نفس المعنى كـ delegate، باستثناء ترتيب المعلمات، وهو نفس الشئ.

في النهاية، رأينا دور on الحقيقي، إذاً كيف يمكننا اختيار الطريقة المناسبة لربط الحدث؟

في الواقع، هذا السؤال ليس بحاجة إلى التشكيك فيه، لأنك تعرف الفرق بينهم الآن أليس كذلك؟ استخدموهم بناءً على الحالة الفعلية فقط. ومع ذلك، هناك توصية رسمية تقترح استخدام on، لأن جميع الطرق الأخرى تنفذ on بشكل داخلي، يمكن استخدام on لتحسين الكفاءة، ويمكنك أيضًا استخدام on لتعويض الطرق الثلاث الأخرى. بالنسبة لكيفية الاستبدال، لا أعتقد أنني أحتاج إلى كتابة ذلك بوضوح، لأن الفهم الكامل للفرق بينهم سيجعل الأمر بسيطًا بشكل طبيعي.

الآن قد رأينا الفرق الحقيقي بين الطرق الأربع للتحكم في jQuery، آمل أن تكون مفيدة لك، إذا كان لديك أي أسئلة، فلا تتردد في ترك تعليق، وسأقوم بالرد عليك في أقرب وقت. شكرًا أيضًا لتأييدك لموقع呐喊 التعليمي!

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