Variable
دوشنبه 03 مهر 1391, 22:16 عصر
دو روش در انتشار رویداد وجود داره
روش حبابی . و رو ش کپچرینگ
<body>
<ul>
<li>
<button> click me </button>
</li>
</ul>
</body>
شما وقتی روی یک باتن روی صفحه وب کلیک میکنید
مرورگر رویداد کلیک رو انتشار میده .به این اتفاق میگن . event propagaion
خب حالا ترتیب رسیدن این رویداد به عناصر صفحه مهمه .
مثلا . در روش کپچرینگ . Capturing
رویداد کلیک اول از شئی (عنصر) داکیومنت میگذره و اگه document یک ( تابع ) برای کنترل کردن رویداد کلیک داشته باشه .اون تابع اجرا میشه .
و بعد رویداد به عنصر body میرسه . اینجا هم اگه این عنصر یک تابع برای کنترل کردن این روبداد داشته باشه . اون تابع اجرا میشه
وبعد رویداد به ul میرسه . اگه این عنصر هم تابعی برای کنترل کردن رویداد داشته باشه . اون تابع اجرا میشه .
و بعد رویداد به li میرسه . اگه این عنصر هم تابعی برای کنترل کردن رویداد داشته باشه . اون تابع اجرا می یشه
و بعد تابع به button میرسه . اگه این عنصر هم تابعی برای کنترل کردن رویداد داشته باشه . اون تابع اجرا میشه
رویداد حبابی Bubbling
وقتی مرورگر رویداد رو انتشار میده .
مثله این که این رویداد از کف دریا به سمت آب میاد .
یعنی وقتی روی Button کلیک میشه . اول این عنصر . یا عمیق ترین عنصر از اون رویداد مطلع میشه . ( یا رویداد بهش میرسه .)
که تو مثال من . عنصر Button است . که اگر این عنصر یک تابع برای کنترل کردن رویداد داشته باشه . اون تابع رو اجرا میکنه .
و بعد li
و بعد ul
و بعد body
و بعد document
......
خب حالا کدوم . حبابی یا کپچرینگ ؟
این داستان بر میگرده به خیلی وقته پیش . وقتی که فقط مرورگرهای (نت اسکیپ) بود و IE
که خیلی جالب هر کدوم از این مرورگرها . روش متفاوت بادیگری رو بکار میبردند
به طوریکه IE از روش حبابی و نت اسکیپ فقط از روش کپچرینگ استفاده میکرد.
با اومدن استاندارد سطح 2 dom .
این استاندارد انتشار رویداد رو در سه مرحله انجام میدهد.
مرحله اول ) رویداد به صورت کپچرینگ عمل میکنه .و به سمت عنصر هدف حرکت میکنه
مرحله دوم ) رویداد در عنصر هدف بکار میره .
مرحله سوم ) رویداد از عنصر هدف دوباره به بالا حرکت میکنه . حبابی
مرورگرهای فایرفاکس سافاری و اپرا . هر سه فاز رو پشتیبانی میکنند.
حالا فایدش :( شاید اشتباه بگم )
حبابی بهترین استفادست.
ساده ترین حالتش پیدا کردن عنصر هدف هست.
مثلا شما یه صفحه پر از عناصر تو در تو دارید.
ببینید. گاهی میخای از انتشار رویداد به سطح بالا تر جلو گیری کنی.
یا میخای وقتی رو عنصر فرم راست کلیک کردی . این رویداد به عنوان راست کلیک روی صفحه وب تعبیر نشه . (اینجور مواقع میتونی از رفتن رویداد به سطح بالا تر جلوگیری کنی)
دوست عزیز addEventListener برای خود جاوااسکریپت هستش و ربطی به jquery نداره.
در ضمن باید بگم.
جی کوئری و جاوا اسکریپت از هم جدا نیستن .در واقع جاوا اسکریپت رو میتونید پدر جیکوئری بدونید. پس فرزند میتونه تمام خصوصیات پدر رو به ارث ببره .
addEventListener متد پدر است. که برای تعریف کنترل کننده رویداد به کار میره.
bind , live هم متد های فرزند هستند که برای کارهاشون از میراث پدری ( همون متد addEventListener ) استفاده میکنند.