জাভাস্ক্রিপ্ট ইভেন্ট টিউটোরিয়াল (JavaScript Event Tutorial in Bangla)
ইভেন্ট কি?
ওয়েব পেজে (ডকুমেন্ট বা ব্রাউজারে) ইউজার কখনও মাউস ক্লিক করে(কোন একটা লিংক বা যেকোন কিছুর উপর), কিবোর্ড দিয়ে টাইপ করে (ফর্ম থাকলে), কখনও কোন একটা এলিমেন্টের উপর মাউস নিয়ে যেতে (মাউস হোভার) পারে এটা কোন লিংক, প্যারাগ্রাফ, ইনপুট ফিল্ড বা যেকোন কিছুর উপরে হতে পারে। এগুলি হচ্ছে এক একটা ইভেন্ট। যেমন কোন একটা প্যারাগ্রাফ বা বাটনের উপর ক্লিক করলেন, তাহলে এটা একটা ইভেন্ট (ক্লিক ইভেন্ট)। কোন একটা এলিমেন্টের উপর মাউস নিয়ে গেলেন এটা একটা ইভেন্ট(মাউস হোভার ইভেন্ট)। এরুপ অনেক ইভেন্ট আছে যেমন click, mouseover, load ইত্যাদি।
ইভেন্ট হ্যান্ডলার বা লিসেনার (Listener)
ওয়েব পেজে ইভেন্টগুলি ধরে আমরা ইচ্ছে করলে কোন কাজ করতে পারি, কোন জাভাস্ক্রিপ্টের কোড এক্সিকিউট করাতে পারি। জাভাস্ক্রিপ্টে অনেক ফাংশন আছে যেগুলি শুধু এসব কোন ইভেন্ট ঘটলে এক্সিকিউট হবে এই ফাংশনগুলিকে বলে ইভেন্ট হ্যান্ডলার। প্রতিটি ইভেন্টের জন্য ইভেন্ট হ্যান্ডলার আছে। ইভেন্টের নামের আগে শুধু on শব্দটি বসিয়ে দিলেই সেই ইভেন্টের জন্য ইভেন্ট হ্যান্ডলার হয়ে গেলে। যেমন click ইভেন্টের জন্য ইভেন্ট হ্যান্ডলার হল onclick, পেজ যখন লোড হয় সেটাও একটা ইভেন্ট, load ইভেন্ট এবং এর ইভেন্ট হ্যান্ডলার হল onload ইত্যাদি। যখনি একটা ইভেন্ট ঘটল, এটাকে টেকনিকাল ভাষায় বলে অমুক ইভেন্ট fire হল।
এইচটিএমএল এ এই ইভেন্ট হ্যান্ডলারগুলিকে এট্রিবিউট হিসেবে ব্যবহার করতে পারেন যেকোন এলিমেন্টে। যেমন
এখানে
রান করিয়ে ক্লিক করে দেখুন। এখানে onclick এ সামন্য একটা এলার্ট দিয়ে
দেখিয়েছি কিন্তু বাস্তবে অনেক কোড এক্সিকিউট করাতে হয় এমনকি অনেক লাইন লেখা
লাগে। এটা করার জন্য ফাংশন লেখা হয় এবং onclick সেই ফাংশনকে কল করা হয়।
যেমন
প্রয়োগ দেখুন
** এখানে দেখুন onclick ইভেন্ট হ্যান্ডলার দিয়ে এইচটিএমএল এই popup() ফাংশনকে কল করেছি। এভাবে যেকোন ফাংশন তৈরী করতে পারেন জাভাস্ক্রিপ্টে এবং ডকুমেন্টে বা ব্রাউজারে যেকোন ইভেন্ট হ্যান্ডলারের সাহায্যে সেটা এক্সিকিউট করাতে পারেন।
ইভেন্ট হ্যান্ডলারের প্রচুর কাজ আছে। যেমন আপনি আপনার সাইট মোবাইলে এক ভার্সন আর ডেস্কটপ ব্রাউজারে আরেক ভার্সন দেখাবেন তখন onload চেক করে নিতে পারেন যে ইউজার আপনার সাইট মোবাইল নাকি ডেস্কটপে দেখছে। এরপর সেই অনুযায়ী যেকোন কোড এক্সিকিউট করাতে পারেন।
কিছু গুরত্বপূর্ন ইভেন্ট এবং ইভেন্ট হ্যান্ডলার
এরুপ আরো ইভেন্ট আছে এখানে শুধু গুরত্বপূর্নগুলি দেখানো হল।
ওয়েব পেজে (ডকুমেন্ট বা ব্রাউজারে) ইউজার কখনও মাউস ক্লিক করে(কোন একটা লিংক বা যেকোন কিছুর উপর), কিবোর্ড দিয়ে টাইপ করে (ফর্ম থাকলে), কখনও কোন একটা এলিমেন্টের উপর মাউস নিয়ে যেতে (মাউস হোভার) পারে এটা কোন লিংক, প্যারাগ্রাফ, ইনপুট ফিল্ড বা যেকোন কিছুর উপরে হতে পারে। এগুলি হচ্ছে এক একটা ইভেন্ট। যেমন কোন একটা প্যারাগ্রাফ বা বাটনের উপর ক্লিক করলেন, তাহলে এটা একটা ইভেন্ট (ক্লিক ইভেন্ট)। কোন একটা এলিমেন্টের উপর মাউস নিয়ে গেলেন এটা একটা ইভেন্ট(মাউস হোভার ইভেন্ট)। এরুপ অনেক ইভেন্ট আছে যেমন click, mouseover, load ইত্যাদি।
ইভেন্ট হ্যান্ডলার বা লিসেনার (Listener)
ওয়েব পেজে ইভেন্টগুলি ধরে আমরা ইচ্ছে করলে কোন কাজ করতে পারি, কোন জাভাস্ক্রিপ্টের কোড এক্সিকিউট করাতে পারি। জাভাস্ক্রিপ্টে অনেক ফাংশন আছে যেগুলি শুধু এসব কোন ইভেন্ট ঘটলে এক্সিকিউট হবে এই ফাংশনগুলিকে বলে ইভেন্ট হ্যান্ডলার। প্রতিটি ইভেন্টের জন্য ইভেন্ট হ্যান্ডলার আছে। ইভেন্টের নামের আগে শুধু on শব্দটি বসিয়ে দিলেই সেই ইভেন্টের জন্য ইভেন্ট হ্যান্ডলার হয়ে গেলে। যেমন click ইভেন্টের জন্য ইভেন্ট হ্যান্ডলার হল onclick, পেজ যখন লোড হয় সেটাও একটা ইভেন্ট, load ইভেন্ট এবং এর ইভেন্ট হ্যান্ডলার হল onload ইত্যাদি। যখনি একটা ইভেন্ট ঘটল, এটাকে টেকনিকাল ভাষায় বলে অমুক ইভেন্ট fire হল।
এইচটিএমএল এ এই ইভেন্ট হ্যান্ডলারগুলিকে এট্রিবিউট হিসেবে ব্যবহার করতে পারেন যেকোন এলিমেন্টে। যেমন
1.<button onclick="alert('click event fired')">Click me</button>01.<html>02.<head>03.<script type="text/javascript">04.function popup() {05.alert("Hello bangladesh")06.}07.</script>08.</head>09.<body>10.<input type="button" onclick="popup()" value="popup">11.</body>12.</html>** এখানে দেখুন onclick ইভেন্ট হ্যান্ডলার দিয়ে এইচটিএমএল এই popup() ফাংশনকে কল করেছি। এভাবে যেকোন ফাংশন তৈরী করতে পারেন জাভাস্ক্রিপ্টে এবং ডকুমেন্টে বা ব্রাউজারে যেকোন ইভেন্ট হ্যান্ডলারের সাহায্যে সেটা এক্সিকিউট করাতে পারেন।
ইভেন্ট হ্যান্ডলারের প্রচুর কাজ আছে। যেমন আপনি আপনার সাইট মোবাইলে এক ভার্সন আর ডেস্কটপ ব্রাউজারে আরেক ভার্সন দেখাবেন তখন onload চেক করে নিতে পারেন যে ইউজার আপনার সাইট মোবাইল নাকি ডেস্কটপে দেখছে। এরপর সেই অনুযায়ী যেকোন কোড এক্সিকিউট করাতে পারেন।
কিছু গুরত্বপূর্ন ইভেন্ট এবং ইভেন্ট হ্যান্ডলার
| ইভেন্ট | বর্ননা |
| click | যেকোন HTML এলিমেন্ট কিংবা ডকুমেন্টে ক্লিক করলে click ইভেন্ট ফায়ার হবে এবং onclick ইভেন্ট হ্যান্ডলার দিয়ে সাথে সাথে যেকোন জাভাস্ক্রিপ্ট কোড এক্সিকিউট করাতে পারবেন। |
| submit | যেকোন HTML ফর্ম সাবমিট করলে submit ইভেন্ট ফায়ার হবে এবং onsubmit ইভেন্ট হ্যান্ডলার দিয়ে সাথে সাথে যেকোন জাভাস্ক্রিপ্ট কোড এক্সিকিউট করাতে পারবেন। |
| blur | এটাও একটা ফর্ম ইভেন্ট, ইনপুট বক্স (ফর্ম এলিমেন্ট) থেকে মাউস সরিয়ে অন্য কোথাও ক্লিক করলে (ফোকাস চলে যাবার সাথে সাথে) blur ইভেন্ট ফায়ার হয় এবং ইভেন্ট হ্যান্ডলার হল onblur |
| change | ফর্ম ইভেন্ট। ফর্ম এলিমেন্টের মান (যেমন ইনপুট বক্সের মান) পরিবর্তন করার সময় ফায়ার হয়। ইভেন্ট হ্যান্ডলার onchange |
| focus | ফর্ম ইভেন্ট। ফর্ম এলিমেন্টে যখন ফোকাস হবে তখন ফায়ার হয়। ইভেন্ট হ্যান্ডলার onfocus |
| select | যেকোন টেক্সট সিলেক্ট করার সময়ই ফায়ার হয়। onselect হচ্ছে ইভেন্ট হ্যান্ডলার। |
| dblclick | এটা মাউস ইভেন্ট। কোন এলিমেন্টে ডাবল ক্লিক করলে এটা ফায়ার হবে। ondblclick হচ্ছে এর ইভেন্ট হ্যান্ডলার। |
| mouseover | মাউস ইভেন্ট। কোন এলিমেন্টের উপর মাউস নিয়ে গেলে ফায়ার হয়। ইভেন্ট হ্যান্ডলার onmouseover |
| load | এটা উইন্ডো ইভেন্ট। ফায়ার হয় যখন পেজ লোড শেষ হয়। onload হচ্ছে ইভেন্ট হ্যান্ডলার |
| resize | এটাও উইন্ডো ইভেন্ট। ফায়ার হয় যদি উইন্ডো রিসাইজ করা হয় তখন। onresize হচ্ছে ইভেন্ট হ্যান্ডলার |
0 মন্তব্য(গুলি):
Post a Comment