Skip to content

Commit 3de5e8d

Browse files
ananya8606ananya8606
authored
Created event.mdx file in challenges folder and updated _meta.json (#70)
* Update dom.mdx * Update dom.mdx * Update faq_js.mdx * Update _meta.json * Create event.mdx
1 parent 7da6078 commit 3de5e8d

2 files changed

Lines changed: 299 additions & 1 deletion

File tree

‎web/src/pages/challenges/_meta.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,5 +4,6 @@
44
"objects": "Objects",
55
"collections": "Collections",
66
"async": "Asynchronous",
7-
"dom": "DOM"
7+
"dom": "DOM",
8+
"event": "Event"
89
}

‎web/src/pages/challenges/event.mdx‎

Lines changed: 297 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,297 @@
1+
### 1. Handling a Click Event to Change Text Content
2+
3+
- In JavaScript, you can add event listeners to elements to respond to various events like mouse clicks, keyboard input, etc.
4+
- The addEventListener method is used to attach an event handler to an HTML element.
5+
6+
```html
7+
<!DOCTYPE html>
8+
<html lang="en">
9+
<head>
10+
<meta charset="UTF-8">
11+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
12+
<title>Click Event Example</title>
13+
</head>
14+
<body>
15+
<button id="myButton">Click me</button>
16+
<p id="myText">Original Text</p>
17+
18+
<script>
19+
const button = document.getElementById('myButton');
20+
const text = document.getElementById('myText');
21+
22+
button.addEventListener('click', () => {
23+
text.textContent = 'Text Changed!';
24+
});
25+
</script>
26+
</body>
27+
</html>
28+
```
29+
30+
When the button is clicked, the text content of the paragraph is changed.
31+
32+
References
33+
34+
https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
35+
36+
---
37+
38+
### 2. Mouse Hover Event to Change Background Color
39+
40+
- The mouseover and mouseout events can be used to change the background color of an element when the mouse is hovered over it.
41+
42+
```html
43+
<!DOCTYPE html>
44+
<html lang="en">
45+
<head>
46+
<meta charset="UTF-8">
47+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
48+
<title>Mouse Hover Example</title>
49+
</head>
50+
<body>
51+
<div id="hoverDiv" style="width: 200px; height: 100px; background-color: lightgrey;">
52+
Hover over me!
53+
</div>
54+
55+
<script>
56+
const div = document.getElementById('hoverDiv');
57+
58+
div.addEventListener('mouseover', () => {
59+
div.style.backgroundColor = 'lightblue';
60+
});
61+
62+
div.addEventListener('mouseout', () => {
63+
div.style.backgroundColor = 'lightgrey';
64+
});
65+
</script>
66+
</body>
67+
</html>
68+
```
69+
70+
When the mouse pointer enters the element, the background color changes to light blue, and when it leaves, it reverts to light grey.
71+
72+
References
73+
74+
https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent
75+
76+
----
77+
78+
### 3. Form Submission Event to Prevent Default Behavior
79+
80+
- The submit event can be used to intercept form submissions, and you can prevent the default behavior using event.preventDefault().
81+
82+
```html
83+
<!DOCTYPE html>
84+
<html lang="en">
85+
<head>
86+
<meta charset="UTF-8">
87+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
88+
<title>Form Submission Example</title>
89+
</head>
90+
<body>
91+
<form id="myForm">
92+
<input type="text" placeholder="Enter text" required />
93+
<button type="submit">Submit</button>
94+
</form>
95+
96+
<script>
97+
const form = document.getElementById('myForm');
98+
99+
form.addEventListener('submit', (event) => {
100+
event.preventDefault();
101+
alert('Form submission intercepted!');
102+
});
103+
</script>
104+
</body>
105+
</html>
106+
```
107+
108+
The form submission is prevented, and an alert is displayed instead.
109+
110+
References
111+
112+
https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault
113+
114+
---
115+
116+
### 4. Keyboard Event to Detect Key Presses
117+
118+
- The keydown and keyup events can be used to detect when a key is pressed or released.
119+
120+
```html
121+
<!DOCTYPE html>
122+
<html lang="en">
123+
<head>
124+
<meta charset="UTF-8">
125+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
126+
<title>Keyboard Event Example</title>
127+
</head>
128+
<body>
129+
<input type="text" id="inputField" placeholder="Type something..." />
130+
131+
<script>
132+
const inputField = document.getElementById('inputField');
133+
134+
inputField.addEventListener('keydown', (event) => {
135+
console.log('Key pressed:', event.key);
136+
});
137+
</script>
138+
</body>
139+
</html>
140+
```
141+
142+
When you type in the input field, the key pressed is logged to the console.
143+
144+
References
145+
146+
https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent
147+
148+
---
149+
150+
### 5. Event Delegation to Handle Events on Multiple Elements
151+
152+
- Event delegation is a technique of using a single event listener to manage events for multiple child elements.
153+
154+
```html
155+
<!DOCTYPE html>
156+
<html lang="en">
157+
<head>
158+
<meta charset="UTF-8">
159+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
160+
<title>Event Delegation Example</title>
161+
</head>
162+
<body>
163+
<ul id="itemList">
164+
<li>Item 1</li>
165+
<li>Item 2</li>
166+
<li>Item 3</li>
167+
</ul>
168+
169+
<script>
170+
const itemList = document.getElementById('itemList');
171+
172+
itemList.addEventListener('click', (event) => {
173+
if (event.target && event.target.nodeName === 'LI') {
174+
console.log('Clicked item:', event.target.textContent);
175+
}
176+
});
177+
</script>
178+
</body>
179+
</html>
180+
```
181+
182+
Clicking on any list item triggers the event listener, logging the item's text.
183+
184+
References
185+
186+
https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#event_delegation
187+
188+
---
189+
190+
### 6. Double Click Event to Toggle Element Visibility
191+
192+
- The dblclick event is used to handle double-click actions.
193+
194+
```html
195+
<!DOCTYPE html>
196+
<html lang="en">
197+
<head>
198+
<meta charset="UTF-8">
199+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
200+
<title>Double Click Event Example</title>
201+
</head>
202+
<body>
203+
<p id="toggleText">Double-click to hide/show this text.</p>
204+
205+
<script>
206+
const text = document.getElementById('toggleText');
207+
208+
text.addEventListener('dblclick', () => {
209+
text.style.display = text.style.display === 'none' ? 'block' : 'none';
210+
});
211+
</script>
212+
</body>
213+
</html>
214+
```
215+
216+
Double-clicking the paragraph toggles its visibility.
217+
218+
References
219+
220+
https://developer.mozilla.org/en-US/docs/Web/API/Element/dblclick_event
221+
222+
---
223+
224+
### 7. Triggering a Custom Event
225+
226+
- You can create and trigger custom events using the CustomEvent constructor.
227+
228+
```html
229+
<!DOCTYPE html>
230+
<html lang="en">
231+
<head>
232+
<meta charset="UTF-8">
233+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
234+
<title>Custom Event Example</title>
235+
</head>
236+
<body>
237+
<button id="triggerButton">Trigger Custom Event</button>
238+
239+
<script>
240+
const button = document.getElementById('triggerButton');
241+
242+
button.addEventListener('myCustomEvent', (event) => {
243+
console.log('Custom event triggered:', event.detail);
244+
});
245+
246+
button.addEventListener('click', () => {
247+
const customEvent = new CustomEvent('myCustomEvent', { detail: 'Some custom data' });
248+
button.dispatchEvent(customEvent);
249+
});
250+
</script>
251+
</body>
252+
</html>
253+
```
254+
255+
Clicking the button triggers a custom event, and the custom data is logged.
256+
257+
References
258+
259+
https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent
260+
261+
---
262+
263+
### 8. Debouncing an Input Event to Improve Performance
264+
265+
- Debouncing limits the rate at which a function is executed.
266+
267+
```html
268+
<!DOCTYPE html>
269+
<html lang="en">
270+
<head>
271+
<meta charset="UTF-8">
272+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
273+
<title>Debouncing Example</title>
274+
</head>
275+
<body>
276+
<input type="text" id="debounceInput" placeholder="Type something..." />
277+
278+
<script>
279+
const input = document.getElementById('debounceInput');
280+
281+
let debounceTimeout;
282+
input.addEventListener('input', () => {
283+
clearTimeout(debounceTimeout);
284+
debounceTimeout = setTimeout(() => {
285+
console.log('Debounced input:', input.value);
286+
}, 300);
287+
});
288+
</script>
289+
</body>
290+
</html>
291+
```
292+
293+
The function is only executed after the user stops typing for 300 milliseconds.
294+
295+
References
296+
297+
https://developer.mozilla.org/en-US/docs/Web/API/setTimeout

0 commit comments

Comments
 (0)