کار با رویدادها(Event Handling)

اصول آموزش vuejs

تاریخ : جمعه 19 مهر 1398

گوش دادن به وقایع (Listening to Events)

ما می توانیم از دستورالعمل v-on برای گوش دادن به رویدادهای DOM استفاده کنیم و برخی از کدهای جاوا اسکریپت را در هنگام بروز آنها اجرا کنیم.

برای مثال:

<div id="example-1">
  <button v-on:click="counter += 1">Add 1</button>
  <p>The button above has been clicked {{ counter }} times.</p>
</div>
var example1 = new Vue({
  el: '#example-1',
  data: {
    counter: 0
  }
})

نتیجه:

The button above has been clicked {{ counter }} times.


متدهای کار با رویدادها (Method Event Handlers)

منطق برای بسیاری از اداره کنندگان رویدادها پیچیده تر خواهد شد ، بنابراین نگه داشتن کد JavaScript در مقدار ویژگی v-on امکان پذیر نیست. به همین دلیل v-on می تواند نام متدی را که می خواهید آن را فراخوانی نیز بپذیرد.

برای مثال:

<div id="example-2">
  <!-- `greet` is the name of a method defined below -->
  <button v-on:click="greet">Greet</button>
</div>
var example2 = new Vue({
  el: '#example-2',
  data: {
    name: 'Vue.js'
  },
  // define methods under the `methods` object
  methods: {
    greet: function (event) {
      // `this` inside methods points to the Vue instance
      alert('Hello ' + this.name + '!')
      // `event` is the native DOM event
      if (event) {
        alert(event.target.tagName)
      }
    }
  }
})

// you can invoke methods in JavaScript too
example2.greet() // => 'Hello Vue.js!'


کار با متدهای درون خطی (Methods in Inline Handlers)

به جای اتصال مستقیم به نام متد ، می توانیم از متدهایی در یک عبارت JavaScript به صورت خطی (inline) نیز استفاده کنیم:

<div id="example-3">
  <button v-on:click="say('hi')">Say hi</button>
  <button v-on:click="say('what')">Say what</button>
</div>
new Vue({
  el: '#example-3',
  methods: {
    say: function (message) {
      alert(message)
    }
  }
})

نتیجه:

بعضی اوقات ما نیاز داریم در یک کنترل کننده دستور داخلی (inline statement handler)به رویداد اصلی DOM نیز دسترسی پیدا کنیم. می توانید با استفاده از متغیر ویژه $event آن رویداد را به متد منتقل کنید:

<button v-on:click="warn('Form cannot be submitted yet.', $event)">
  Submit
</button>
// ...
methods: {
  warn: function (message, event) {
    // now we have access to the native event
    if (event) event.preventDefault()
    alert(message)
  }
}


اصلاح کننده رویداد (Event Modifiers)

این یک نیاز بسیار متداول است که متدهای ()event.preventDefault یا ()event.stopPropagation را در مدیریت رویداد به کار بگیرید. اگرچه ما می توانیم این کار را به راحتی در داخل متدها انجام دهیم ، اما بهتر است که متدها صرفاً در مورد منطق داده ها باشند نه اینکه بخواهند با جزئیات رویداد DOM سروکار داشته باشند.

برای رفع این مشکل ، Vue اصلاح کننده رویداد (event modifiers ) را برای v-on فراهم می کند. به یاد بیاورید که event modifiers پسوندهایی با عنوان هستند که توسط یک نقطه مشخص می شوند.

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

<!-- the click event's propagation will be stopped -->
<a v-on:click.stop="doThis"></a>

<!-- the submit event will no longer reload the page -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- modifiers can be chained -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- just the modifier -->
<form v-on:submit.prevent></form>

<!-- use capture mode when adding the event listener -->
<!-- i.e. an event targeting an inner element is handled here before being handled by that element -->
<div v-on:click.capture="doThis">...</div>

<!-- only trigger handler if event.target is the element itself -->
<!-- i.e. not from a child element -->
<div v-on:click.self="doThat">...</div>
هنگام استفاده از modifiers ، موارد مهم را مرتب کنید زیرا کد مربوطه به همان ترتیب تولید می شود. بنابراین استفاده از v-on:click.prevent.self از کلیه کلیکها جلوگیری می کند در حالی که v-on:click.self.prevent فقط از کلیک روی خود عنصر جلوگیری می کند.

در نسخه New in 2.1.4+

<!-- the click event will be triggered at most once -->
<a v-on:click.once="doThis"></a>

بر خلاف اصلاح کننده های دیگر ، که منحصر به رویدادهای DOM بومی هستند ، از اصلاح کننده once. نیز می توانید در رویدادهای کامپوننت استفاده کنید.

در نسخه New in 2.3.0+

<!-- the scroll event's default behavior (scrolling) will happen -->
<!-- immediately, instead of waiting for `onScroll` to complete  -->
<!-- in case it contains `event.preventDefault()`                -->
<div v-on:scroll.passive="onScroll">...</div>

اصلاح کننده passive. مخصوصاً برای بهبود عملکرد در دستگاه های تلفن همراه مفید است.

از passive. و .prevent با یکدیگر استفاده نکنید ، زیرا prevent. نادیده گرفته می شود و مرورگر شما احتمالاً هشداری را به شما نشان می دهد. به یاد داشته باشید ، passive. با مرورگر ارتباط برقرار می کند که نمی خواهید از عملکرد پیش فرض رویداد جلوگیری کند.


کار با کیبورد (Key Modifiers)

