jQuery 3.3

.bind()




jquery

.bind (eventType [، eventData]، handler) الإرجاع: إصدار jQuery deprecated: 3.0

الوصف ؛: إرفاق معالج إلى حدث للعناصر.

  • الإصدار المضافة: 1.0 .bind (eventType [، eventData] ، معالج)

    • نوع الحدث
      اكتب: String
      سلسلة تحتوي على واحد أو أكثر من أنواع أحداث DOM ، مثل "انقر" أو "إرسال" أو أسماء أحداث مخصصة.
    • eventData
      النوع: Anything
      كائن يحتوي على بيانات سيتم تمريرها إلى معالج الحدث.
    • معالج
      النوع: Function ( Event eventObject)
      هي وظيفة يتم تنفيذها في كل مرة يتم فيها تشغيل الحدث.
  • الإصدار المضاف: 1.4.3 .bind (eventType [، eventData] [، preventBubble])

    • نوع الحدث
      اكتب: String
      سلسلة تحتوي على واحد أو أكثر من أنواع أحداث DOM ، مثل "انقر" أو "إرسال" أو أسماء أحداث مخصصة.
    • eventData
      النوع: Anything
      كائن يحتوي على بيانات سيتم تمريرها إلى معالج الحدث.
    • preventBubble
      اكتب: Boolean
      سيؤدي إعداد الوسيطة الثالثة إلى false إلى إرفاق وظيفة تمنع الإجراء الافتراضي من الحدوث وتوقف الحدث عن الاحتراق. الافتراضي هو الصحيح.
  • الإصدار المضافة: 1.4 .bind (الأحداث)

    • أحداث
      النوع: Object
      كائن يحتوي على واحد أو أكثر من أنواع أحداث DOM ووظائفه لتنفيذها.

اعتبارًا من jQuery 3.0 ، تم إيقاف .bind() . تم استبداله بواسطة .on() لإرفاق معالجات الأحداث إلى مستند منذ jQuery 1.7 ، لذلك تم تثبيط استخدامه بالفعل. للإصدارات السابقة ، يتم استخدام الأسلوب .bind() لإرفاق معالج أحداث مباشرةً بالعناصر. يتم إرفاق معالجات العناصر المحددة حاليًا في كائن jQuery ، لذا يجب أن تكون هذه العناصر موجودة عند نقطة الاتصال بـ .bind() . لربط أكثر مرونة بالحدث ، راجع مناقشة تفويض الحدث في .on() .

أي سلسلة قانونية لـ eventType ، إذا لم تكن السلسلة اسم حدث DOM أصلي ، فسيكون المعالج مرتبطًا بحدث مخصص. لا يتم استدعاء هذه الأحداث مطلقًا بواسطة المستعرض ، ولكن قد يتم تشغيلها يدويًا من .trigger() JavaScript البرمجية الأخرى باستخدام .trigger() أو .triggerHandler() .

إذا كانت سلسلة eventType تحتوي على حرف نقطة ( . ) ، eventType . يفصل الحرف الفترة الحدث من مساحة الاسم الخاصة به. على سبيل المثال ، في استدعاء .bind( "click.name", handler ) ، click السلسلة هو نوع الحدث ، name السلسلة هو مساحة الاسم. يسمح لنا وضع الأسماء Namespacing بفك أو تشغيل بعض الأحداث من نوع ما دون التأثير على الآخرين. انظر مناقشة .unbind() لمزيد من المعلومات.

هناك طرق مختصرة لبعض أحداث المستعرض القياسية مثل .click() التي يمكن استخدامها لإرفاق أو تشغيل معالجات الأحداث. للحصول على قائمة كاملة من الأساليب المختصرة ، راجع فئة الأحداث .

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

الاستخدام الأساسي لـ .bind() هو:

$( "#foo" ).bind( "click", function() {
  alert( "User clicked on 'foo.'" );
});

سيؤدي هذا الرمز إلى عنصر به معرف foo للاستجابة لحدث click . عندما ينقر المستخدم داخل هذا العنصر بعد ذلك ، سيتم عرض التنبيه.

