ઇવેન્ટ હેન્ડલિંગ (Event Handling) ​

ઇવેન્ટ્સ સાંભળવી (Listening to Events) ​

આપણે v-on ડિરેક્ટિવનો ઉપયોગ કરી શકીએ છીએ, જેને આપણે સામાન્ય રીતે @ ચિહ્નથી ટૂંકું કરીએ છીએ, DOM ઇવેન્ટ્સ સાંભળવા માટે અને જ્યારે તેઓ ટ્રિગર થાય ત્યારે અમુક જાવાસ્ક્રિપ્ટ ચલાવવા માટે. વપરાશ v-on:click="handler" અથવા શોર્ટકટ સાથે, @click="handler" હશે.

હેન્ડલર વેલ્યુ (handler value) નીચેનામાંથી એક હોઈ શકે છે:

1. ઇનલાઇન હેન્ડલર્સ: ઇવેન્ટ ટ્રિગર થાય ત્યારે એક્ઝિક્યુટ કરવા માટે ઇનલાઇન જાવાસ્ક્રિપ્ટ (નેટિવ onclick એટ્રિબ્યુટ જેવું જ).

2. મેથડ હેન્ડલર્સ: કમ્પોનન્ટ પર વ્યાખ્યાયિત મેથડ (method) તરફ નિર્દેશ કરતું પ્રોપર્ટીનું નામ અથવા પાથ.

ઇનલાઇન હેન્ડલર્સ (Inline Handlers) ​

ઇનલાઇન હેન્ડલર્સનો ઉપયોગ સામાન્ય રીતે સાદા કિસ્સાઓમાં થાય છે, ઉદાહરણ તરીકે:

const count = ref(0)

data() {
  return {
    count: 0
  }
}

<button @click="count++">૧ ઉમેરો</button>
<p>ગણતરી છે: {{ count }}</p>

મેથડ હેન્ડલર્સ (Method Handlers) ​

ઘણા ઇવેન્ટ હેન્ડલર્સ માટેનું લોજિક વધુ જટિલ હશે અને ઇનલાઇન હેન્ડલર્સ સાથે શક્ય ન હોઈ શકે. તેથી જ v-on કમ્પોનન્ટ મેથડનું નામ અથવા પાથ પણ સ્વીકારી શકે છે જેને તમે કૉલ કરવા માંગો છો.

ઉદાહરણ તરીકે:

const name = ref('Vue.js')

function greet(event) {
  alert(`નમસ્તે ${name.value}!`)
  // `event` એ નેટિવ DOM ઇવેન્ટ છે
  if (event) {
    alert(event.target.tagName)
  }
}

data() {
  return {
    name: 'Vue.js'
  }
},
methods: {
  greet(event) {
    // મેથડ્સની અંદર `this` વર્તમાન એક્ટિવ ઇન્સ્ટન્સ તરફ નિર્દેશ કરે છે
    alert(`નમસ્તે ${this.name}!`)
    // `event` એ નેટિવ DOM ઇવેન્ટ છે
    if (event) {
      alert(event.target.tagName)
    }
  }
}

<!-- `greet` એ ઉપર વ્યાખ્યાયિત મેથડનું નામ છે -->
<button @click="greet">અભિવાદન (Greet)</button>

મેથડ હેન્ડલરને તે ટ્રિગર કરતી નેટિવ DOM ઇવેન્ટ ઓબ્જેક્ટ આપમેળે પ્રાપ્ત થાય છે - ઉપરના ઉદાહરણમાં, અમે event.target દ્વારા ઇવેન્ટ મોકલનાર એલિમેન્ટને એક્સેસ કરવા સક્ષમ છીએ.

મેથડ વિરુદ્ધ ઇનલાઇન ડિટેક્શન ​

ટેમ્પલેટ કમ્પાઇલર શુ v-on વેલ્યુ સ્ટ્રિંગ માન્ય જાવાસ્ક્રિપ્ટ આઇડેન્ટિફાયર (identifier) અથવા પ્રોપર્ટી એક્સેસ પાથ છે કે કેમ તે ચકાસીને મેથડ હેન્ડલર્સને ઓળખે છે. ઉદાહરણ તરીકે, foo, foo.bar અને foo['bar'] ને મેથડ હેન્ડલર્સ તરીકે ગણવામાં આવે છે, જ્યારે foo() અને count++ ને ઇનલાઇન હેન્ડલર્સ તરીકે ગણવામાં આવે છે.

ઇનલાઇન હેન્ડલર્સમાં મેથડ્સ કોલ કરવી ​

મેથડના નામ સાથે સીધા બાંધવાને બદલે, આપણે ઇનલાઇન હેન્ડલરમાં મેથડ્સ પણ કોલ કરી શકીએ છીએ. આ આપણને નેટિવ ઇવેન્ટને બદલે મેથડમાં કસ્ટમ આર્ગ્યુમેન્ટ્સ પાસ કરવાની મંજૂરી આપે છે:

