القائمة الرئيسية

الصفحات

jQuery - معالجة الأحداث


لدينا القدرة على إنشاء صفحات ويب ديناميكية باستخدام الأحداث. الأحداث هي الإجراءات التي يمكن أن يكتشفها تطبيق الويب الخاص بك. فيما يلي أمثلة على الأحداث - نقرة بالماوس يتم تحميل صفحة ويب باستخدام الماوس فوق عنصر إرسال نموذج HTML ضغط مفتاح على لوحة المفاتيح وما إلى ذلك. عندما يتم تشغيل هذه الأحداث ، يمكنك بعد ذلك استخدام وظيفة مخصصة للقيام بكل ما تريده إلى حد كبير مع الحدث. تستدعي هذه الوظائف المخصصة معالجات الأحداث. Binding Event Handlers باستخدام نموذج حدث jQuery ، يمكننا إنشاء معالجات أحداث على عناصر DOM باستخدام طريقة bind () على النحو التالي -


<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $('div').bind('click', function( event ){
               alert('Hi there!');
            });
         });
      </script>
		
      <style>
         .div{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>
   </head>
	
   <body>
      <p>Click on any square below to see the result:</p>
		
      <div class = "div" style = "background-color:blue;">ONE</div>
      <div class = "div" style = "background-color:green;">TWO</div>
      <div class = "div" style = "background-color:red;">THREE</div>
   </body>
</html>

سيؤدي هذا الرمز إلى استجابة عنصر القسمة لحدث النقر ؛ عندما ينقر المستخدم داخل هذا القسم بعد ذلك ، سيظهر التنبيه. الصيغة الكاملة للأمر bind () هي كما يلي -

selector.bind( eventType[, eventData], handler)

فيما يلي وصف المعلمات - eventType - سلسلة تحتوي على نوع حدث JavaScript ، مثل النقر أو الإرسال. راجع القسم التالي للحصول على قائمة كاملة بأنواع الأحداث. eventData - هذه معلمة اختيارية هي خريطة البيانات التي سيتم تمريرها إلى معالج الحدث. المعالج - وظيفة يتم تنفيذها في كل مرة يتم فيها تشغيل الحدث. إزالة معالجات الأحداث بشكل نموذجي ، بمجرد إنشاء معالج الأحداث ، يظل ساري المفعول لبقية عمر الصفحة. قد تكون هناك حاجة عندما تريد إزالة معالج الأحداث. يوفر jQuery الأمر Unbind () لإزالة معالج الحدث الخارج. بناء جملة إلغاء الربط () كما يلي -

selector.unbind(eventType, handler)

or 

selector.unbind(eventType)
فيما يلي وصف المعلمات - eventType - سلسلة تحتوي على نوع حدث JavaScript ، مثل النقر أو الإرسال. راجع القسم التالي للحصول على قائمة كاملة بأنواع الأحداث. المعالج - إذا تم توفيره ، يحدد المستمع المحدد الذي سيتم إزالته. أنواع الأحداث كائن الحدث تأخذ وظيفة رد الاتصال معلمة واحدة؛ عندما يسمى المعالج ، سيتم تمرير كائن حدث JavaScript من خلاله. غالبًا ما يكون كائن الحدث غير ضروري ويتم حذف المعلمة ، حيث يتوفر سياق كافٍ عادةً عندما يكون المعالج ملزمًا بمعرفة ما يجب فعله بالضبط عند تشغيل المعالج ، ولكن هناك سمات معينة تحتاج إلى الوصول إليها. سمات الحدث

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $('div').bind('click', function( event ){
               alert('Event type is ' + event.type);
               alert('pageX : ' + event.pageX);
               alert('pageY : ' + event.pageY);
               alert('Target : ' + event.target.innerHTML);
            });
         });
      </script>
		
      <style>
         .div{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>
   </head>
	
   <body>
      <p>Click on any square below to see the result:</p>
		
      <div class = "div" style = "background-color:blue;">ONE</div>
      <div class = "div" style = "background-color:green;">TWO</div>
      <div class = "div" style = "background-color:red;">THREE</div>
   </body>
</html>

The Event Methods

There is a list of methods which can be called on an Event Object −

Sr.No.Method & Description
1preventDefault()

Prevents the browser from executing the default action.

2isDefaultPrevented()

Returns whether event.preventDefault() was ever called on this event object.

3stopPropagation()

Stops the bubbling of an event to parent elements, preventing any parent handlers from being notified of the event.

4isPropagationStopped()

Returns whether event.stopPropagation() was ever called on this event object.

5stopImmediatePropagation()

Stops the rest of the handlers from being executed.

6isImmediatePropagationStopped()

Returns whether event.stopImmediatePropagation() was ever called on this event object.

Event Manipulation Methods

Following table lists down important event-related methods −

Sr.No.Method & Description
1bind( type, [data], fn )

Binds a handler to one or more events (like click) for each matched element. Can also bind custom events.

2off( events [, selector ] [, handler(eventObject) ] )

This does the opposite of live, it removes a bound live event.

3hover( over, out )

Simulates hovering for example moving the mouse on, and off, an object.

4on( events [, selector ] [, data ], handler )

Binds a handler to an event (like click) for all current − and future − matched element. Can also bind custom events.

5one( type, [data], fn )

Binds a handler to one or more events to be executed once for each matched element.

6ready( fn )

Binds a function to be executed whenever the DOM is ready to be traversed and manipulated.

7trigger( event, [data] )

Trigger an event on every matched element.

8triggerHandler( event, [data] )

Triggers all bound event handlers on an element.

9unbind( [type], [fn] )

This does the opposite of bind, it removes bound events from each of the matched elements.


أساليب مساعد الحدث يوفر jQuery أيضًا مجموعة من وظائف مساعد الحدث التي يمكن استخدامها إما لتشغيل حدث لربط أي نوع من أنواع الأحداث المذكورة أعلاه. طرق التشغيل فيما يلي مثال من شأنه أن يؤدي إلى تشغيل حدث التمويه في جميع الفقرات -

$("p").blur();

Binding Methods

Following is an example which would bind a click event on all the <div> −

$("div").click( function () { 
   // do something here
});
هل اعجبك الموضوع :

تعليقات