Paghawak ng Kaganapan sa JavaScript
Ipinaliwanag ng artikulong ito ang paghahawak ng kaganapan sa JavaScript.
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>Paghawak ng Kaganapan sa JavaScript
Ang paghahawak ng kaganapan sa JavaScript ay isang mekanismo upang isagawa ang mga partikular na aksyon bilang tugon sa mga operasyon ng gumagamit (tulad ng mga pag-click at pagpapasok sa keyboard) o mga aksyon ng browser. Sa pamamagitan ng pag-set up ng mga tagapakinig ng kaganapan, makakalikha ka ng mga dynamic at interaktibong web page.
Pangunahing Kaalaman sa mga Kaganapan
Ang mga kaganapan ay nangyayari bilang tugon sa mga operasyon ng gumagamit at sa mga aksyon ng browser. Kapag nangyari ang isang kaganapan, ang kaukulang tagapagpaganap ng kaganapan (function) ay isinasagawa. Halimbawa, mayroong mga kaganapan tulad ng mga sumusunod:.
- Pag-click (
click) - Input ng Keyboard (
keydown,keyup) - Paggalaw ng Mouse (
mousemove,mouseover) - Pagpapasa ng Form (
submit) - Pagkumpleto ng Pag-load ng Pahina (
DOMContentLoaded) - Pag-scroll (
scroll)
Pagdaragdag ng mga Tagapakinig ng Kaganapan
Ang mga tagapakinig ng kaganapan ay itinatakda gamit ang paraan na addEventListener(). Ang paraang ito ay tumatawag sa isang partikular na function kapag nangyari ang itinakdang kaganapan.
Pangunahing Syntax ng addEventListener()
1element.addEventListener(event, handler);elementay ang HTML element na nagmo-monitor sa event.eventay ang pangalan ng event (halimbawa,click).handlerang function na isinasagawa kapag nangyari ang event.
Bagay ng Kaganapan
Kapag nangyayari ang isang event, ang JavaScript ay nagpapadala ng isang event object na naglalaman ng mga detalye ng event papunta sa event handler. Ang object na ito ay naglalaman ng impormasyon tulad ng kung aling elemento ang nagdulot ng event at kung anong key ang pinindot.
Halimbawa: Paggamit ng Event Object
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});- Gamit ng code na ito ang event object upang ipakita ang detalyadong impormasyon at ang na-click na elemento sa console kapag pinindot ang button.
Karaniwang Mga Event
Click Event
Ang click event ay nangyayari kapag nag-click ang user sa isang elemento.
1element.addEventListener('click', () => {
2 console.log('Clicked');
3});- Ang code na ito ay nagpapakita ng mensahe sa console kapag na-click ang elemento.
Mga Event sa Keyboard
Ang mga keydown at keyup na event ay nangyayari kapag pinindot o binitiwan ng user ang isang key. Maaari mong gamitin ang event.key para makita kung aling key ang pinindot.
1document.addEventListener('keydown', (event) => {
2 console.log(`Key pressed: ${event.key}`);
3});- Ang code na ito ay nagpapakita ng pangalan ng key sa console kapag may pinindot na susi ang gumagamit.
Mga Event sa Mouse
Ang mga mousemove at mouseover na event ay nangyayari kapag gumagalaw ang mouse o nag-hover.
1document.addEventListener('mousemove', (event) => {
2 console.log(`Mouse position: X=${event.clientX}, Y=${event.clientY}`);
3});- Ang code na ito ay nagpapakita ng posisyon (X at Y coordinates) sa console sa tuwing gumagalaw ang mouse.
Mga Event sa Form
Kasama sa mga event na may kaugnayan sa form ang submit at input. Ang submit na event ay nangyayari kapag isinumite ang isang form at karaniwang nagdudulot ng page reload, ngunit kadalasang ginagamit ang event.preventDefault() upang maiwasan ito.
Halimbawa: Pag-iwas sa page reload sa pagsusumite ng form
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});- Pinipigilan ng code na ito ang muling pag-load ng page kapag napasa ang form at nagpapakita ng mensahe sa console bilang kapalit.
Pagkalat ng Event (Bubbling at Capturing)
Ang mga event ay kumakalat sa dalawang yugto: ang capturing phase, kung saan naglalakbay mula sa parent elements papunta sa child elements, at ang bubbling phase, kung saan naglalakbay mula sa child elements papunta sa parent elements.
Event Bubbling
Sa default, ang mga event ay nangyayari sa pinakaloob na elemento at kumakalat papalabas. Ito ay tinatawag na bubbling.
Halimbawa: Halimbawa ng Bubbling
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});- Sa halimbawang ito, kapag nag-click ka sa isang button, nauuna ang event ng button, kasunod ang event ng parent element.
Event Capturing
Sa paglagay ng true bilang ikatlong argumento sa addEventListener(), maaari mong hawakan ang mga event sa capturing phase.
1parent.addEventListener('click', () => {
2 console.log('Capturing: Parent element was clicked');
3}, true);- Ipinoproseso ng code na ito ang click event ng parent element sa capturing phase at nagpapakita ng mensahe sa console.
Pag-iwas sa Pagkalat gamit ang stopPropagation()
Maaari mong pigilan ang mga event na mag-propagate gamit ang event.stopPropagation().
1button.addEventListener('click', (event) => {
2 event.stopPropagation(); // Stop the event propagation
3 console.log('Button was clicked (no propagation)');
4});- Pinipigilan ng code na ito ang pagkalat ng event kapag pinindot ang button at nagpapakita ng mensahe sa console.
Pag-aalis ng Mga Event
Maaari mong alisin ang mga event listener gamit ang removeEventListener(). Upang alisin ang isang event listener, kailangan mo ng reference sa function na tinukoy sa 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
- Inaalis ng code na ito ang click event listener mula sa button kaya hindi na ito mapoproseso kapag na-click.
Mga Custom na Event
Sa JavaScript, maaari kang lumikha at mag-trigger ng mga custom na event bukod pa sa mga standard na event. Gamitin ang CustomEvent constructor.
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);- Gumagawa at nagpapadala ang code na ito ng custom event na
myCustomEvent, at ipinapakita ang mga detalye nito sa console.
Buod
Ang event handling ay mahalagang bahagi sa pagpapahusay ng interaktibidad ng mga web application. Sa paggamit ng mga bahagi ng event handling, makakapagbigay ka ng mas flexible at advanced na karanasan para sa mga gumagamit.
- Event Listener: Gamitin ang
addEventListener()upang mag-set ng event handler sa isang elemento. - Event Object: Kapag naganap ang isang event, ipinapasa ang event object na maaaring gamitin upang makakuha ng detalyadong impormasyon.
- Event Propagation: Ang mga event ay nagpo-propagate sa dalawang yugto: bubbling at capturing.
- Form Events and Custom Events: Maaari mong i-handle ang mga form submission at ang sarili mong mga custom na event.
Maaari mong sundan ang artikulo sa itaas gamit ang Visual Studio Code sa aming YouTube channel. Paki-check din ang aming YouTube channel.