Event Handling ​

Listening to Events ​

DOM ইভেন্টগুলি শোনার জন্য এবং ট্রিগার হয়ে গেলে কিছু জাভাস্ক্রিপ্ট চালানোর জন্য আমরা v-on নির্দেশিকা ব্যবহার করতে পারি, যেটিকে আমরা সাধারণত @ চিহ্নে ছোট করি। ব্যবহার হবে v-on:click="handler" অথবা শর্টকাট সহ, @click="handler"।

হ্যান্ডলার মান নিম্নলিখিতগুলির মধ্যে একটি হতে পারে:

1. ইনলাইন হ্যান্ডলার: ইভেন্টটি ট্রিগার হলে ইনলাইন জাভাস্ক্রিপ্ট চালানো হবে (নেটিভ অনক্লিক অ্যাট্রিবিউটের মতো)।

2. পদ্ধতি হ্যান্ডলার: একটি কম্পিউটেড প্রপার্টির নাম বা পথ যা কম্পোনেন্টে সংজ্ঞায়িত একটি পদ্ধতি নির্দেশ করে।

Inline Handlers ​

ইনলাইন হ্যান্ডলারগুলি সাধারণত সাধারণ ক্ষেত্রে ব্যবহৃত হয়, উদাহরণস্বরূপ:

const count = ref(0)

data() {
  return {
    count: 0
  }
}

<button @click="count++">Add 1</button>
<p>Count is: {{ count }}</p>

Method Handlers ​

যদিও অনেক ইভেন্ট হ্যান্ডলারের যুক্তি আরও জটিল হবে, এবং সম্ভবত ইনলাইন হ্যান্ডলারদের সাথে সম্ভব নয়। এই কারণেই v-on আপনি কল করতে চান এমন একটি কম্পোনেন্ট পদ্ধতির নাম বা পথও গ্রহণ করতে পারে।

উদাহরণ স্বরূপ:

const name = ref('Vue.js')

function greet(event) {
  alert(`Hello ${name.value}!`)
  // `event` is the native DOM event
  if (event) {
    alert(event.target.tagName)
  }
}

data() {
  return {
    name: 'Vue.js'
  }
},
methods: {
  greet(event) {
    // `this` inside methods points to the current active instance
    alert(`Hello ${this.name}!`)
    // `event` is the native DOM event
    if (event) {
      alert(event.target.tagName)
    }
  }
}

<!-- `greet` is the name of the method defined above -->
<button @click="greet">Greet</button>

একটি মেথড হ্যান্ডলার স্বয়ংক্রিয়ভাবে নেটিভ DOM ইভেন্ট অবজেক্ট গ্রহণ করে যা এটিকে ট্রিগার করে - উপরের উদাহরণে, আমরা event.target এর মাধ্যমে ইভেন্টটি প্রেরণকারী কম্পোনেন্ট অ্যাক্সেস করতে সক্ষম।

Method vs. Inline Detection ​

টেমপ্লেট কম্পাইলার v-on মান স্ট্রিং একটি বৈধ জাভাস্ক্রিপ্ট শনাক্তকারী বা কম্পিউটেড প্রপার্টি অ্যাক্সেস পাথ কিনা তা পরীক্ষা করে পদ্ধতি হ্যান্ডলার সনাক্ত করে। উদাহরণস্বরূপ, foo, foo.bar এবং foo['bar'] কে পদ্ধতি হ্যান্ডলার হিসাবে বিবেচনা করা হয়, যখন foo() এবং count++ কে ইনলাইন হ্যান্ডলার হিসাবে বিবেচনা করা হয়।

Calling Methods in Inline Handlers ​

একটি পদ্ধতির নামের সাথে সরাসরি আবদ্ধ হওয়ার পরিবর্তে, আমরা একটি ইনলাইন হ্যান্ডলারে পদ্ধতিগুলিকে কল করতে পারি। এটি আমাদের নেটিভ ইভেন্টের পরিবর্তে পদ্ধতি কাস্টম আর্গুমেন্ট পাস করতে দেয়:

function say(message) {
  alert(message)
}

methods: {
  say(message) {
    alert(message)
  }
}

<button @click="say('hello')">Say hello</button>
<button @click="say('bye')">Say bye</button>

Accessing Event Argument in Inline Handlers ​

কখনও কখনও আমাদের একটি ইনলাইন হ্যান্ডলারে মূল DOM ইভেন্ট অ্যাক্সেস করতে হবে। আপনি বিশেষ $event ভেরিয়েবল ব্যবহার করে একটি পদ্ধতিতে এটি পাস করতে পারেন, অথবা একটি ইনলাইন তীর ফাংশন ব্যবহার করতে পারেন:

