Event Bubbling এবং Event Capturing

Event Bubbling এবং Event Capturing হল JavaFX (এবং সাধারণভাবে DOM-based UI frameworks) এর ইভেন্ট মডেল এর দুটি গুরুত্বপূর্ণ অংশ, যা UI ইভেন্টের কার্যকলাপকে পরিচালনা করে। এটি নির্দেশ করে কিভাবে ইভেন্টগুলি একে অপরের মধ্যে propagate (পাস) হয়, অর্থাৎ কিভাবে ইভেন্টটি একটি UI উপাদান থেকে অন্য উপাদানে পৌঁছায়।

Event Bubbling (ইভেন্ট বাবলিং)

Event Bubbling হল ইভেন্ট হ্যান্ডলিংয়ের একটি প্রক্রিয়া যেখানে একটি ইভেন্ট প্রথমে target element (যেমন, একটি বাটন) এ ঘটে, এবং তারপর এটি উর্ধ্বমুখী (upward) প্রপাগেট হয়, অর্থাৎ প্যারেন্ট উপাদান এবং তার উপরের স্তরের উপাদানগুলির দিকে চলে যায়। এটি প্রথমে child (সন্তান) উপাদানে ঘটে এবং পরে এটি parent (প্যারেন্ট) উপাদানগুলিতে পৌঁছায়, এর পরে তারা যদি ইভেন্ট হ্যান্ডলার সেট করা থাকে।

Event Bubbling-এর সুবিধা হল, আপনি parent উপাদানে একটি সাধারণ ইভেন্ট হ্যান্ডলার সেট করতে পারেন এবং তারপরে সমস্ত child উপাদানের ইভেন্টগুলির জন্য কাজ করতে পারবেন।

Event Bubbling এর উদাহরণ

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;

public class EventBubblingExample extends Application {
    @Override
    public void start(Stage primaryStage) {
        // Parent Layout
        StackPane root = new StackPane();
        
        // Button as child element
        Button btn = new Button("Click Me");
        
        // Event handler for the parent (root) layout
        root.setOnMouseClicked(e -> System.out.println("Parent clicked"));

        // Event handler for the button (child)
        btn.setOnMouseClicked(e -> System.out.println("Button clicked"));

        // Adding the button to the parent layout
        root.getChildren().add(btn);

        // Creating the scene
        Scene scene = new Scene(root, 300, 250);
        primaryStage.setTitle("Event Bubbling Example");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}

আউটপুট:

• প্রথমে আপনি বাটনটি ক্লিক করলে "Button clicked" দেখাবে।
• তারপর, event bubbling এর মাধ্যমে এটি প্যারেন্ট (StackPane) পর্যন্ত যাবে, এবং "Parent clicked" দেখাবে।

এটি দেখায় যে, একটি ইভেন্ট প্রথমে child উপাদানে ঘটে, তারপর তা parent উপাদানে চলে যায়।

Event Capturing (ইভেন্ট ক্যাপচারিং)

Event Capturing হল ইভেন্ট হ্যান্ডলিংয়ের একটি প্রক্রিয়া যেখানে ইভেন্টটি প্রথমে parent (প্যারেন্ট) উপাদানে ধরা হয় এবং তারপরে child (সন্তান) উপাদানগুলিতে পৌঁছায়। এটি বিপরীত প্রক্রিয়া যা event bubbling এর সাথে সম্পর্কিত। ইভেন্ট প্রথমে প্যারেন্ট উপাদানে পৌঁছায় এবং তারপর child উপাদানগুলিতে পৌঁছায়।

Event Capturing-এর সুবিধা হল, আপনি parent উপাদানে ইভেন্ট হ্যান্ডলার যোগ করতে পারেন, যাতে সমস্ত child উপাদানের ইভেন্টটি শুরুতেই ক্যাপচার করা হয়।

Event Capturing এর উদাহরণ

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;

public class EventCapturingExample extends Application {
    @Override
    public void start(Stage primaryStage) {
        // Parent Layout
        StackPane root = new StackPane();
        
        // Button as child element
        Button btn = new Button("Click Me");
        
        // Event handler for the parent (root) layout, set for capturing phase
        root.addEventFilter(javafx.event.EventType.ROOT, e -> System.out.println("Parent clicked (Capturing Phase)"));

        // Event handler for the button (child)
        btn.setOnMouseClicked(e -> System.out.println("Button clicked"));

        // Adding the button to the parent layout
        root.getChildren().add(btn);

        // Creating the scene
        Scene scene = new Scene(root, 300, 250);
        primaryStage.setTitle("Event Capturing Example");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}

আউটপুট:

• আপনি বাটনটি ক্লিক করলে প্রথমে "Parent clicked (Capturing Phase)" দেখাবে, কারণ প্যারেন্ট উপাদান ইভেন্টটি প্রথমে ক্যাপচার করেছে।
• তারপর, বাটনটি ক্লিক হলে "Button clicked" দেখাবে।

এটি দেখায় যে, প্রথমে parent উপাদান ইভেন্টটি ক্যাপচার করবে এবং পরে এটি child উপাদানে পৌঁছাবে।

Event Bubbling vs Event Capturing:

1. Event Bubbling:
   • ইভেন্টটি প্রথমে target (child) উপাদানে ঘটে এবং পরে তা parent উপাদানে চলে যায়।
   • JavaFX ডিফল্টভাবে event bubbling ব্যবহার করে।
2. Event Capturing:
   • ইভেন্টটি প্রথমে parent উপাদানে পৌঁছায় এবং পরে child উপাদানে চলে যায়।
   • ইভেন্ট ক্যাপচারিং ব্যবহার করার জন্য আপনাকে addEventFilter() মেথড ব্যবহার করতে হয়।

Event Propagation Flow:

• Event Capturing:
  • Parent → Child (Top-down)
  • প্রথমে ইভেন্ট প্যারেন্টে ধরা হয়, তারপর চাইল্ডে চলে আসে।
• Event Bubbling:
  • Child → Parent (Bottom-up)
  • প্রথমে ইভেন্ট চাইল্ডে ঘটে, তারপর প্যারেন্টে চলে আসে।

JavaFX-এ Event Handling:

1. addEventHandler():

   • এটি ব্যবহার করে আপনি একটি ইভেন্ট হ্যান্ডলার যুক্ত করতে পারেন যেটি event bubbling ফেজে কাজ করবে।

   btn.addEventHandler(MouseEvent.MOUSE_CLICKED, e -> System.out.println("Button clicked"));
   

2. addEventFilter():

   • এটি ব্যবহার করে আপনি একটি ইভেন্ট ফিল্টার যুক্ত করতে পারেন যা event capturing ফেজে কাজ করবে।

   root.addEventFilter(MouseEvent.MOUSE_CLICKED, e -> System.out.println("Parent clicked (Capturing Phase)"));
   

সারাংশ:

• Event Bubbling ইভেন্টটি প্রথমে child উপাদানে ঘটিয়ে, তারপর তা parent উপাদানে চলে আসে।
• Event Capturing ইভেন্টটি প্রথমে parent উপাদানে ধরা হয় এবং পরে তা child উপাদানে চলে আসে।
• JavaFX-এ ইভেন্ট হ্যান্ডলিং করতে addEventHandler() এবং addEventFilter() ব্যবহার করা হয়, যেখানে প্রথমটি event bubbling এবং দ্বিতীয়টি event capturing এর জন্য ব্যবহৃত হয়।