Skip to content

Event Handling

Listening to Events

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

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

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

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

Inline Handlers

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

js
const count = ref(0)
js
data() {
  return {
    count: 0
  }
}
template
<button @click="count++">Add 1</button>
<p>Count is: {{ count }}</p>

Method Handlers

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

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

js
const name = ref('Vue.js')

function greet(event) {
  alert(`Hello ${name.value}!`)
  // `event` is the native DOM event
  if (event) {
    alert(event.target.tagName)
  }
}
js
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)
    }
  }
}
template
<!-- `greet` is the name of the method defined above -->
<button @click="greet">Greet</button>

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

আরো দেখুন: Typing Event Handlers

আরো দেখুন: Typing Event Handlers

Method vs. Inline Detection

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

Calling Methods in Inline Handlers

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

js
function say(message) {
  alert(message)
}
js
methods: {
  say(message) {
    alert(message)
  }
}
template
<button @click="say('hello')">Say hello</button>
<button @click="say('bye')">Say bye</button>

Accessing Event Argument in Inline Handlers

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

template
<!-- 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>
js
function warn(message, event) {
  // now we have access to the native event
  if (event) {
    event.preventDefault()
  }
  alert(message)
}
js
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
template
<!-- 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>

TIP

সংশোধক ব্যবহার করার সময় অর্ডার গুরুত্বপূর্ণ কারণ প্রাসঙ্গিক কোড একই ক্রমে তৈরি হয়। তাই @click.prevent.self ব্যবহার করলে এলিমেন্টের নিজের এবং এর বাচ্চাদের উপর ক্লিকের ডিফল্ট অ্যাকশন আটকাবে, যেখানে @click.self.prevent শুধুমাত্র এলিমেন্টে ক্লিকের ডিফল্ট অ্যাকশন প্রতিরোধ করবে।

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

template
<!-- 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 সাথে ব্যবহার করা হয়।

TIP

.passive এবং .prevent একসাথে ব্যবহার করবেন না, কারণ .passive ইতিমধ্যেই ব্রাউজারকে নির্দেশ করে যে আপনি ইভেন্টের ডিফল্ট আচরণ রোধ করতে চান না, এবং আপনি যদি তা করেন তাহলে সম্ভবত আপনি ব্রাউজার থেকে একটি সতর্কতা দেখতে পাবেন .

Key Modifiers

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

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

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

template
<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

Note

Macintosh কীবোর্ডে, মেটা হল কমান্ড কী (⌘)। উইন্ডোজ কীবোর্ডে, মেটা হল উইন্ডোজ কী (⊞)। সান মাইক্রোসিস্টেম কীবোর্ডে, মেটাকে একটি কঠিন হীরা (◆) হিসাবে চিহ্নিত করা হয়। কিছু কীবোর্ডে, বিশেষ করে এমআইটি এবং লিস্প মেশিন কীবোর্ড এবং উত্তরসূরি, যেমন নাইট কীবোর্ড, স্পেস-ক্যাডেট কীবোর্ড, মেটাকে "META" লেবেল করা হয়। সিম্বলিক্স কীবোর্ডে, মেটাকে "META" বা "Meta" লেবেল করা হয়।

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

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

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

TIP

নোট করুন যে মডিফায়ার কীগুলি নিয়মিত কী থেকে আলাদা এবং যখন keyup ইভেন্টের সাথে ব্যবহার করা হয়, ইভেন্টটি নির্গত হলে সেগুলিকে টিপতে হবে। অন্য কথায়, keyup.ctrl শুধুমাত্র তখনই ট্রিগার করবে যদি আপনি ctrl চেপে ধরে একটি কী ছেড়ে দেন। আপনি একা ctrl কী ছেড়ে দিলে এটি ট্রিগার হবে না।

.exact Modifier

.exact সংশোধক একটি ইভেন্ট ট্রিগার করার জন্য প্রয়োজনীয় সিস্টেম মডিফায়ারগুলির সঠিক সমন্বয় নিয়ন্ত্রণের অনুমতি দেয়।

template
<!-- 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

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

Event Handling has loaded