<!-- using $event special variable -->
<button @click="warn('Form cannot be submitted yet.', $event)">
  Submit
</button>

<!-- using inline arrow function -->
<button @click="(event) => warn('Form cannot be submitted yet.', event)">
  Submit
</button>

function warn(message, event) {
  // now we have access to the native event
  if (event) {
    event.preventDefault()
  }
  alert(message)
}

methods: {
  warn(message, event) {
    // now we have access to the native event
    if (event) {
      event.preventDefault()
    }
    alert(message)
  }
}

Event Modifiers ​

ইভেন্ট হ্যান্ডলারের ভিতরে event.preventDefault() বা event.stopPropagation() কল করা খুবই সাধারণ প্রয়োজন। যদিও আমরা এটি সহজে পদ্ধতিগুলির ভিতরে করতে পারি, তবে এটি ভাল হবে যদি পদ্ধতিগুলি DOM ইভেন্টের বিবরণের সাথে মোকাবিলা করার পরিবর্তে কেবলমাত্র ডেটা লজিক সম্পর্কে হতে পারে।

এই সমস্যার সমাধান করতে, Vue v-on-এর জন্য ইভেন্ট মডিফায়ার প্রদান করে। মনে রাখবেন যে মডিফায়ারগুলি একটি বিন্দু দ্বারা নির্দেশিত নির্দেশমূলক পোস্টফিক্স।

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

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

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

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

<!-- just the modifier -->
<form @submit.prevent></form>

<!-- only trigger handler if event.target is the element itself -->
<!-- i.e. not from a child element -->
<div @click.self="doThat">...</div>

.capture, .once এবং .passive মডিফায়ারগুলি নেটিভ addEventListener পদ্ধতির বিকল্পগুলি মিরর করে EventTarget/addEventListener#options):

<!-- 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 @click.capture="doThis">...</div>

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

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

.passive মডিফায়ারটি সাধারণত মোবাইল ডিভাইসে পারফরম্যান্সের উন্নতি করার জন্য টাচ ইভেন্ট listeners সাথে ব্যবহার করা হয়।

Key Modifiers ​

কীবোর্ড ইভেন্টগুলির জন্য শোনার সময়, আমাদের প্রায়শই নির্দিষ্ট কীগুলি পরীক্ষা করতে হবে। Vue মূল ইভেন্টগুলি শোনার সময় v-on বা @-এর জন্য কী মডিফায়ার যোগ করার অনুমতি দেয়:

<!-- only call `submit` when the `key` is `Enter` -->
<input @keyup.enter="submit" />

আপনি সরাসরি KeyboardEvent.key এর মাধ্যমে প্রকাশ করা যেকোন বৈধ কী নামগুলিকে কাবাবে রূপান্তর করে পরিবর্তনকারী হিসাবে ব্যবহার করতে পারেন- মামলা

<input @keyup.page-down="onPageDown" />

উপরের উদাহরণে, হ্যান্ডলারকে শুধুমাত্র তখনই ডাকা হবে যদি $event.key 'PageDown' এর সমান হয়।

Key Aliases ​

Vue সর্বাধিক ব্যবহৃত কীগুলির জন্য উপনাম প্রদান করে:

• .enter
• .tab
• .delete ("Delete" এবং "Backspace" কী উভয়ই captures করে)
• .esc
• .space
• .up
• .down
• .left
• .right

System Modifier Keys ​

মাউস বা কীবোর্ড ইভেন্ট শ্রোতাদের ট্রিগার করার জন্য আপনি নিম্নলিখিত সংশোধকগুলি ব্যবহার করতে পারেন শুধুমাত্র যখন সংশ্লিষ্ট মডিফায়ার কী চাপা হয়:

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

উদাহরণ স্বরূপ:

<!-- Alt + Enter -->
<input @keyup.alt.enter="clear" />

<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>

.exact Modifier ​

.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 ​

• .left
• .right
• .middle

এই মডিফায়ারগুলি হ্যান্ডলারকে একটি নির্দিষ্ট মাউস বোতাম দ্বারা ট্রিগার করা ইভেন্টগুলিতে সীমাবদ্ধ করে।

Note, however, that .left, .right, and .middle modifier names are based on the typical right-handed mouse layout, but in fact represent "main", "secondary", and "auxiliary" pointing device event triggers, respectively, and not the actual physical buttons. So that for a left-handed mouse layout the "main" button might physically be the right one but would trigger the .left modifier handler. Or a trackpad might trigger the .left handler with a one-finger tap, the .right handler with a two-finger tap, and the .middle handler with a three-finger tap. Similarly, other devices and event sources generating "mouse" events might have trigger modes that are not related to "left" and "right" whatsoever.