هنگام گوش دادن به رویدادهای صفحه کلید ، اغلب باید کلیدهای خاص را بررسی کنیم. Vue اجازه می دهد تا هنگام گوش دادن به رویدادهای کلیدی ، اصلاح کننده های کیبورد (key modifiers) را برای v-on اضافه کنید:

<!-- only call `vm.submit()` when the `key` is `Enter` -->
<input v-on:keyup.enter="submit">

می توانید مستقیماً از نامهای کلید معتبری که از طریق KeyboardEvent.key در معرض مدیریت هستند با تغییر نام آنها بصورت kebab-case استفاده کنید.

<input v-on:keyup.page-down="onPageDown">

در مثال بالا، مدیریت کننده رویداد زمانی فراخوانی می شود که event.key$ برابر با 'PageDown' باشد.


استفاده از (Key Codes)

استفاده از رویدادهای keyCode ممکن است در مرورگرهای جدید پشتیبانی نشود.

استفاده از ویژگی های keyCode نیز مجاز است:

<input v-on:keyup.13="submit">

Vue در صورت لزوم برای پشتیبانی از مرورگرها ، نامهای متداول را برای متداول ترین کدهای کلیدی فراهم می کند:

  • .enter
  • .tab
  • .delete (captures both “Delete” and “Backspace” keys)
  • .esc
  • .space
  • .up
  • .down
  • .left
  • .right

چند کلید (esc. و تمام کلیدهای جهت دار) در IE9 دارای مقادیر کلیدی متناقض هستند ، بنابراین در صورت نیاز به پشتیبانی از IE9 ، این مستعارهای داخلی ترجیح داده می شوند.

همچنین می توانید نام مستعار اصلاح کننده کلید سفارشی (define custom key modifier aliases) را از طریق شیء سراسری config.keyCodes تعریف کنید:

// enable `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112


System Modifier Keys

در New in 2.1.0+ :

شما می توانید از modifiers زیر جهت شنود رویدادهای موس یا کیبورد فقط زمانیکه کلید اصلاح کننده مربوطه فشرده شد استفاده نمایید:

  • .ctrl
  • .alt
  • .shift
  • .meta

توجه: در کیبوردهایMacintosh ، دکمه meta کلید (⌘) است. در کیبوردهای ویندوز ، دکمه meta کلید (⊞) است. در کیبوردSun Microsystems ، متا به عنوان یک الماس جامد (◆) مشخص شده است. در کیبوردهای خاص ، به طور خاص صفحه کلیدها و جانشینان دستگاههای MIT و Lisp ، مانند کیبورد نایت ، کیبوردcadet فضایی ، متا با عنوان "META" شناخته می شوند. در کیبوردهایSymbolics ، متا با "META" یا "متا" شناخته می شوند.

برای مثال:

<!-- Alt + C -->
<input @keyup.alt.67="clear">

<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>
توجه داشته باشید که کلیدهای اصلاح کننده با کلیدهای معمولی متفاوت هستند و در هنگام استفاده از وقایع Keyup ، هنگام انتشار رویداد باید فشرده شوند. به عبارت دیگر ، keyup.ctrl تنها در صورت رها کردن کلید در حالی که ctrl را رها می کنید ، شروع می شود. اگر کلید ctrl را به تنهایی آزاد کنید ، رویدادی ایجاد نمی شود. اگر چنین رفتاری را می خواهید ، به جای آن از کلید keycode برای ctrl استفاده کنید: keyup.17.


.exact Modifier

در نسخه New in 2.5.0+ :

اصلاح کننده exact. اجازه می دهد تا کنترل ترکیب دقیق اصلاح کننده های سیستم مورد نیاز برای ایجاد یک رویداد را کنترل کنید.

<!-- this will fire even if Alt or Shift is also pressed -->
<button @click.ctrl="onClick">A</button>

<!-- this will only fire when Ctrl and no other keys are pressed -->
<button @click.ctrl.exact="onCtrlClick">A</button>

<!-- this will only fire when no system modifiers are pressed -->
<button @click.exact="onClick">A</button>


Mouse Button Modifiers

در نسخه New in 2.2.0+ :

  • .left
  • .right
  • .middle

این اصلاح کننده ها کنترل کننده ها را محدود به حوادثی می کنند که توسط یک دکمه ماوس خاص ایجاد می شوند.


چرا از شنودندگان در HTML استفاده می کنیم؟

ممکن است شما نگران باشید که تمام این رویکرد گوش دادن به رویداد ، قوانین قدیمی خوب درباره "جدایی نگرانی ها - separation of concerns " را نقض می کند. مطمئن باشید - از آنجا که تمام عملکردها و اصطلاحات انتقال دهنده Vue کاملاً محدود به ViewModel هستند که نمای فعلی را کنترل می کند ، هیچ مشکلی برای نگهداری نخواهد داشت. در حقیقت ، استفاده از v-on فواید زیادی دارد:

  • پیاده سازی تابع کنترل کننده بهمراه کد JS شما با استفاده از قالب html ساده تر است.
  • از آنجا که لازم نیست شنوندگان رویداد را به صورت دستی در JS وصل کنید ، کد ViewModel شما می تواند منطقی ناب و عاری از DOM باشد. این باعث می شود آزمایش آسان تر شود.
  • هنگامی که یک ViewModel از بین می رود ، تمام شنوندگان رویداد به طور خودکار حذف می شوند. نیازی به نگرانی در مورد پاک کردن توسط خودتان نیست.


منابع مورد مطالعه جهت جمع آوری این مطلب:
https://vuejs.org/v2/guide/events.html


نظرات