Jassif Team Institution

HTML ইভেন্ট

এইচটিএমএল ইভেন্টগুলি এমন জিনিস যা এইচটিএমএল উপাদানগুলির সাথে ঘটে।

ইভেন্টের উদাহরণ:

• একটি HTML বোতাম ক্লিক করা হয়
• ওয়েব পেজ লোডিং সম্পূর্ণ
• মাউস একটি উপাদানের উপর চলে যায়
• একটি কীবোর্ড কী চাপা হয়
• একটি HTML ইনপুট ক্ষেত্র রূপান্তরিত হয়

HTML DOM জাভাস্ক্রিপ্টকে HTML ইভেন্টগুলিতে প্রতিক্রিয়া জানাতে দেয়:

জাভাস্ক্রিপ্ট ইভেন্ট

প্রায়ই, ঘটনা ঘটলে, আপনি কিছু করতে চাইতে পারেন।

যখন JavaScript HTML পৃষ্ঠাগুলিতে ব্যবহার করা হয়, তখন JavaScript ইভেন্টগুলিতে প্রতিক্রিয়া জানাতে পারে।

ইভেন্ট শনাক্ত হলে JavaScript আপনাকে কোড চালানোর অনুমতি দেয়।

HTML জাভাস্ক্রিপ্ট কোড সহ HTML উপাদানগুলিতে ইভেন্ট হ্যান্ডলার বৈশিষ্ট্য যোগ করার অনুমতি দেয়।

সিনট্যাক্স

একক উদ্ধৃতি সহ:

<element event='some JavaScript'>

ডবল উদ্ধৃতি সহ:

<element event="some JavaScript">

নিম্নলিখিত উদাহরণে, onclick বৈশিষ্ট্য (কোড সহ) একটি <button> উপাদানে যোগ করা হয়েছে:

<button onclick="document.getElementById('demo').innerHTML = Date()">The time is?</button>

উপরের উদাহরণে, JavaScript কোড উপাদানটির বিষয়বস্তুকে id="demo" দিয়ে প্রতিস্থাপন করে।

পরবর্তী উদাহরণে, কোডটি তার নিজস্ব উপাদানের বিষয়বস্তু প্রতিস্থাপন করতে this.innerHTML ব্যবহার করে:

<button onclick="this.innerHTML = Date()">The time is?</button>

একটি জাভাস্ক্রিপ্ট ফাংশন কলিং

জাভাস্ক্রিপ্ট কোড প্রায়ই কয়েক লাইন দীর্ঘ হতে পারে.

কল ফাংশনে ইভেন্ট অ্যাট্রিবিউট ব্যবহার করা আরও সাধারণ:

<button onclick="displayDate()">The time is?</button>

<script>
function displayDate() {
  document.getElementById("demo").innerHTML = Date();
}
</script>

সাধারণ HTML ইভেন্ট

এখানে কিছু সাধারণ HTML ইভেন্টের একটি তালিকা রয়েছে:

ইন্টারেক্টিভ ইভেন্ট ডেমোনস্ট্রেশন

জাভাস্ক্রিপ্ট ইভেন্ট হ্যান্ডলার

একটি ইভেন্ট হ্যান্ডলার হল জাভাস্ক্রিপ্ট কোড যা একটি ঘটনা ঘটলে চলে।

ইভেন্ট হ্যান্ডলারগুলি ব্যবহারকারীর ইনপুট, ব্যবহারকারীর ক্রিয়াকলাপ এবং ব্রাউজার ক্রিয়াগুলি পরিচালনা এবং যাচাই করতে ব্যবহার করা যেতে পারে:

• প্রতিবার একটি পৃষ্ঠা লোড হওয়ার সময় করণীয়
• পেজ বন্ধ হলে করণীয়
• ব্যবহারকারী একটি বোতামে ক্লিক করলে সঞ্চালিত ক্রিয়া৷
• ব্যবহারকারীর ডেটা প্রবেশ করার সময় বিষয়বস্তু যাচাই করা হবে
• এবং আরো অনেক...

আপনি JavaScript ইভেন্টগুলির সাথে কাজ করার জন্য বিভিন্ন পদ্ধতি ব্যবহার করতে পারেন:

• HTML ইভেন্ট অ্যাট্রিবিউট সরাসরি জাভাস্ক্রিপ্ট কোড এক্সিকিউট করতে পারে
• HTML ইভেন্ট অ্যাট্রিবিউট জাভাস্ক্রিপ্ট ফাংশন কল করতে পারে
• আপনি HTML উপাদানগুলিতে আপনার নিজস্ব ইভেন্ট হ্যান্ডলার ফাংশন বরাদ্দ করতে পারেন
• ইভেন্টগুলি পাঠানো বা পরিচালনা করা থেকে প্রতিরোধ করা যেতে পারে
• এবং আরো অনেক...

একটি ঘটনা শ্রোতা ব্যবহার করে

onclick এর মত ইভেন্ট এট্রিবিউট ব্যবহার করা সহজ।

যাইহোক, addEventListener() ব্যবহার করা ইভেন্টগুলি পরিচালনা করার প্রস্তাবিত উপায়।

সুপারিশ করা হয় না

অনক্লিক বৈশিষ্ট্য ব্যবহার করে:

<button onclick="displayDate()">Time is?</button>

<p id="demo"></p>

<script>
// Function to displat date
function displayDate() {
  document.getElementById("demo").innerHTML = Date();
}
</script>

addEventListener() পদ্ধতি HTML এবং JavaScript কে আলাদা করে।

অত্যন্ত বাঞ্ছনীয়

addEventListener() পদ্ধতি ব্যবহার করে:

<button id="myBtn">Click me</button>

<p id="demo"></p>

<script>
const btn = document.getElementById("myBtn");

// Add EventListener to btn
btn.addEventListener("click", function () {
  document.getElementById("demo").innerHTML = Date();
});
</script>

ইভেন্ট লিসেনার বনাম ইভেন্ট অ্যাট্রিবিউট

অনুশীলন করুন