أحداث متعددة

يمكن ربط أنواع أحداث متعددة في وقت واحد عن طريق تضمين كل منها مفصولة بمسافة:

$( "#foo" ).bind( "mouseenter mouseleave", function() {
  $( this ).toggleClass( "entered" );
});

تأثير هذا على <div id="foo"> (عندما لا يكون في البداية الفئة "دخلت") هو إضافة الفئة "دخلت" عندما يدخل الماوس إلى <div> وإزالة الصف عندما يترك الماوس .

اعتبارًا من jQuery 1.4 ، يمكننا ربط العديد من معالجات الأحداث في وقت واحد عن طريق تمرير كائن من نوع أزواج / معالج الأحداث:

$( "#foo" ).bind({
  click: function() {
    // Do something on click
  },
  mouseenter: function() {
    // Do something on mouseenter
  }
});

معالجات الأحداث

تأخذ المعلمة handler وظيفة رد اتصال ، كما هو موضح أعلاه. داخل المعالج ، تشير الكلمة الأساسية إلى عنصر DOM الذي يرتبط به المعالج. للاستفادة من العنصر في jQuery ، يمكن تمريره إلى الدالة $() العادية. فمثلا:

$( "#foo" ).bind( "click", function() {
  alert( $( this ).text() );
});

بعد تنفيذ هذا الرمز ، عندما ينقر المستخدم داخل العنصر باستخدام معرف foo ، سيتم عرض محتويات النص الخاص به كتنبيه.

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

في jQuery 1.4.3 ، يمكنك الآن تمرير false بدلاً من معالج الأحداث. سيؤدي هذا إلى ربط معالج أحداث مكافئ لـ: function(){ return false; } function(){ return false; } . يمكن إزالة هذه الوظيفة في وقت لاحق عن طريق الاتصال: .unbind( eventName, false ) .

كائن الحدث

يمكن أيضًا أن تتعامل وظيفة رد الاتصال مع handler المعلمات. عندما يتم استدعاء الدالة ، سيتم تمرير كائن الحدث إلى المعلمة الأولى.

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

تعادل إرجاع false من معالج استدعاء كل .stopPropagation() و .stopPropagation() على كائن الحدث.

يبدو استخدام كائن الحدث في معالج مثل هذا:

$( document ).ready(function() {
  $( "#foo" ).bind( "click", function( event ) {
    alert( "The mouse cursor is at (" +
      event.pageX + ", " + event.pageY +
      ")" );
  });
});

لاحظ المعلمة المضافة إلى الدالة المجهولة. سيؤدي هذا الرمز إلى نقرة على العنصر ذي معرف foo للإبلاغ عن إحداثيات صفحة لمؤشر الماوس في وقت النقرة.

تمرير بيانات الحدث

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

var message = "Spoon!";
$( "#foo" ).bind( "click", function() {
  alert( message );
});
message = "Not in the face!";
$( "#bar" ).bind( "click", function() {
  alert( message );
});

نظرًا لأن معالجات الغلق هي التي تحتوي على message في بيئتها ، فسيعرض كلاهما الرسالة ليس في الوجه! عندما أثار. لقد تغيرت قيمة المتغير. للتخلص من هذا ، يمكننا تمرير الرسالة في استخدام eventData :

var message = "Spoon!";
$( "#foo" ).bind( "click", {
  msg: message
}, function( event ) {
  alert( event.data.msg );
});
message = "Not in the face!";
$( "#bar" ).bind( "click", {
  msg: message
}, function( event ) {
  alert( event.data.msg );
});

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

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

إذا كان eventData موجودًا ، فهو الوسيطة الثانية إلى الأسلوب .bind() ؛ إذا لم يكن هناك حاجة لإرسال بيانات إضافية إلى المعالج ، فسيتم تمرير رد الاتصال كالوسيطة الثانية والأخيرة.

راجع مرجع الأسلوب .trigger() للحصول على طريقة لتمرير البيانات إلى معالج في وقت حدوث الحدث بدلاً من عند ربط المعالج.

