درود همراهان دیتی. توی ویو وقتی یک مدیریت‌کننده رویداد مثلاً @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
برای موارد و لازمه با مفاهیم Event Bubbling و Event Capturing توی جاوااسکریپت آشنایی داشته باشیم که پیشنهاد می‌کنم از لینک زیر، سوالات ۶ تا ۹ رو بخونید.