JavaScript'te Olay Yönetimi
Bu makale, JavaScript'te olay yönetimini açıklar.
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>JavaScript'te Olay Yönetimi
JavaScript'te olay yönetimi, kullanıcı işlemlerine (örneğin tıklamalar ve klavye girişleri) veya tarayıcı işlemlerine yanıt olarak belirli eylemleri gerçekleştiren bir mekanizmadır. Olay dinleyicileri kurarak dinamik ve etkileşimli web sayfaları oluşturabilirsiniz.
Olayların Temelleri
Olaylar, kullanıcı işlemlerine ve tarayıcı işlemlerine yanıt olarak gerçekleşir. Bir olay gerçekleştiğinde, ilgili olay işleyicisi (fonksiyon) çalıştırılır. Örneğin, aşağıdaki gibi olaylar vardır:.
- Tıkla (
click) - Klavye Girişi (
keydown,keyup) - Fare Hareketi (
mousemove,mouseover) - Form Gönderimi (
submit) - Sayfa Yüklemesi Tamamlandı (
DOMContentLoaded) - Kaydırma (
scroll)
Olay Dinleyicilerini Ekleme
Olay dinleyicileri, addEventListener() yöntemi kullanılarak kurulur. Bu yöntem, belirtilen olay gerçekleştiğinde belirli bir fonksiyonu çağırır.
addEventListener() Temel Sözdizimi
1element.addEventListener(event, handler);element, olayı izleyen HTML öğesidir.event, olayın adıdır (örneğin,click).handler, olay gerçekleştiğinde çalışan fonksiyondur.
Olay Nesnesi
Bir olay meydana geldiğinde, JavaScript olay detaylarını içeren bir olay nesnesini olay işleyicisine aktarır. Bu nesne, hangi öğenin olayı tetiklediği ve hangi tuşun basıldığı gibi bilgileri içerir.
Örnek: Olay Nesnesini Kullanma
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});- Bu kod, düğme tıklandığında olay nesnesini kullanarak ayrıntılı bilgileri ve tıklanan öğeyi konsolda gösterir.
Tipik Olaylar
Tıklama Olayı
click olayı, kullanıcı bir öğeye tıkladığında meydana gelir.
1element.addEventListener('click', () => {
2 console.log('Clicked');
3});- Bu kod, öğeye tıklandığında konsolda bir mesaj gösterir.
Klavye Olayları
keydown ve keyup olayları, kullanıcı bir tuşa bastığında veya bıraktığında meydana gelir. Hangi tuşa basıldığını görmek için event.key kullanabilirsiniz.
1document.addEventListener('keydown', (event) => {
2 console.log(`Key pressed: ${event.key}`);
3});- Kullanıcı bir tuşa bastığında, bu kod konsolda tuşun adını gösterir.
Fare Olayları
mousemove ve mouseover olayları, fare hareketi ve üzerine gelme sırasında meydana gelir.
1document.addEventListener('mousemove', (event) => {
2 console.log(`Mouse position: X=${event.clientX}, Y=${event.clientY}`);
3});- Bu kod, fare her hareket ettiğinde X ve Y koordinatlarını konsolda gösterir.
Form Olayları
Formla ilgili olaylar arasında submit ve input yer alır. submit olayı, bir form gönderildiğinde meydana gelir ve genellikle sayfanın yeniden yüklenmesine neden olur, ancak bunu önlemek için genellikle event.preventDefault() kullanılır.
Örnek: Form gönderiminde sayfa yeniden yüklenmesini engelleme
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});- Bu kod, form gönderildiğinde sayfanın yeniden yüklenmesini engeller ve bunun yerine konsolda bir mesaj gösterir.
Olay Yayılımı (Kabarcıklanma ve Yakalama)
Olaylar iki aşamada yayılır: üstten alt öğelere doğru ilerleyen yakalama aşaması ve alttan üst öğelere doğru ilerleyen kabarcıklanma aşaması.
Olay Kabarcıklanması
Varsayılan olarak, olaylar en içteki öğede meydana gelir ve dışarı doğru yayılır. Bu duruma kabarcıklanma denir.
Örnek: Kabarcıklanma Örneği
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});- Bu örnekte, bir düğmeye tıkladığınızda önce düğmenin olayı, ardından üst öğenin olayı meydana gelir.
Olay Yakalama
addEventListener() içinde üçüncü argüman olarak true belirterek olayları yakalama aşamasında işleyebilirsiniz.
1parent.addEventListener('click', () => {
2 console.log('Capturing: Parent element was clicked');
3}, true);- Bu kod, üst öğenin tıklama olayını 'capturing' aşamasında işler ve konsolda bir mesaj gösterir.
stopPropagation() ile Yayılımı Önleme
Etkinliklerin yayılmasını event.stopPropagation() kullanarak durdurabilirsiniz.
1button.addEventListener('click', (event) => {
2 event.stopPropagation(); // Stop the event propagation
3 console.log('Button was clicked (no propagation)');
4});- Bu kod, düğmeye tıklandığında olayın yayılmasını engeller ve konsolda bir mesaj gösterir.
Etkinlikleri Kaldırma
removeEventListener() kullanarak olay dinleyicilerini kaldırabilirsiniz. Bir olay dinleyicisini kaldırmak için, addEventListener() içinde belirtilen fonksiyona bir referansınız olması gerekir.
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
- Bu kod, düğmeden tıklama olay dinleyicisini kaldırır, böylece artık tıklandığında işlenmez.
Özel Etkinlikler
JavaScript'te, standart olaylara ek olarak özel olaylar oluşturabilir ve tetikleyebilirsiniz. CustomEvent yapıcısını kullanın.
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);- Bu kod,
myCustomEventadlı özel bir olay oluşturup gönderir ve ayrıntılarını konsolda gösterir.
Özet
Olay yönetimi, web uygulamalarının etkileşimini artırmak için temel bir unsurdur. Olay yönetimi bileşenlerini kullanarak daha esnek ve gelişmiş bir kullanıcı deneyimi sunabilirsiniz.
- Olay Dinleyicisi: Bir öğe üzerinde bir olay işleyici ayarlamak için
addEventListener()kullanın. - Olay Nesnesi: Bir olay gerçekleştiğinde, detaylı bilgi almak için kullanılabilecek bir olay nesnesi iletilir.
- Olay Yayılımı: Olaylar iki aşamada yayılır: kabarcıklanma (bubbling) ve yakalama (capturing).
- Form Olayları ve Özel Olaylar: Form gönderimlerini ve kendi özel olaylarınızı işleyebilirsiniz.
Yukarıdaki makaleyi, YouTube kanalımızda Visual Studio Code'u kullanarak takip edebilirsiniz. Lütfen YouTube kanalını da kontrol edin.