درود همراهان دیتی. توی ویو وقتی یک مدیریت‌کننده رویداد مثلاً @click رو ضمیمه می‌کنیم به یک المنت، کاملاً رایجه که از متدهای preventDefault یا stopPropgation هم استفاده کنیم. مثلاً مدیریت‌کننده submit@ این فرم رو در نظر بگیرید که متد registerUser رو اجرا می‌کنه:

<form @submit="registerUser"> ... </form>

<script>
  // ...
  methods: {
    registerUser(event) {
      event.preventDefault();
      // ...
    }
  }
</script>

توی این متد باید قبل از هر کاری از متد preventDefault استفاده کنیم تا مانع Reload شدن صفحه بشیم تا بتونیم کار مد نظرمون که ثبت نام کاربر هست رو انجام بدیم. اما این کد یک ایراد جزئی داره. چرا؟ طبق اصول درست‌نویسی، بهتره متدهای ما فقط مسئول انجام دادن کاری باشن که از اونها انتظار میره. متد registerUser فقط باید مسئول کاری باشه که از اسم اون مشخصه، یعنی ثبت نام کاربر. اما این متد داره کاری بی‌ارتباط با مسئولیت اون که تغییر رفتار form هست رو انجام میده!

برای حل چنین موضوعی، فریم‌ورک ویو قابلیتی رو در اختیار ما قرار داده تا بتونیم با جدا کردن قسمت‌های بی‌ربطِ برنامه، کدهای تمیزتر و معنادارتری داشته باشیم. اسم این قابلیت Event Modifier هست.

 

Event Modifier چیه؟ 🤔

Event Modifier یک پسوند هست که به مدیریت‌کننده رویداد (مثلاً @submit یا @click) می‌چسبه و باعث میشه رویداد به صورت‌های خاصی اجرا بشه. برای مثال یک Modifier داریم به اسم prevent که باعث میشه هنگام اجرای رویداد submit، به طور خودکار preventDefault هم فراخونی بشه. نحوه استفاده از اون به این صورت هست:

<form @submit="registerUser"> ...

با استفاده از اون دیگه لازم نیست event.preventDefault رو توی متدها صدا بزنیم و بنابراین متدها فقط مسئول انجام کاری میشن که وظیفه‌شون هست 👌

 

چه Event Modifier هایی داریم؟ 🤔

ویو این Modifier ها رو در اختیار ما قرار داده که هر کدوم رو بررسی خواهیم کرد:

  • .stop
  • .prevent
  • .capture
  • .self
  • .once
  • .passive

 

برای موارد stop و capture لازمه با مفاهیم Event Bubbling و Event Capturing توی جاوااسکریپت آشنایی داشته باشیم که پیشنهاد می‌کنم از لینک زیر، سوالات ۶ تا ۹ رو بخونید.

 

.stop

این Modifier برای رویداد، متد stopPropogation رو صدا می‌زنه:

<div @click="..."> ...

متد stopPropogation باعث میشه رویداد به سطح‌های بعدی گسترش پیدا نکنه. کد زیر رو در نظر بگیرید (ابتدا تب HTML و بعد برای خروجی Result رو ببینید):

در شرایطی که ما به هر دو المنت div و button مدیریت‌کننده @click ضمیمه کردیم، با کلیک روی دکمه، رویداد فقط برای دکمه اتفاق می‌افته؛ در صورتی که توی حالت عادی بلافاصله رویداد برای div هم باید اتفاق میوفته.

 

.capture

این Modifier باعث میشه حالت Event Capturing اتفاق بی‌افته.

<div @click="..."> ...

کد زیر ببینید:

یک div داریم که داخل اون یک button قرار گرفته. وقتی روی button کلیک می‌کنیم، ابتدا مدیریت‌کننده رویداد برای المنت div اجرا میشه و بعد برای button. این حالتی هست که رویداد از سطح بیرونی به سطح داخلی گسترش پیدا می‌کنه که به اون میگن Event Capturing.

 

.self

وقتی یک مدیریت‌کننده رویداد این Modifier رو داشته باشه، رویداد فقط زمانی اجرا میشه که event.target، برابر با خود المنتی باشه مدیریت‌کننده رویداد به اون ضمیمه شده.

<div @click="..."> ...

برای مثال کد زیر رو در نظر بگیرید و سعی کنید روی دکمه که یک المنتِ درون div هست کلیک کنید:

می‌بینیم که رویدادی اجرا نمیشه. اینجا مدیریت‌کننده @click به همراه self به div نسبت داده شده. وقتی روی قسمت‌های دیگه از div مثلاً button کلیک می‌کنیم، این باعث نمیشه که رویداد اجرا بشه. در صورتی که توی شرایط عادی با کلیک روی قسمت‌های دیگه از div، رویداد اجرا می‌شد.

 

.once

این Modifier همونطور که از اسمش مشخصه، اگه به یک مدیریت‌کننده نسبت داده بشه، باعث میشه که رویداد فقط یک بار اتفاق بیوفته و در نتیجه تلاش‌های بعدی برای اجرای رویداد نادیده گرفته میشه:

<div @click="..."> ...

توی کد زیر با کلیک روی دکمه، فقط یک بار alert می‌گیریم:

 

.passive

این Modifier بیشتر برای رویدادهای scroll کاربرد داره و طبق گفته استفاده از اون باعث بهبود عملکرد روی دستگاه‌های موبایلی میشه:

<div @scroll="..."> ...

 

ما می‌تونیم به صورت زنجیره‌ای از Modifier ها استفاده کنیم. برای مثال:

<div @click.stop.prevent="..."> ...

چیزی که باید در نظر داشته باشیم اینه که ترتیب قرار گرفتن Modifier ها اهمیت داره. برای مثال @click.prevent.self قبل از هر چیزی متد preventDefault رو برای همه المنت‌های مربوط صدا می‌زنه و بعد self برای المنت مورد نظر اعمال میشه. اما @click.self.prevent ابتدا self رو برای المنت اعمال می‌کنه و بعد فقط برای همون المنت preventDefault رو صدا می‌زنه.

 

خب دوستان امیدوارم از مطالبی که بررسی کردیم استفاده کرده باشین. روزتون خوش 😉 ✌️

منبع: