input-element-and-event-handling

3.10. ইনপুট এলিমেন্ট এবং ইভেন্ট হ্যান্ডলিং

ইভেন্ট হচ্ছে সোজা কথায় কোনো ঘটনা। আমি আমার একটা HTML ডকুমেন্ট এর কোথাও ক্লিক করলাম, এটা একটা ইভেন্ট। অথবা আমি একটা ইলিমেন্ট এর উপর মাউস পয়েন্টার নিলাম, অথবা আমি কী-বোর্ডের কোনো কী-তে চাপলাম, এগুলো সবই ইভেন্টের অন্তর্ভুক্ত। এমনিতে একটা পেজ লোড করা, পেজকে রিসাইজ করা এগুলোও ইভেন্টের মধ্যে পড়ে। এরকম আরো অনেক রকমের ইভেন্ট আছে যেগুলো আমাদের HTML ডকুমেন্ট এ, ডকুমেন্ট এর বিভিন্ন ইলিমেন্টে বিভিন্নভাবে ঘটতে পারে।

এখন এরকম কোনো ইভেন্ট এ আমরা হয়তো কোনো অ্যাকশন নিতে চাইতে পারি। যেমন আমরা হয়তো চাইতে পারি কেউ অমুক বাটনে ক্লিক করলে একটা ম্যাসেজ শো করাবো। অথবা আমাদের পেজটা পুরোপুরি লোড না হওয়া পর্যন্ত আমরা একটা লোডার শো করাবো। অথবা আমরা ফর্ম সাবমিট করার সময় ইনপুট ফিল্ডগুলো ভ্যালিড কিনা দেখবো। এগুলো সবই ইভেন্ট এর সাহায্যে করা হয়।

জাভাস্ক্রিপ্ট এর ইভেন্ট এর সাহায্যে একটা পেজ অনেকটা ডায়নামিক পেজের মতো করা ফেলা যায়। আমরা পেজ রিলোড না করেও অনেকসময় ইনস্ট্যান্ট ফলাফল, অ্যাকশন দেখতে পারি জাভাস্ক্রিপ্ট এর ইভেন্ট ব্যবহার করার মাধ্যমে। এর ফলে আমাদের একটা ওয়েবসাইটের ওভারল ইউজার এক্সপেরিয়েন্স ভালো লেভেলে নেওয়া যায়।

অ্যালার্ট বক্সঃ শুরু করার আগে আমরা একটা স্পেশাল ফাংশন দেখে নেই। এই ফাংশনের কাজ হচ্ছে আমাদের ব্রাউজারে অ্যালার্ট দেখানো। যেমন কন্সোলে সরাসরি যদি এরকম কোড লিখিঃ

alert(“Hello World!”);

এটা রান করার সাথে সাথেই আপনার ব্রাউজারে অ্যালার্ট বক্স দেখবেনঃ

HTML ইভেন্ট অ্যাট্রিবিউটঃ আমরা চাইলে আমাদের ইলিমেন্ট এ অ্যাট্রিবিউট হিসেবেও সরাসরি ইভেন্ট হ্যান্ডেল করতে পারি। যেমন আমাদের ডকুমেন্টটায় বক্স ৪ এর প্রথম লিস্ট আইটেমে এরকম সরাসরি অ্যাট্রিবিউটের মাধ্যমে ক্লিক ইভেন্ট লাগাতে চাইঃ

Click

</li>

এটা লিখে ফাইল সেইভ করে, ব্রাউজারে আমাদের ডকুমেন্টটা রিলোড দিয়ে এই ইলিমেন্ট এর উপরে ক্লিক করলে একটা অ্যালার্ট বক্সে কিছু দেখতে পাবেনঃ

এখন আমরা এখানেই সব লিখে দিয়েছি, কিন্তু চাইলে একটা ফাংশন আলাদা করে তৈরী করে সেটা ক্লিকে কল হবে এরকমটাও বলে দিতে পারি। যেমন main.js একটা ফাইল ক্রিয়েট করে এরকম একটা ফাংশন লিখুনঃ

function showAlert() {

alert(“Welcome to vivasoft”);

}

এখন আবার আমাদের সেই লিস্ট আইটেমে গিয়ে onclick এর ভিতরের সব মুছে শুধুমাত্র এই ফাংশনটা কল করুনঃ

<li onclick=“showAlert()”>Click Me</li>

এখন ক্রোমে ওপেন করা ডকুমেন্টটা রিলোড দিয়ে যদি আবার সেই ইলিমেন্ট উপর ক্লিক করেন তাহলে দেখবেন অ্যালার্ট বক্সে লেখা আছে “Welcome to vivasoft”

তারমানে আমরা সফলভাবে অন্য একটা ফাইলে ফাংশন তৈরী করে সেটা অ্যাট্রিবিউটের মাধ্যমে কল করতে পেরেছি। এরকম বড় কোনো ফাংশানালিটি থাকলে এক লাইনে তো আর হয় না, এভাবেই আলাদা ফাইল নিয়ে সেখানে সেটা হ্যান্ডেল করতে হয়। এরকম অ্যাট্রিবিউটের মাধ্যমে আরো কিছু টাইপের ইভেন্ট নিয়ে কাজ করতে পারবেন যেমনঃ

onchange: আপনার ইলিমেন্ট এ কোনো ধরনের পরিবর্তন আসলে এই ইভেন্ট ঘটবে। সাধারণত আমরা যখন ফর্মের ইনপুট ফিল্ডে ডাটা দেই, তখন সেই ইনপুট ফিল্ডের ভ্যালু চেঞ্জ হয়। আর সেই চেঞ্জের সময়ের ইভেন্টটা এটা দিয়ে হ্যান্ডেল করতে পারবেন।

onclick: ইলিমেন্ট এর উপর ক্লিক করলে এই ইভেন্ট ঘটবে।

onmouseover: খালি পয়েন্টারটা আপনার কাঙ্খিত ইলিমেন্ট এর উপরে নিলেই এই ইভেন্ট ঘটবে।

onmouseout: কোনো ইলিমেন্ট থেকে আপনার মাউসের পয়েন্টার সরালে এই ইভেন্ট ঘটবে।

onkeydown: কী-বোর্ডের কোনো কী চাপলে এই ইভেন্ট ঘটবে।

onload: ব্রাউজার আপনার ইলিমেন্ট লোড শেষ করলে এই ইভেন্ট ঘটে।

ইভেন্টের লিসেনারঃ উপরে আমরা যেভাবে ইভেন্ট হ্যান্ডেলিং দেখলাম সেটা খুব বেশী ব্যবহার করা হয় না। বরং আমাদের আরেকটা মেথড আছে, একটা মেথড দিয়েই আমরা বিভিন্নরকমের ইভেন্ট হ্যান্ডেল করতে পারবো। তাছাড়া এই মেথডের বিশেষ কিছু সুবিধাও আছে যেমন আমরা এটার মাধ্যমে আনলিমিটেড ইভেন্ট অ্যাড করতে পারবো একটা ইলিমেন্ট এ। যেখানে একটু আগে উল্লেখ করা পদ্ধতিতে আমরা এক সাথে দুইটা ক্লিক ইভেন্ট অ্যাড করতে পারবো না, পরেরটা আগের ইভেন্টকে রিপ্লেস করে ফেলবে। এছাড়াও বাকী পার্থ্যক্যগুলো পরে আস্তে আস্তে আলোচনা করবো। সেই মেথডটা হচ্ছে addEventListener() । এটাও আমরা আমাদের ইলিমেন্ট এর সাথে ব্যবহার করতে পারবো। এই addEventListener প্রধানত দুইটা প্যারামিটার নেয়। প্রথমটা হচ্ছে কোন টাইপের ইভেন্ট হবে সেটা, আর দ্বিতীয়টা একটা ফাংশন(হ্যান্ডেলার) যেটা ইভেন্ট ঘটলে রান হবেঃ

yourElement.addEventListener(typeofEvent, handler);

const box1 = document.getElementById(“box1”);

এখন আমরা এই বক্স ১ এ আমাদের ইভেন্ট লিসেনারটা লাগাবো। আর একই সাথে আমরা ক্লিক টাইপের ইভেন্ট চাচ্ছিঃ

box1.addEventListener(“click”, function () {

console.log(“Clicked on Box 1”);

});

ব্যাস, এখন বক্স ১ এর উপরে গিয়ে ক্লিক করলেই দেখবেন আপনার ফাংশন রান হচ্ছে। এরকম আপনি চাইলে এখানে ইভেন্ট টাইপে প্যারামিটার হিসেবে load, focus, blur, submit, resize, cut, copy, keydown, keypress, keyup সহ আরো অনেক টাইপের ইভেন্ট দিতে পারবেন।

উদাহরন

onblur: When you leave the input field, a function is triggered which transforms the input text to upper case.

Enter your name: <input type=“text” id=“fname” onblur=“myFunction()”>

function myFunction() {

var x = document.getElementById(“fname”);

x.value = x.value.toUpperCase();

}

</script>

onchange: When you leave the input field, a function is triggered which transforms the input text to upper case.

Enter your name: <input type=“text” id=“fname” onchange=“upperCase()”>

function upperCase() {

const x = document.getElementById(“fname”);

x.value = x.value.toUpperCase();

}

</script>

onfocus: When the input field gets focus, a function is triggered which changes the background-color.

Enter your name: <input type=“text” onfocus=“myFunction(this)”>

function myFunction(x) {

x.style.background = “yellow”;

}

</script>

Change text color using onmouseover and onmouseout event.

<h1 onmouseover=“style.color=’red'” onmouseout=“style.color=’black'”>Mouse over this text</h1>

Click the button to trigger a function.

<button onclick=“myFunction()”>Click me</button>

function myFunction() {

document.getElementById(“demo”).innerHTML = “Hello World”;

}

</script>

এসো নিজে করি

When you leave the input field, a function is triggered which changes the background-color.
Add an anchor element to an HTML page that links to a web site of your choice. When the anchor is clicked, you should prevent the new web page from loading.
Using JavaScript change event for radio buttons

3.10. ইনপুট এলিমেন্ট এবং ইভেন্ট হ্যান্ডলিং

ঠিকানা

লিংকসমূহ

অন্যান্য

যোগাযোগ করুন

© Vivasoft 2023 • All rights reserved.