بدءًا من jQuery 1.4 ، لم يعد بإمكاننا إرفاق بيانات (وبالتالي ، بالأحداث) بالعناصر ، أو تضمينها ، أو التطبيق الصغير بسبب حدوث أخطاء حرجة عند إرفاق البيانات ببرامج Java.

ملاحظة: على الرغم من إظهارها في المثال التالي ، إلا أنه من غير المستحسن ربط معالجات لكل من أحداث click و dblclick لنفس العنصر. يختلف تسلسل الأحداث التي يتم تشغيلها من المتصفح إلى المتصفح ، مع تلقي بعض الأحداث dblclick قبل dblclick وغيرها من الأحداث. يمكن أن تختلف الحساسية المزدوجة (الحد الأقصى للوقت بين النقرات التي يتم اكتشافها كنقر مزدوج) حسب نظام التشغيل والمتصفح ، وغالبًا ما تكون قابلة للتكوين من قبل المستخدم.

أمثلة:

انقر فوق انقر فوق ثم انقر نقراً مزدوجاً فوق الفقرة. ملاحظة: الإحداثيات هي نافذة نسبية ، لذا في هذه الحالة بالنسبة إلى iframe التوضيحي.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>bind demo</title>
  <style>
  p {
    background: yellow;
    font-weight: bold;
    cursor: pointer;
    padding: 5px;
  }
  p.over {
     background: #ccc;
  }
  span {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<p>Click or double click here.</p>
<span></span>
 
<script>
$( "p" ).bind( "click", function( event ) {
  var str = "( " + event.pageX + ", " + event.pageY + " )";
  $( "span" ).text( "Click happened! " + str );
});
$( "p" ).bind( "dblclick", function() {
  $( "span" ).text( "Double-click happened in " + this.nodeName );
});
$( "p" ).bind( "mouseenter mouseleave", function( event ) {
  $( this ).toggleClass( "over" );
});
</script>
 
</body>
</html>

عرض:

لعرض نص كل فقرة في مربع التنبيه عندما يتم النقر فوقه:

$( "p" ).bind( "click", function() {
  alert( $( this ).text() );
});

يمكنك تمرير بعض البيانات الإضافية قبل معالج الحدث:

function handler( event ) {
  alert( event.data.foo );
}
$( "p" ).bind( "click", {
  foo: "bar"
}, handler );

إلغاء إجراء افتراضي ومنعه من الظهور في الظهور عن طريق إرجاع false :

$( "form" ).bind( "submit", function() {
  return false;
})

إلغاء الإجراء الافتراضي فقط باستخدام الأسلوب .preventDefault ().

$( "form" ).bind( "submit", function( event ) {
  event.preventDefault();
});

أوقف حدثًا من الفقاعة بدون منع الإجراء الافتراضي باستخدام طريقة .stopPropagation ().

$( "form" ).bind( "submit", function( event ) {
  event.stopPropagation();
});

ربط الأحداث المخصصة.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>bind demo</title>
  <style>
  p {
    color: red;
  }
  span {
    color: blue;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<p>Has an attached custom event.</p>
<button>Trigger custom event</button>
<span style="display: none;"></span>
 
<script>
$( "p" ).bind( "myCustomEvent", function( e, myName, myValue ) {
  $( this ).text( myName + ", hi there!" );
  $( "span" )
    .stop()
    .css( "opacity", 1 )
    .text( "myName = " + myName )
    .fadeIn( 30 )
    .fadeOut( 1000 );
  });
$( "button" ).click(function() {
  $( "p" ).trigger( "myCustomEvent", [ "John" ] );
});
</script>
 
</body>
</html>

عرض:

ربط أحداث متعددة في وقت واحد.

$( "div.test" ).bind({
  click: function() {
    $( this ).addClass( "active" );
  },
  mouseenter: function() {
    $( this ).addClass( "inside" );
  },
  mouseleave: function() {
    $( this ).removeClass( "inside" );
  }
});