ঘটনা প্রতিক্রিয়া
জাভাস্ক্রিপ্ট চালানো যেতে পারে যখন কোনো ঘটনা ঘটে, যেমন কোনো ব্যবহারকারী যখন কোনো HTML উপাদানে ক্লিক করে।
কোনো ব্যবহারকারী কোনো উপাদানে ক্লিক করলে কোড চালানোর জন্য একটি HTML ইভেন্ট অ্যাট্রিবিউটে JavaScript কোড যোগ করুন:
onclick=JavaScriptHTML ইভেন্টের উদাহরণ:
- যখন ব্যবহারকারী মাউস ক্লিক করে
- ওয়েব পেজ লোড হওয়ার পর
- ছবিটি লোড হওয়ার পর
- যখন একটি উপাদানের উপর মাউস চলে যায়
- যখন একটি ইনপুট ক্ষেত্র পরিবর্তন করা হয়
- যখন HTML ফর্ম জমা হয়
- যখন ব্যবহারকারী একটি কী টিপে
ইভেন্ট উদাহরণ
উদাহরণ 1
এই উদাহরণে, ব্যবহারকারী যখন এটিতে ক্লিক করেন তখন <h1> উপাদানটির বিষয়বস্তু পরিবর্তিত হয়:
<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML = 'Ooops!'">Click on this text!</h1>
</body>
</html>উদাহরণ 2
এই উদাহরণে, একটি ইভেন্ট হ্যান্ডলার থেকে একটি ফাংশন কল করা হয়:
<!DOCTYPE html>
<html>
<body>
<h1 onclick="changeText(this)">Click on this text!</h1>
<script>
function changeText(id) {
id.innerHTML = "Ooops!";
}
</script>
</body>
</html>HTML ইভেন্ট বৈশিষ্ট্য
আপনি HTML উপাদানে ইভেন্ট বরাদ্দ করতে ইভেন্ট বৈশিষ্ট্য ব্যবহার করতে পারেন।
উদাহরণ
বোতাম উপাদানটিতে অনক্লিক ইভেন্টটি বরাদ্দ করুন:
<button onclick="displayDate()">Try it</button>উপরের উদাহরণে, যখন বোতামটি ক্লিক করা হয় তখন ফাংশন displayDate বলা হয়।
HTML DOM ব্যবহার করে ইভেন্ট বরাদ্দ করা
HTML DOM আপনাকে জাভাস্ক্রিপ্ট ব্যবহার করে HTML উপাদানগুলিতে ইভেন্ট বরাদ্দ করতে দেয়:
উদাহরণ
বোতাম উপাদানটিতে অনক্লিক ইভেন্টটি বরাদ্দ করুন:
<script>
document.getElementById("myBtn").onclick = displayDate;
</script>উপরের উদাহরণে, id="myBtn" সহ HTML এলিমেন্টে displayDate ফাংশন বরাদ্দ করা হয়েছে।
বোতামটি ক্লিক করলে ফাংশনটি কার্যকর হয়।
অনলোড এবং অনলোড ইভেন্ট
ব্যবহারকারী যখন পৃষ্ঠায় প্রবেশ করে বা প্রস্থান করে তখন অনলোড এবং অনলোড ইভেন্টগুলি বরখাস্ত হয়।
অনলোড ইভেন্টটি ভিজিটরের ব্রাউজারের ধরন এবং ব্রাউজার সংস্করণ পরীক্ষা করতে এবং তথ্যের উপর ভিত্তি করে ওয়েব পৃষ্ঠার সঠিক সংস্করণ লোড করতে ব্যবহার করা যেতে পারে।
অনলোড এবং অনলোড ইভেন্টগুলি কুকিজ ম্যানিপুলেট করতে ব্যবহার করা যেতে পারে।
উদাহরণ
<body onload="checkCookies()">অনইনপুট ইভেন্ট
ব্যবহারকারী যখন ইনপুট ডেটা প্রবেশ করে তখন অনইনপুট ইভেন্টটি প্রায়শই নির্দিষ্ট কিছু কাজের জন্য ব্যবহৃত হয়।
নিচে অনইনপুট ব্যবহার করে একটি ইনপুট ক্ষেত্রের বিষয়বস্তু পরিবর্তন করার একটি উদাহরণ দেওয়া হল।
উদাহরণ
<input type="text" id="fname" oninput="upperCase()">পরিবর্তন ইভেন্ট
অনচেঞ্জ ইভেন্টটি প্রায়ই ইনপুট ক্ষেত্রগুলির বৈধতার সাথে একত্রে ব্যবহৃত হয়।
নিচে onchange ব্যবহার করার একটি উদাহরণ। যখন ব্যবহারকারী ইনপুট ক্ষেত্রের বিষয়বস্তু পরিবর্তন করে তখন upperCase() ফাংশন বলা হয়।
উদাহরণ
<input type="text" id="fname" onchange="upperCase()">পয়েন্টার ইভেন্ট
onmouseover এবং onmouseout ঘটনা:
যখন ব্যবহারকারী মাউসকে এইচটিএমএল এলিমেন্টের উপর দিয়ে সরিয়ে দেয় বা প্রস্থান করে তখন আপনি একটি অ্যাকশন ট্রিগার করতে onmouseover এবং onmouseout ইভেন্ট ব্যবহার করতে পারেন।
onmousdown, onmouseup এবং onclick ইভেন্ট:
অনমাউসডাউন, অনমাউসআপ এবং অনক্লিক ইভেন্টগুলি মাউস-ক্লিকের অংশ। প্রথমে, যখন মাউস-বাটনে ক্লিক করা হয়, অনমাউসডাউন ইভেন্টটি ফায়ার করা হয়, তারপর যখন মাউস-বোতামটি প্রকাশ করা হয়, তখন অনমাউসআপ ইভেন্টটি ফায়ার করা হয় এবং অবশেষে, যখন মাউস-ক্লিক শেষ হয়, তখন অনক্লিক ইভেন্টটি ফায়ার করা হয়।
আরো উদাহরণ
onmousdown and onmouseup
ব্যবহারকারী মাউস বোতাম চেপে ধরে থাকাকালীন চিত্রটি পরিবর্তন করুন।
onload
পৃষ্ঠাটি লোড করা শেষ হলে একটি সতর্কতা বাক্স প্রদর্শন করুন।
onfocus
একটি ইনপুট ক্ষেত্রের পটভূমির রঙ পরিবর্তন করুন যখন এটিতে ফোকাস থাকে।
পয়েন্টার ইভেন্ট
একটি উপাদানের রঙ পরিবর্তন করুন যখন কার্সার এটির উপর চলে যায়।
HTML DOM ইভেন্ট অবজেক্ট রেফারেন্স
সমস্ত HTML DOM ইভেন্টের তালিকার জন্য, আমাদের সম্পূর্ণ HTML DOM ইভেন্ট অবজেক্ট রেফারেন্স দেখুন।
জসিফ টিম নোট:
HTML DOM ইভেন্ট এবং তাদের ব্যবহার সম্পর্কে বিস্তারিত রেফারেন্সের জন্য আমাদের ডকুমেন্টেশন দেখুন।