function say(message) {
  alert(message)
}

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

<button @click="say('હેલો')">હેલો બોલો</button>
<button @click="say('બાય')">બાય બોલો</button>

ઇનલાઇન હેન્ડલર્સમાં ઇવેન્ટ આર્ગ્યુમેન્ટ એક્સેસ કરવી ​

ક્યારેક આપણે ઇનલાઇન હેન્ડલરમાં અસલ DOM ઇવેન્ટને એક્સેસ કરવાની પણ જરૂર પડે છે. તમે તેને વિશિષ્ટ $event વેરિએબલનો ઉપયોગ કરીને મેથડમાં પાસ કરી શકો છો અથવા ઇનલાઇન એરો ફંક્શનનો ઉપયોગ કરી શકો છો:

<!-- $event વિશેષ વેરિએબલનો ઉપયોગ કરીને -->
<button @click="warn('ફોર્મ હજુ સબમિટ કરી શકાતું નથી.', $event)">
  સબમિટ
</button>

<!-- ઇનલાઇન એરો ફંક્શનનો ઉપયોગ કરીને -->
<button @click="(event) => warn('ફોર્મ હજુ સબમિટ કરી શકાતું નથી.', event)">
  સબમિટ
</button>

function warn(message, event) {
  // હવે આપણી પાસે નેટિવ ઇવેન્ટની એક્સેસ છે
  if (event) {
    event.preventDefault()
  }
  alert(message)
}

methods: {
  warn(message, event) {
    // હવે આપણી પાસે નેટિવ ઇવેન્ટની એક્સેસ છે
    if (event) {
      event.preventDefault()
    }
    alert(message)
  }
}

ઇવેન્ટ મોડિફાયર્સ (Event Modifiers) ​

ઇવેન્ટ હેન્ડલર્સની અંદર event.preventDefault() અથવા event.stopPropagation() ને કોલ કરવાની સામાન્ય જરૂરિયાત હોય છે. જોકે આપણે મેથડ્સની અંદર આ સરળતાથી કરી શકીએ છીએ, જો મેથડ્સ DOM ઇવેન્ટની વિગતો સાથે વ્યવહાર કરવાને બદલે સંપૂર્ણ રીતે ડેટા લોજિક વિશે હોઈ શકે તો તે વધુ સારું રહેશે.

આ સમસ્યાને ઉકેલવા માટે, Vue v-on માટે ઇવેન્ટ મોડિફાયર્સ (event modifiers) પૂરા પાડે છે. યાદ કરો કે મોડિફાયર્સ બિંદુ (dot) દ્વારા સૂચવવામાં આવેલ ડિરેક્ટિવ પોસ્ટફિક્સ છે.

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

<!-- ક્લિક ઇવેન્ટનું પ્રોપેગેશન (propagation) અટકાવી દેવામાં આવશે -->
<a @click.stop="doThis"></a>

<!-- સબમિટ ઇવેન્ટ હવે પેજ લોડ થશે નહિ -->
<form @submit.prevent="onSubmit"></form>

<!-- મોડિફાયર્સને સાંકળી (chained) શકાય છે -->
<a @click.stop.prevent="doThat"></a>

<!-- માત્ર મોડિફાયર -->
<form @submit.prevent></form>

<!-- જો event.target એલિમેન્ટ પોતે હોય તો જ હેન્ડલર ટ્રિગર કરો -->
<!-- એટલે કે ચાઇલ્ડ એલિમેન્ટમાંથી નહીં -->
<div @click.self="doThat">...</div>

.capture, .once, અને .passive મોડિફાયર્સ નેટિવ addEventListener મેથડના ઓપ્શન્સ ને પ્રતિબિંબિત કરે છે:

<!-- ઇવેન્ટ લિસનર ઉમેરતી વખતે કેપ્ચર મોડ (capture mode) નો ઉપયોગ કરો -->
<!-- એટલે કે આંતરિક એલિમેન્ટને લક્ષ્ય બનાવતી ઇવેન્ટ અહીં હેન્ડલ કરવામાં આવે છે -->
<!-- તે એલિમેન્ટ દ્વારા હેન્ડલ કરવામાં આવે તે પહેલાં -->
<div @click.capture="doThis">...</div>

<!-- ક્લિક ઇવેન્ટ વધુમાં વધુ એકવાર ટ્રિગર થશે -->
<a @click.once="doThis"></a>

<!-- સ્ક્રોલ ઇવેન્ટનું ડિફોલ્ટ વર્તન (સ્ક્રોલિંગ) તરત જ થશે -->
<!-- `onScroll` પૂર્ણ થવાની રાહ જોવાને બદલે -->
<!-- જો તેમાં `event.preventDefault()` હોય તો -->
<div @scroll.passive="onScroll">...</div>

