জাভাস্ক্রিপ্টে ইভেন্ট পরিচালনা
এই নিবন্ধটি জাভাস্ক্রিপ্টে ইভেন্ট পরিচালনা ব্যাখ্যা করে।
YouTube Video
javascript-html-event.html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <title>JavaScript & HTML</title>
6 <style>
7 * {
8 box-sizing: border-box;
9 }
10
11 body {
12 margin: 0;
13 padding: 1em;
14 padding-bottom: 10em;
15 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
16 background-color: #f7f9fc;
17 color: #333;
18 line-height: 1.6;
19 }
20
21 .container {
22 max-width: 800px;
23 margin: 0 auto;
24 padding: 1em;
25 background-color: #ffffff;
26 border: 1px solid #ccc;
27 border-radius: 10px;
28 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
29 }
30
31 .container-flex {
32 display: flex;
33 flex-wrap: wrap;
34 gap: 2em;
35 max-width: 1000px;
36 margin: 0 auto;
37 padding: 1em;
38 background-color: #ffffff;
39 border: 1px solid #ccc;
40 border-radius: 10px;
41 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
42 }
43
44 .left-column, .right-column {
45 flex: 1 1 200px;
46 min-width: 200px;
47 }
48
49 h1, h2 {
50 font-size: 1.2rem;
51 color: #007bff;
52 margin-top: 0.5em;
53 margin-bottom: 0.5em;
54 border-left: 5px solid #007bff;
55 padding-left: 0.6em;
56 background-color: #e9f2ff;
57 }
58
59 button {
60 display: block;
61 margin: 1em auto;
62 padding: 0.75em 1.5em;
63 font-size: 1rem;
64 background-color: #007bff;
65 color: white;
66 border: none;
67 border-radius: 6px;
68 cursor: pointer;
69 transition: background-color 0.3s ease;
70 }
71
72 button:hover {
73 background-color: #0056b3;
74 }
75
76 #output {
77 margin-top: 1em;
78 background-color: #1e1e1e;
79 color: #0f0;
80 padding: 1em;
81 border-radius: 8px;
82 min-height: 200px;
83 font-family: Consolas, monospace;
84 font-size: 0.95rem;
85 overflow-y: auto;
86 white-space: pre-wrap;
87 }
88
89 .highlight {
90 outline: 3px solid #ffc107; /* yellow border */
91 background-color: #fff8e1; /* soft yellow background */
92 transition: background-color 0.3s ease, outline 0.3s ease;
93 }
94
95 .active {
96 background-color: #28a745; /* green background */
97 color: #fff;
98 box-shadow: 0 0 10px rgba(40, 167, 69, 0.5);
99 transition: background-color 0.3s ease, box-shadow 0.3s ease;
100 }
101 </style>
102</head>
103<body>
104 <div class="container-flex">
105 <div class="left-column">
106 <h2>HTML Sample</h2>
107 <div id="parentDiv">
108 <button id="myButton">Click me</button>
109 </div>
110 </div>
111
112 <div class="right-column">
113 <h2>Form Sample</h2>
114 <form id="myForm">
115 <input type="text" name="username">
116 <button type="submit">Submit</button>
117 </form>
118 </div>
119 </div>
120
121 <div class="container">
122 <h1>JavaScript Console</h1>
123 <button id="executeBtn">Execute</button>
124 <div id="output"></div>
125 </div>
126
127 <script>
128 // Override console.log to display messages in the #output element
129 (function () {
130 const originalLog = console.log;
131 console.log = function (...args) {
132 originalLog.apply(console, args);
133 const output = document.getElementById('output');
134 output.textContent += args.map(String).join(' ') + '\n';
135 };
136 })();
137
138 document.getElementById('executeBtn').addEventListener('click', () => {
139 // Prevent multiple loads
140 if (document.getElementById('externalScript')) return;
141
142 const script = document.createElement('script');
143 script.src = 'javascript-html-event.js';
144 script.id = 'externalScript';
145 //script.onload = () => console.log('javascript-html-event.js loaded and executed.');
146 //script.onerror = () => console.log('Failed to load javascript-html-event.js.');
147 document.body.appendChild(script);
148 });
149 </script>
150</body>
151</html>জাভাস্ক্রিপ্টে ইভেন্ট পরিচালনা
জাভাস্ক্রিপ্টে ইভেন্ট পরিচালনা হল এমন একটি প্রক্রিয়া যা ব্যবহারকারীর ক্রিয়া (যেমন ক্লিক এবং কীবোর্ড ইনপুট) বা ব্রাউজারের ক্রিয়াগুলির প্রতিক্রিয়ায় নির্দিষ্ট কাজ সম্পাদন করতে সহায়তা করে। ইভেন্ট লিসেনার সেটআপের মাধ্যমে, আপনি গতিশীল এবং ইন্টারেকটিভ ওয়েব পৃষ্ঠা তৈরি করতে পারেন।
ইভেন্টের মৌলিক বিষয়সমূহ
ইভেন্টগুলি ব্যবহারকারীর ক্রিয়া এবং ব্রাউজারের ক্রিয়াগুলির প্রতিক্রিয়ায় সংঘটিত হয়। যখন একটি ইভেন্ট ঘটে, তখন সংশ্লিষ্ট ইভেন্ট হ্যান্ডলার (ফাংশন) কার্যকর হয়। উদাহরণস্বরূপ, নিচের মতো কিছু ইভেন্ট রয়েছে:।
- ক্লিক (
click) - কীবোর্ড ইনপুট (
keydown,keyup) - মাউস মুভমেন্ট (
mousemove,mouseover) - ফর্ম জমা দেয়া (
submit) - পৃষ্ঠা সম্পূর্ণ লোড (
DOMContentLoaded) - স্ক্রল (
scroll)
ইভেন্ট লিসেনার যোগ করা
ইভেন্ট লিসেনারগুলি addEventListener() পদ্ধতি ব্যবহার করে সেটআপ করা হয়। এই পদ্ধতিটি নির্দিষ্ট ইভেন্ট ঘটলে নির্দিষ্ট ফাংশনকে কল করে।
addEventListener()-এর মৌলিক গঠন
1element.addEventListener(event, handler);elementহল HTML উপাদান যা ইভেন্ট পর্যবেক্ষণ করে।eventহল ইভেন্টের নাম (যেমন:click)।handlerহল সেই ফাংশন যা ইভেন্ট সংঘটিত হলে কার্যকর হয়।
ইভেন্ট অবজেক্ট
যখন একটি ইভেন্ট হয়, জাভাস্ক্রিপ্ট একটি ইভেন্ট অবজেক্ট প্রদান করে যা ইভেন্টের বিস্তারিত তথ্য ইভেন্ট হ্যান্ডলারে পাঠায়। এই অবজেক্টে এমন তথ্য থাকে যেমন কোন এলিমেন্ট ইভেন্টটি ট্রিগার করেছে এবং কোন কী চাপা হয়েছিল।
উদাহরণ: ইভেন্ট অবজেক্ট ব্যবহার করা
1<button id="myButton">Click me</button>1const button = document.getElementById('myButton');
2
3button.addEventListener('click', (event) => {
4 console.log(event); // Display event details in the console
5 console.log('Clicked element:', event.target); // Display the clicked element
6});- এই কোডটি ইভেন্ট অবজেক্ট ব্যবহার করে বোতাম ক্লিক হলে কনসোলে বিস্তারিত তথ্য এবং ক্লিক করা উপাদানটি প্রদর্শন করে।
সাধারণ ইভেন্টসমূহ
ক্লিক ইভেন্ট
ক্লিক ইভেন্ট ঘটে যখন ব্যবহারকারী কোনো এলিমেন্টে ক্লিক করেন।
1element.addEventListener('click', () => {
2 console.log('Clicked');
3});- এই কোডটি উপাদান ক্লিক হলে কনসোলে একটি বার্তা প্রদর্শন করে।
কীবোর্ড ইভেন্ট
keydown এবং keyup ইভেন্ট ঘটে যখন ব্যবহারকারী কোনো কী চাপেন বা ছাড়েন। আপনি event.key ব্যবহার করে দেখতে পারেন কোন কী চাপা হয়েছিল।
1document.addEventListener('keydown', (event) => {
2 console.log(`Key pressed: ${event.key}`);
3});- এই কোডটি ব্যবহারকারী একটি কী চাপলে কনসোলে সংশ্লিষ্ট কী-এর নাম প্রদর্শন করে।
মাউস ইভেন্ট
mousemove এবং mouseover ইভেন্ট ঘটে মাউস চলাচল বা হোভার করার সময়।
1document.addEventListener('mousemove', (event) => {
2 console.log(`Mouse position: X=${event.clientX}, Y=${event.clientY}`);
3});- এই কোডটি মাউস সরলেও প্রতিবার কনসোলে অবস্থান (X ও Y কো-অর্ডিনেট) প্রদর্শন করে।
ফর্ম ইভেন্ট
ফর্ম-সংক্রান্ত ইভেন্টগুলির মধ্যে রয়েছে submit এবং input। submit ইভেন্ট ঘটে যখন একটি ফর্ম জমা দেওয়া হয় এবং সাধারণত একটি পেজ রিলোড হয়, তবে এটি এড়াতে প্রায়শই event.preventDefault() ব্যবহার করা হয়।
উদাহরণ: ফর্ম জমা দেওয়ার সময় পেজ রিলোড প্রতিরোধ করা
1<form id="myForm">
2 <input type="text" name="username">
3 <button type="submit">Submit</button>
4</form>1const form = document.getElementById('myForm');
2
3form.addEventListener('submit', (event) => {
4 event.preventDefault(); // Prevent page reload
5 console.log('Form has been submitted');
6});- এই কোডটি ফর্ম জমা দিলে পেজ রিলোড হওয়া বন্ধ করে এবং পরিবর্তে কনসোলে একটি বার্তা প্রদর্শন করে।
ইভেন্টের প্রবাহ (বাবলিং এবং ক্যাপচারিং)
ইভেন্ট দুটি পর্যায়ে ছড়ায়: ক্যাপচারিং পর্যায়, যা প্যারেন্ট এলিমেন্ট থেকে চাইল্ড এলিমেন্টে যায়, এবং বাবলিং পর্যায়, যা চাইল্ড এলিমেন্ট থেকে প্যারেন্ট এলিমেন্টে যায়।
ইভেন্টের বাবলিং
ডিফল্টভাবে, ইভেন্টগুলি ভেতরের সবচেয়ে ছোট এলিমেন্টে ঘটে এবং বাইরে ছড়ায়। এটি বাবলিং নামে পরিচিত।
উদাহরণ: বাবলিং উদাহরণ
1<div id="parentDiv">
2 <button id="myButton">Click me</button>
3</div> 1const parent = document.getElementById('parentDiv');
2const button = document.getElementById('myButton');
3
4parent.addEventListener('click', () => {
5 console.log('Parent element was clicked');
6});
7
8button.addEventListener('click', () => {
9 console.log('Button was clicked');
10});- এই উদাহরণে, যখন আপনি একটি বোতামে ক্লিক করেন, বোতামের ইভেন্ট প্রথম ঘটে, তারপর প্যারেন্ট এলিমেন্টের ইভেন্ট হয়।
ইভেন্ট ক্যাপচারিং
addEventListener()-এর তৃতীয় আর্গুমেন্ট হিসাবে true উল্লেখ করে, আপনি ক্যাপচারিং পর্যায়ে ইভেন্ট পরিচালনা করতে পারেন।
1parent.addEventListener('click', () => {
2 console.log('Capturing: Parent element was clicked');
3}, true);- এই কোডটি capturing পর্বে parent উপাদানের ক্লিক ইভেন্ট পরিচালনা করে এবং কনসোলে একটি বার্তা দেখায়।
stopPropagation() দিয়ে প্রবাহ প্রতিরোধ করা
আপনি ইভেন্টগুলিকে প্রচার থেকে থামাতে event.stopPropagation() ব্যবহার করতে পারেন।
1button.addEventListener('click', (event) => {
2 event.stopPropagation(); // Stop the event propagation
3 console.log('Button was clicked (no propagation)');
4});- এই কোডটি বোতাম ক্লিক হলে ইভেন্ট propagate হওয়া বন্ধ করে এবং কনসোলে একটি বার্তা দেখায়।
ইভেন্ট সরানো
আপনি removeEventListener() ব্যবহার করে ইভেন্ট লিসেনারগুলি সরাতে পারেন। ইভেন্ট লিসেনার সরানোর জন্য, আপনাকে অবশ্যই addEventListener()-এ নির্দিষ্ট ফাংশনের রেফারেন্স থাকতে হবে।
1function handleClick() {
2 console.log('Clicked');
3}
4
5const button = document.getElementById('myButton');
6button.addEventListener('click', handleClick);
7button.removeEventListener('click', handleClick); // Remove the event listener
- এই কোডটি বোতাম থেকে ক্লিক ইভেন্ট শ্রোতা মুছে দেয়, ফলে ক্লিক করলে আর কোনো প্রতিক্রিয়া হবে না।
কাস্টম ইভেন্টসমূহ
জাভাস্ক্রিপ্টে, আপনি স্ট্যান্ডার্ড ইভেন্টগুলির পাশাপাশি কাস্টম ইভেন্ট তৈরি এবং ট্রিগার করতে পারেন। CustomEvent কনস্ট্রাক্টর ব্যবহার করুন।
1document.addEventListener('myCustomEvent', (event) => {
2 console.log(event.detail.message); // Displays "Hello!"
3});
4
5const event = new CustomEvent('myCustomEvent', {
6 detail: {
7 message: 'Hello!'
8 }
9});
10document.dispatchEvent(event);- এই কোডটি একটি কাস্টম ইভেন্ট
myCustomEventতৈরি ও প্রকাশ করে এবং এর বিস্তারিত কনসোলে দেখায়।
সারসংক্ষেপ
ওয়েব অ্যাপ্লিকেশনের ইন্টারঅ্যাক্টিভিটি বাড়াতে ইভেন্ট হ্যান্ডলিং একটি অপরিহার্য উপাদান। ইভেন্ট হ্যান্ডলিং-এর উপাদানগুলো ব্যবহার করে আপনি আরও নমনীয় ও উন্নত ব্যবহারকারীর অভিজ্ঞতা প্রদান করতে পারেন।
- ইভেন্ট লিসেনার: একটি উপাদানের উপর ইভেন্ট হ্যান্ডলার সেট করতে
addEventListener()ব্যবহার করুন। - ইভেন্ট অবজেক্ট: যখন একটি ইভেন্ট ঘটে, তখন একটি ইভেন্ট অবজেক্ট পাস হয় যা বিশদ বিবরণ পেতে ব্যবহার করা যেতে পারে।
- ইভেন্ট প্রচার: ইভেন্ট দুটি পর্যায়ে প্রচারিত হয়: বাবলিং এবং ক্যাপচারিং।
- ফর্ম ইভেন্ট এবং কাস্টম ইভেন্ট: আপনি ফর্ম জমা দেওয়ার পাশাপাশি নিজের কাস্টম ইভেন্ট পরিচালনা করতে পারেন।
আপনি আমাদের ইউটিউব চ্যানেলে ভিজ্যুয়াল স্টুডিও কোড ব্যবহার করে উপরের নিবন্ধটি অনুসরণ করতে পারেন। দয়া করে ইউটিউব চ্যানেলটিও দেখুন।