Event Listeners এবং Handlers তৈরি করা

Framework7 এ Event Listeners এবং Handlers ব্যবহার করে অ্যাপ্লিকেশনের বিভিন্ন ইন্টারঅ্যাকশন পরিচালনা করা যায়। কোনো একটি অ্যাকশন (যেমন বাটন ক্লিক, পেজ লোড, ইনপুট পরিবর্তন) ঘটলে নির্দিষ্ট ফাংশন (Event Handler) কল করা হয়।

Framework7 এ ইভেন্টের ধারণা

Framework7 এ ডিফল্টভাবে DOM ইভেন্ট (click, input, change, submit ইত্যাদি) সমর্থন করে, সাথে ফ্রেমওয়ার্ক নিজস্ব কিছু ইভেন্টও প্রদান করে (যেমন page:init, page:mounted, page:beforeout ইত্যাদি)। Event Listener ব্যবহার করে যখন নির্দিষ্ট ইভেন্ট ঘটে তখন কী ঘটবে তা নির্ধারণ করা যায়।

সাধারণ DOM ইভেন্ট Listener

উদাহরণ (বাটন ক্লিক):

<div class="block">
  <button class="button button-fill" id="myButton">Click Me</button>
</div>

// ইভেন্ট Listener যোগ করা
$('#myButton').on('click', function() {
  app.dialog.alert('Button Clicked!');
});
</code></pre><p>উপরের উদাহরণে <code inline="">$(...) Framework7 এর Dom7 সিলেক্টর। on('click', ...) দিয়ে আমরা "click" ইভেন্টের জন্য Listener সেট করেছি। যখন এই বাটনটি ক্লিক করা হবে, একটি অ্যালার্ট প্রদর্শিত হবে।
ইনপুট চেঞ্জ ইভেন্ট
<div class="list">
  <ul>
    <li>
      <div class="item-content item-input">
        <div class="item-inner">
          <div class="item-title item-label">Your Name</div>
          <div class="item-input-wrap">
            <input type="text" id="nameInput" placeholder="Enter your name">
          </div>
        </div>
      </div>
    </li>
  </ul>
</div>
$('#nameInput').on('input', function(e) {
  var value =$(this).val();
  console.log('Name input changed: ' + value);
});
উপরের কোডে input ইভেন্ট ব্যবহার করে যখন ইনপুট ফিল্ডে কোনো কিছু টাইপ করা হয়, তখন কনসোলে মেসেজ প্রিন্ট হবে।
Page ইভেন্ট Listener
Framework7 এ পেজ সংক্রান্ত ইভেন্ট রয়েছে, যেগুলো পৃষ্ঠা লোড হওয়ার আগে, পরে, কিংবা পৃষ্ঠা পরিবর্তন হলে ট্রিগার হয়।
উদাহরণ (page:init ইভেন্ট):
ধরি, about.html নামে একটি পৃষ্ঠা আছে:
<div class="page" data-name="about">
  <div class="navbar">
    <div class="navbar-inner">
      <div class="title">About</div>
    </div>
  </div>
  <div class="page-content">
    <p>This is the About page.</p>
  </div>
</div>
// Page ইভেন্ট Listener
$(document).on('page:init', '.page[data-name="about"]', function (e) {
  console.log('About page initialized');
});
</code></pre><p>উপরের উদাহরণে <code inline="">page:init</code> ইভেন্টটি যখন <code inline="">about</code> পৃষ্ঠা ইнишিয়ালাইজ হবে তখন ট্রিগার হবে। এখানে <code inline="">.page[data-name="about"]</code> সিলেক্টর ব্যবহার করা হয়েছে, যাতে নির্দিষ্ট পৃষ্ঠায় ইভেন্ট ফায়ার হয়।</p><hr><h3>Custom ইভেন্ট ট্রিগার করা এবং শোনা</h3><p>আপনি চাইলে নিজের ইভেন্ট তৈরি করে তা ট্রিগার করতে পারেন। Framework7 এর Dom7 দিয়ে <code inline="">trigger</code> এবং <code inline="">on</code> ব্যবহার করে কাস্টম ইভেন্ট পরিচালনা করা যায়।</p><pre><code class="language-javascript">// Custom ইভেন্ট ট্রিগার$('.my-element').trigger('myCustomEvent', {someData: 123});

// Custom ইভেন্ট Listener
$('.my-element').on('myCustomEvent', function(e, data) {
  console.log('My Custom Event Fired!', data);
});
</code></pre><p>উপরের উদাহরণে <code inline="">myCustomEvent</code> নামে একটি ইভেন্ট তৈরি করা হয়েছে, যা কিছু ডেটা সহ ট্রিগার করা হয়। ইভেন্ট Listener সেই ডেটা গ্রহণ করে কাজ করবে।</p><hr><h3>একাধিক Event Listener যোগ করা</h3><p>একই এলিমেন্টে একাধিক ইভেন্ট Listener যোগ করতে পারেন। উদাহরণস্বরূপ, একই বাটনে ক্লিক এবং হোভার ইভেন্ট অ্যাড করা:</p><pre><code class="language-javascript">$('#myButton').on('click', function() {
  console.log('Button Clicked');
});

$('#myButton').on('mouseover', function() {
  console.log('Mouse Over Button');
});
</code></pre><hr><h3>ইভেন্ট Listener সরিয়ে ফেলা</h3><p>কোনো কারণে ইভেন্ট Listener সরিয়ে ফেলতে হলে <code inline="">off</code> মেথড ব্যবহার করা হয়:</p><pre><code class="language-javascript">$('#myButton').off('click');
এটি #myButton এর জন্য যুক্ত করা ক্লিক ইভেন্ট Listener সরিয়ে ফেলবে।
Framework7 এ Event Listener এবং Handler তৈরি করা সহজ। Dom7 সিলেক্টর দিয়ে এলিমেন্ট সিলেক্ট করে on মেথডের মাধ্যমে ইভেন্ট Listener যোগ করা হয়। পেজ লেভেল ইভেন্ট, ইনপুট ইভেন্ট, ক্লিক ইভেন্ট, কাস্টম ইভেন্ট ইত্যাদির মাধ্যমে আপনার অ্যাপ্লিকেশনকে ইন্টারঅ্যাক্টিভ ও ডায়নামিক করে তোলা সম্ভব।