.passive મોડિફાયરનો ઉપયોગ સામાન્ય રીતે મોબાઇલ ઉપકરણો પર પર્ફોર્મન્સ સુધારવા માટે ટચ ઇવેન્ટ લિસનર્સ સાથે કરવામાં આવે છે.

કી મોડિફાયર્સ (Key Modifiers) ​

કીબોર્ડ ઇવેન્ટ્સ સાંભળતી વખતે, આપણે ઘણીવાર ચોક્કસ કી ચેક કરવાની જરૂર પડે છે. કી ઇવેન્ટ્સ સાંભળતી વખતે Vue v-on અથવા @ માટે કી મોડિફાયર્સ ઉમેરવાની મંજૂરી આપે છે:

<!-- જ્યારે `key` એ `Enter` હોય ત્યારે જ `submit` ને કોલ કરો -->
<input @keyup.enter="submit" />

તમે KeyboardEvent.key દ્વારા એક્સપોઝ થયેલ કોઈપણ માન્ય કી નામોને કેબાબ-કેસ (kebab-case) માં કન્વર્ટ કરીને સીધા જ મોડિફાયર તરીકે ઉપયોગ કરી શકો છો.

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

ઉપરના ઉદાહરણમાં, જો $event.key એ 'PageDown' ની સમાન હોય તો જ હેન્ડલર કોલ કરવામાં આવશે.

કી એલિયાસીસ (Key Aliases) ​

Vue સૌથી સામાન્ય રીતે ઉપયોગમાં લેવાતી કી માટે એલિયાસ (aliases) પ્રદાન કરે છે:

• .enter
• .tab
• .delete ("Delete" અને "Backspace" બંને કી માટે)
• .esc
• .space
• .up
• .down
• .left
• .right

સિસ્ટમ મોડિફાયર કીઝ ​

જ્યારે સંબંધિત મોડિફાયર કી દબાવવામાં આવે ત્યારે જ માઉસ અથવા કીબોર્ડ ઇવેન્ટ લિસનર્સને ટ્રિગર કરવા માટે તમે નીચેના મોડિફાયર્સનો ઉપયોગ કરી શકો છો:

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

ઉદાહરણ તરીકે:

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

<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">કંઈક કરો</div>

.exact મોડિફાયર ​

.exact મોડિફાયર ઇવેન્ટને ટ્રિગર કરવા માટે જરૂરી સિસ્ટમ મોડિફાયર્સના ચોક્કસ સંયોજન (combination) ને નિયંત્રિત કરવાની મંજૂરી આપે છે.

<!-- જો Alt અથવા Shift પણ દબાવવામાં આવે તો પણ આ ફાયર થશે -->
<button @click.ctrl="onClick">A</button>

<!-- જ્યારે Ctrl દબાવવામાં આવે અને બીજી કોઈ કી દબાવવામાં ન આવે ત્યારે જ આ ફાયર થશે -->
<button @click.ctrl.exact="onCtrlClick">A</button>

<!-- જ્યારે કોઈ સિસ્ટમ મોડિફાયર દબાવવામાં ન આવે ત્યારે જ આ ફાયર થશે -->
<button @click.exact="onClick">A</button>

માઉસ બટન મોડિફાયર્સ ​

• .left
• .right
• .middle

આ મોડિફાયર્સ હેન્ડલરને ચોક્કસ માઉસ બટન દ્વારા ટ્રિગર કરાયેલ ઇવેન્ટ્સ સુધી મર્યાદિત કરે છે.

જોકે, નોંધ કરો કે .left, .right, અને .middle મોડિફાયર નામો સામાન્ય જમણા હાથના માઉસ લેઆઉટ પર આધારિત છે, પરંતુ વાસ્તવમાં અનુક્રમે "main", "secondary", અને "auxiliary" પોઇન્ટિંગ ડિવાઇસ ઇવેન્ટ ટ્રિગર્સનું પ્રતિનિધિત્વ કરે છે, અને વાસ્તવિક ફિઝિકલ બટનોનું નહીં. તેથી ડાબા હાથના માઉસ લેઆઉટ માટે "મુખ્ય" બટન જમણું હોઈ શકે છે પરંતુ તે .left મોડિફાયર હેન્ડલરને ટ્રિગર કરશે. અથવા ટ્રેકપેડ એક આંગળીના ટેપ સાથે .left હેન્ડલર, બે આંગળીના ટેપ સાથે .right હેન્ડલર અને ત્રણ આંગળીના ટેપ સાથે .middle હેન્ડલર ટ્રિગર કરી શકે છે. તે જ રીતે, "માઉસ" ઇવેન્ટ્સ જનરેટ કરતા અન્ય ઉપકરણો અને ઇવેન્ટ સ્ત્રોતોમાં ટ્રિગર મોડ્સ હોઈ શકે છે જે "ડાબે" અને "જમણે" સાથે બિલકુલ સંબંધિત નથી.