জাভাস্ক্রিপ্টে নির্দিষ্ট এলিমেন্টে ইভেন্ট হ্যান্ডলার কীভাবে যোগ করবেন

জাভাস্ক্রিপ্ট addEventListener() মেথড প্রদান করে যা নির্দিষ্ট এলিমেন্টে একটি ইভেন্ট হ্যান্ডলার সংযুক্ত করে। এই মেথডটি বিদ্যমান ইভেন্ট হ্যান্ডলারগুলো ওভাররাইট না করে নতুন হ্যান্ডলার যোগ করে। একসাথে একটি এলিমেন্টে অনেক ইভেন্ট হ্যান্ডলার যোগ করা সম্ভব।

addEventListener() মেথডটি ইভেন্ট কীভাবে বাবলিং (bubbling) করে সেটা নিয়ন্ত্রণ করা সহজ করে দেয়। আমরা.mouseover, click ইত্যাদি অনেক ইভেন্ট প্রয়োগ করতে পারি।

উদাহরণ

নিচের উদাহরণে, mouseover ইভেন্টটি অ্যাসাইন করা হয়েছে। তাই বাটনের ওপর মাউস রাখলে আউটপুটে চাহিদা অনুযায়ী টেক্সট দেখাবে।

<html> <body> <p>This example uses the addEventListener() method to attach a mouseover event to a button.</p> 
<input type="button" id="myBtn" value="listener"> 
<p id="listener"></p> 
    <script> 
        document.getElementById("myBtn").addEventListener("mouseover", displayText); 
        function displayText() { 
            document.getElementById("listener").innerHTML = 
            document.write("Tutorix is the best e-learning platform"); 
        } 
    </script> </body> </html>

উপরোক্ত কোড এক্সিকিউট করলে স্ক্রিনে নিচের ছবিটি দেখাবে।

mouseover ইভেন্টটি "listener" বাটনে হলে নিচের আউটপুটটি এক্সিকিউট হবে।

আউটপুট