{"id":29505,"date":"2025-09-14T11:00:26","date_gmt":"2025-09-14T08:00:26","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/javascriptte-event-bubbling-ve-capturing-tam-anlayis-icin\/"},"modified":"2025-09-14T11:00:26","modified_gmt":"2025-09-14T08:00:26","slug":"javascriptte-event-bubbling-ve-capturing-tam-anlayis-icin","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/javascriptte-event-bubbling-ve-capturing-tam-anlayis-icin\/","title":{"rendered":"JavaScript&#8217;te Event Bubbling ve Capturing: Tam Anlay\u0131\u015f \u0130\u00e7in"},"content":{"rendered":"<p>JavaScript&#8217;te Event Bubbling ve Capturing: Tam Anlay\u0131\u015f \u0130\u00e7in<\/p>\n<p>Web geli\u015ftirmede etkile\u015fimli deneyimler olu\u015fturmak i\u00e7in JavaScript olaylar\u0131n\u0131 (event) kullanmak olmazsa olmazd\u0131r.  Ancak, birden fazla \u00f6\u011fenin i\u00e7 i\u00e7e ge\u00e7ti\u011fi karma\u015f\u0131k HTML yap\u0131lar\u0131nda, olaylar\u0131n nas\u0131l yay\u0131ld\u0131\u011f\u0131 ve i\u015flendi\u011fi konusunda kafa kar\u0131\u015f\u0131kl\u0131\u011f\u0131 ya\u015fayabilirsiniz. Bu makalede, JavaScript&#8217;teki Event Bubbling (Olay Kabarc\u0131klanmas\u0131) ve Event Capturing (Olay Yakalanmas\u0131) mekanizmalar\u0131n\u0131 ad\u0131m ad\u0131m a\u00e7\u0131klayacak, ger\u00e7ek d\u00fcnya \u00f6rnekleriyle peki\u015ftirecek ve ileri d\u00fczey teknikleri ele alaca\u011f\u0131z.  Bu sayede, olay i\u015flemeyi tam olarak anlay\u0131p, daha verimli ve g\u00fcvenli web uygulamalar\u0131 geli\u015ftirebileceksiniz.<\/p>\n<h2>Event Bubbling ve Capturing Nedir? Temel Kavramlar<\/h2>\n<p>\u00d6ncelikle, olaylar\u0131n HTML DOM a\u011fac\u0131nda nas\u0131l yay\u0131ld\u0131\u011f\u0131n\u0131 anlamak \u00f6nemlidir.  Bir kullan\u0131c\u0131 bir HTML \u00f6\u011fesiyle etkile\u015fimde bulundu\u011funda (\u00f6rne\u011fin, bir d\u00fc\u011fmeye t\u0131klad\u0131\u011f\u0131nda), bir olay tetiklenir.  Bu olay, <i>event bubbling<\/i> ve <i>event capturing<\/i> olmak \u00fczere iki farkl\u0131 \u015fekilde yay\u0131labilir. <\/p>\n<p><b>Event Bubbling (Olay Kabarc\u0131klanmas\u0131):<\/b>  Bu varsay\u0131lan davran\u0131\u015ft\u0131r. Olay, tetiklendi\u011fi \u00f6\u011feden ba\u015flayarak, ata \u00f6\u011felerine do\u011fru yukar\u0131 do\u011fru yay\u0131l\u0131r. \u00d6rne\u011fin, bir d\u00fc\u011fmeye t\u0131kland\u0131\u011f\u0131nda, olay \u00f6nce d\u00fc\u011fmede, sonra d\u00fc\u011fmenin ebeveyni olan div&#8217;de, sonra da div&#8217;in ebeveyni olan body&#8217;de i\u015flenir.  Bu s\u00fcre\u00e7, belge k\u00f6k \u00f6\u011fesine (document) ula\u015fana kadar devam eder.  Bu, sanki olay bir kabarc\u0131k gibi yukar\u0131 do\u011fru patl\u0131yor gibi d\u00fc\u015f\u00fcn\u00fclerek anla\u015f\u0131labilir.<\/p>\n<p><b>Event Capturing (Olay Yakalanmas\u0131):<\/b>  Bu, bubbling&#8217;in tam tersidir. Olay, belge k\u00f6k \u00f6\u011fesinden ba\u015flayarak, hedefe do\u011fru a\u015fa\u011f\u0131 do\u011fru yay\u0131l\u0131r. Yani, \u00f6nce document, sonra body, sonra div ve son olarak da olay\u0131 tetikleyen d\u00fc\u011fme olay\u0131 i\u015fler.  Capturing, bubbling&#8217;den \u00f6nce ger\u00e7ekle\u015fir.  Bu durum, olay\u0131 hedefe ula\u015fmadan \u00f6nce yakalamak ve i\u015flemek istedi\u011finiz senaryolarda kullan\u0131l\u0131r.<\/p>\n<h2>Event Bubbling Nas\u0131l \u00c7al\u0131\u015f\u0131r? Pratik Bir \u00d6rnek<\/h2>\n<p>\u015eimdi, bubbling&#8217;i daha iyi anlamak i\u00e7in pratik bir \u00f6rnek inceleyelim.  A\u015fa\u011f\u0131daki HTML kodunda, bir div i\u00e7inde bir paragraf ve bu paragraf\u0131n i\u00e7inde de bir d\u00fc\u011fme bulunmaktad\u0131r:<\/p>\n<pre><code class=\"language-html\"><div id=\"container\">\n  <p id=\"paragraph\">\n    <button id=\"button\">T\u0131kla<\/button>\n  <\/p>\n<\/div><\/pre>\n<p><\/code><\/p>\n<p>Bu HTML yap\u0131s\u0131na a\u015fa\u011f\u0131daki JavaScript kodunu ekleyelim:<\/p>\n<pre><code class=\"language-javascript\">const container = document.getElementById(&#039;container&#039;);\nconst paragraph = document.getElementById(&#039;paragraph&#039;);\nconst button = document.getElementById(&#039;button&#039;);\n\nbutton.addEventListener(&#039;click&#039;, function(event) {\n  console.log(&#039;D\u00fc\u011fmeye t\u0131kland\u0131!&#039;);\n});\n\nparagraph.addEventListener(&#039;click&#039;, function(event) {\n  console.log(&#039;Paragrafa t\u0131kland\u0131!&#039;);\n});\n\ncontainer.addEventListener(&#039;click&#039;, function(event) {\n  console.log(&#039;Diva t\u0131kland\u0131!&#039;);\n});<\/pre>\n<p><\/code><\/p>\n<p>Bu kodda, her \u00f6\u011feye bir t\u0131klama olay dinleyicisi ekledik.  D\u00fc\u011fmeye t\u0131klad\u0131\u011f\u0131n\u0131zda, konsolda \u00f6nce \"D\u00fc\u011fmeye t\u0131kland\u0131!\", sonra \"Paragrafa t\u0131kland\u0131!\" ve son olarak \"Diva t\u0131kland\u0131!\" mesajlar\u0131n\u0131 g\u00f6receksiniz. Bu, olaylar\u0131n bubbling mekanizmas\u0131yla yukar\u0131 do\u011fru yay\u0131ld\u0131\u011f\u0131n\u0131 g\u00f6sterir.  Olay \u00f6nce en i\u00e7teki \u00f6\u011fede (d\u00fc\u011fme), ard\u0131ndan d\u0131\u015far\u0131daki \u00f6\u011felerde (paragraf, div) tetiklenir.<\/p>\n<h2>Event Capturing Nas\u0131l \u00c7al\u0131\u015f\u0131r? Uygulama \u00d6rne\u011fi<\/h2>\n<p>Event capturing'i etkinle\u015ftirmek i\u00e7in <code>addEventListener<\/code> metoduna \u00fc\u00e7\u00fcnc\u00fc bir parametre eklememiz gerekir. Bu parametre, <code>true<\/code> veya <code>false<\/code> de\u011ferlerini alabilir.  <code>true<\/code> de\u011feri capturing'i etkinle\u015ftirirken, <code>false<\/code> (varsay\u0131lan) bubbling'i etkinle\u015ftirir.  A\u015fa\u011f\u0131daki \u00f6rnekte, capturing kullanarak olay\u0131 yakalayal\u0131m:<\/p>\n<pre><code class=\"language-javascript\">container.addEventListener(&#039;click&#039;, function(event) {\n  console.log(&#039;Capturing: Diva t\u0131kland\u0131!&#039;);\n}, true);<\/pre>\n<p><\/code><\/p>\n<p>\u015eimdi d\u00fc\u011fmeye t\u0131klad\u0131\u011f\u0131m\u0131zda, konsolda \u00f6nce \"Capturing: Diva t\u0131kland\u0131!\", sonra \"Paragrafa t\u0131kland\u0131!\" ve en son olarak \"D\u00fc\u011fmeye t\u0131kland\u0131!\" mesajlar\u0131 g\u00f6r\u00fcnecektir.  Bu \u00f6rnekte, div'deki olay dinleyicisi, bubbling'den \u00f6nce, capturing a\u015famas\u0131nda tetiklendi.  Bu, olay\u0131 daha \u00fcst d\u00fczey bir \u00f6\u011fede yakalamak ve i\u015flemek i\u00e7in kullan\u0131\u015fl\u0131 olabilir.<\/p>\n<h2>Event Bubbling ve Capturing'i Birlikte Kullanmak<\/h2>\n<p>Bir uygulamada hem bubbling hem de capturing'i kullanmak m\u00fcmk\u00fcnd\u00fcr. \u00d6rne\u011fin, \u00fcst d\u00fczey bir \u00f6\u011fede bir olay\u0131 yakalamak ve daha sonra bubbling ile alt \u00f6\u011felerde i\u015flemek isteyebilirsiniz. Bu yakla\u015f\u0131m, olaylar\u0131n i\u015flenmesini daha iyi kontrol etmenizi sa\u011flar.  Dikkat edilmesi gereken nokta, capturing'in bubbling'den \u00f6nce ger\u00e7ekle\u015fmesidir.  Bu nedenle, \u00f6ncelik s\u0131ras\u0131 \u00f6nemlidir. <\/p>\n<p>\u00d6rne\u011fin, \u00fcst seviye bir div'de bir t\u0131klama olay\u0131n\u0131 yakalamak ve daha sonra bu t\u0131klaman\u0131n hangi alt \u00f6\u011fede ger\u00e7ekle\u015fti\u011fini belirlemek i\u00e7in a\u015fa\u011f\u0131daki kodu kullanabilirsiniz:<\/p>\n<pre><code class=\"language-javascript\">container.addEventListener(&#039;click&#039;, function(event) {\n  console.log(&#039;Capturing: Global click event&#039;);\n  console.log(&#039;T\u0131klama hedefi:&#039;, event.target);\n}, true);\n\nparagraph.addEventListener(&#039;click&#039;, function(event) {\n  console.log(&#039;Bubbling: Paragrafa t\u0131kland\u0131!&#039;);\n});\n\nbutton.addEventListener(&#039;click&#039;, function(event) {\n  console.log(&#039;Bubbling: D\u00fc\u011fmeye t\u0131kland\u0131!&#039;);\n});<\/pre>\n<p><\/code><\/p>\n<h2>Ger\u00e7ek D\u00fcnya Senaryolar\u0131 ve Vaka Analizleri<\/h2>\n<p>Event bubbling ve capturing, bir\u00e7ok ger\u00e7ek d\u00fcnya senaryosunda kullan\u0131l\u0131r. \u00d6rne\u011fin, bir modali kapatmak i\u00e7in modal\u0131n d\u0131\u015f\u0131na t\u0131kland\u0131\u011f\u0131nda, bubbling kullan\u0131larak modal\u0131n \u00fcst \u00f6\u011fesinde bir olay dinleyicisi yerle\u015ftirilir ve t\u0131klaman\u0131n modal\u0131n d\u0131\u015f\u0131nda ger\u00e7ekle\u015fip ger\u00e7ekle\u015fmedi\u011fi kontrol edilir.  Bu durumda, bubbling, modal'\u0131n kapanmas\u0131 i\u00e7in pratik bir y\u00f6ntem sa\u011flar.  Yine bir di\u011fer \u00f6rnek, bir formdaki submit olay\u0131n\u0131 yakalamak olabilir.  Capturing, formun submit edilmesini engellemek veya ek i\u015flemler yapmak i\u00e7in kullan\u0131labilir. Bu senaryolarda bubbling ve capturing'i do\u011fru kullanmak, uygulaman\u0131z\u0131n verimlili\u011fini ve g\u00fcvenilirli\u011fini art\u0131r\u0131r. <\/p>\n<p>Bir di\u011fer senaryo ise, bir a\u011fa\u00e7 yap\u0131s\u0131nda gezinmeyi ve se\u00e7imi y\u00f6netmektir.  Burada, Capturing ile en \u00fcstteki d\u00fc\u011f\u00fcmde bir se\u00e7ilim ba\u015flat\u0131labilir ve Bubbling ile se\u00e7ilen d\u00fc\u011f\u00fcm\u00fcn alt \u00f6\u011felerinin etkilenmesi y\u00f6netilebilir.<\/p>\n<h2>Event Bubbling ve Capturing'in Performans Etkileri<\/h2>\n<p>\u00c7ok say\u0131da olay dinleyicisi kulland\u0131\u011f\u0131n\u0131zda, bubbling ve capturing'in performans \u00fczerinde etkisi olabilir.  \u00d6zellikle derin bir DOM a\u011fac\u0131nda, \u00e7ok say\u0131da olay dinleyicisi, her olay i\u00e7in bir\u00e7ok i\u015fleme ad\u0131m\u0131na yol a\u00e7abilir.  Bu nedenle, olay dinleyicilerini m\u00fcmk\u00fcn oldu\u011funca spesifik hale getirmek \u00f6nemlidir.  Yani, olaylar\u0131 m\u00fcmk\u00fcn oldu\u011funca hedefe yak\u0131n bir \u00f6\u011feye atamak, performans\u0131 art\u0131racakt\u0131r.  Gereksiz olay dinleyicilerinden ka\u00e7\u0131nmak da performans\u0131 iyile\u015ftirmek i\u00e7in \u00e7ok \u00f6nemlidir.  Ayn\u0131 olay\u0131 ayn\u0131 \u00f6\u011fe i\u00e7in birden fazla kez tetiklemek performans kayb\u0131na yol a\u00e7abilir.  Bu durum \u00f6zellikle mobil cihazlarda daha belirgin olacakt\u0131r.  Bu nedenle optimizasyon stratejileri \u00e7ok \u00f6nemlidir.  \u00d6rne\u011fin, baz\u0131 i\u015flevlerin ihtiya\u00e7 duyulmad\u0131\u011f\u0131 durumlarda, olay\u0131n tetiklenmesini \u00f6nlemek iyi bir performans iyile\u015ftirmesi sa\u011flayabilir.<\/p>\n<h2>\u0130leri D\u00fczey Teknikler ve \u0130pu\u00e7lar\u0131<\/h2>\n<p>Event bubbling ve capturing'i daha iyi anlamak i\u00e7in, <code>event.stopPropagation()<\/code> ve <code>event.preventDefault()<\/code> metodlar\u0131n\u0131 \u00f6\u011frenmek \u00f6nemlidir.  <code>event.stopPropagation()<\/code>, olay bubbling'ini durdurur, b\u00f6ylece olay \u00fcst \u00f6\u011felere yay\u0131lmaz.  <code>event.preventDefault()<\/code>, olay\u0131 tetikleyen varsay\u0131lan davran\u0131\u015f\u0131 \u00f6nler.  \u00d6rne\u011fin, bir form submit olay\u0131nda, <code>event.preventDefault()<\/code> kullanarak formun sunucuya g\u00f6nderilmesini engelleyebilirsiniz.  Bu metodlar, olay i\u015fleme s\u00fcrecini daha ince bir \u015fekilde kontrol etmenizi sa\u011flar.  \u00d6rne\u011fin, bir kullan\u0131c\u0131 bir d\u00fc\u011fmeye t\u0131klad\u0131\u011f\u0131nda, hem default davran\u0131\u015f\u0131n\u0131 \u00f6nleyip (link'i takip etmesini engelleyip) hem de kendi \u00f6zel i\u015flemlerinizi ger\u00e7ekle\u015ftirmek i\u00e7in kullanabilirsiniz.<\/p>\n<h2>\u00d6\u011frenme Yol Haritas\u0131<\/h2>\n<p><b>[Yeni Ba\u015flayan]:<\/b>  Event bubbling ve capturing kavramlar\u0131n\u0131 \u00f6\u011frenmek i\u00e7in basit HTML yap\u0131lar\u0131 \u00fczerinde pratik yap\u0131n.  <code>addEventListener<\/code> metodunu kullanarak olay dinleyicileri ekleyin ve konsolda \u00e7\u0131kt\u0131y\u0131 izleyerek olaylar\u0131n yay\u0131l\u0131m\u0131n\u0131 g\u00f6zlemleyin.<\/p>\n<p><b>[Orta]:<\/b>  <code>event.stopPropagation()<\/code> ve <code>event.preventDefault()<\/code> metodlar\u0131n\u0131 kullanarak olay yay\u0131l\u0131m\u0131n\u0131 kontrol etmeyi \u00f6\u011frenin.  Daha karma\u015f\u0131k HTML yap\u0131lar\u0131 \u00fczerinde pratik yaparak, bubbling ve capturing'in bir arada nas\u0131l kullan\u0131laca\u011f\u0131n\u0131 deneyimleyin.  Ger\u00e7ek d\u00fcnya \u00f6rneklerinde kar\u015f\u0131la\u015faca\u011f\u0131n\u0131z senaryolar\u0131 g\u00f6z \u00f6n\u00fcnde bulundurarak kodlama yapmay\u0131 deneyin.<\/p>\n<p><b>[\u0130leri D\u00fczey]:<\/b>  Performans optimizasyonu i\u00e7in olay dinleyicilerini optimize edin ve gereksiz olay dinleyicilerinden ka\u00e7\u0131n\u0131n.  Karma\u015f\u0131k uygulamalarda bubbling ve capturing'i verimli bir \u015fekilde kullan\u0131n.  Custom event'ler olu\u015fturarak, kendi olay mekanizmalar\u0131n\u0131z\u0131 tasarlay\u0131n. Daha fazla bilgi i\u00e7in (https:\/\/fatihsoysal.com) inceleyebilirsiniz.<\/p>\n<h2>Sonu\u00e7<\/h2>\n<p>JavaScript'teki event bubbling ve capturing, etkile\u015fimli web uygulamalar\u0131 geli\u015ftirmek i\u00e7in olmazsa olmaz mekanizmalard\u0131r. Bu makalede ele ald\u0131\u011f\u0131m\u0131z bilgiler ve \u00f6rnekler, olay i\u015flemeyi daha iyi anlaman\u0131za ve daha verimli kod yazman\u0131za yard\u0131mc\u0131 olacakt\u0131r.  Do\u011fru kullan\u0131ld\u0131\u011f\u0131nda, performans\u0131 art\u0131rabilir ve g\u00fcvenlik a\u00e7\u0131klar\u0131n\u0131 azaltabilirler.  Ancak, hatal\u0131 kullan\u0131m, beklenmedik davran\u0131\u015flara ve performans sorunlar\u0131na yol a\u00e7abilir.  Bu nedenle, bu mekanizmalar\u0131 iyi anlamak ve uygulaman\u0131z\u0131n ihtiya\u00e7lar\u0131na uygun \u015fekilde kullanmak \u00f6nemlidir.<\/p>\n<h3>S\u0131k\u00e7a Sorulan Sorular<\/h3>\n<ul>\n<li><b>Event bubbling ve capturing aras\u0131ndaki en temel fark nedir?<\/b>  Bubbling, olaylar\u0131n kaynaktan k\u00f6ke do\u011fru yay\u0131lmas\u0131d\u0131r, capturing ise k\u00f6k\u00fcnden kayna\u011fa do\u011fru yay\u0131lmas\u0131d\u0131r.<\/li>\n<li><b><code>event.stopPropagation()<\/code> metodu ne i\u015fe yarar?<\/b>  Olay\u0131n \u00fcst \u00f6\u011felere yay\u0131lmas\u0131n\u0131 durdurur.<\/li>\n<li><b><code>event.preventDefault()<\/code> metodu ne i\u015fe yarar?<\/b>  Olayla ili\u015fkili varsay\u0131lan davran\u0131\u015f\u0131 engeller (\u00f6rne\u011fin, bir link'in a\u00e7\u0131lmas\u0131n\u0131 engellemek).<\/li>\n<li><b>Hangi durumlarda capturing kullanmak daha mant\u0131kl\u0131d\u0131r?<\/b>  Olay\u0131 hedefe ula\u015fmadan \u00f6nce yakalamak ve i\u015flemek istedi\u011finiz durumlarda (\u00f6rne\u011fin, bir formun g\u00f6nderilmesini engellemek).<\/li>\n<li><b>Performans sorunlar\u0131n\u0131 nas\u0131l \u00f6nleyebilirim?<\/b>  Olay dinleyicilerini spesifik hale getirin, gereksiz olay dinleyicilerinden ka\u00e7\u0131n\u0131n ve <code>event.stopPropagation()<\/code> metodunu gerekti\u011finde kullan\u0131n.<\/li>\n<\/ul>\n<p>Yazar: Fatih Soysal<\/p>\n","protected":false},"excerpt":{"rendered":"JavaScript&#8217;te Event Bubbling ve Capturing: Tam Anlay\u0131\u015f \u0130\u00e7in Web geli\u015ftirmede etkile\u015fimli deneyimler olu\u015fturmak i\u00e7in JavaScript olaylar\u0131n\u0131 (event) kullanmak&hellip;","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[1],"tags":[],"class_list":{"0":"post-29505","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-genel","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v20.5 (Yoast SEO v25.3.1) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>JavaScript&#039;te Event Bubbling ve Capturing: Tam Anlay\u0131\u015f \u0130\u00e7in<\/title>\n<meta name=\"description\" content=\"Web geli\u015ftirmede etkile\u015fimli deneyimler olu\u015fturmak i\u00e7in JavaScript olaylar\u0131n\u0131 (event) kullanmak olmazsa olmazd\u0131r. Ancak, birden fazla \u00f6\u011fenin i\u00e7 i\u00e7e ge\u00e7ti\u011fi karma\u015f\u0131k HTML yap\u0131lar\u0131nda, olaylar\u0131n nas\u0131l yay\u0131ld\u0131\u011f\u0131 ve i\u015flendi\u011fi konusunda kafa kar\u0131\u015f\u0131kl\u0131\u011f\u0131 ya\u015fayabilirsiniz. Bu makalede, JavaScript&#039;teki Event Bubbling (Olay Kabarc\u0131klanmas\u0131) ve Event Capturing (Olay Yakalanmas\u0131) mekanizmalar\u0131n\u0131 ad\u0131m ad\u0131m a\u00e7\u0131klayacak, ger\u00e7ek d\u00fcnya \u00f6rnekleriyle peki\u015ftirecek ve ileri d\u00fczey teknikleri ele alaca\u011f\u0131z. Bu sayede, olay i\u015flemeyi tam olarak anlay\u0131p, daha verimli ve g\u00fcvenli web uygulamalar\u0131 geli\u015ftirebileceksiniz.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/javascriptte-event-bubbling-ve-capturing-tam-anlayis-icin\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JavaScript&#039;te Event Bubbling ve Capturing: Tam Anlay\u0131\u015f \u0130\u00e7in\" \/>\n<meta property=\"og:description\" content=\"Web geli\u015ftirmede etkile\u015fimli deneyimler olu\u015fturmak i\u00e7in JavaScript olaylar\u0131n\u0131 (event) kullanmak olmazsa olmazd\u0131r. Ancak, birden fazla \u00f6\u011fenin i\u00e7 i\u00e7e ge\u00e7ti\u011fi karma\u015f\u0131k HTML yap\u0131lar\u0131nda, olaylar\u0131n nas\u0131l yay\u0131ld\u0131\u011f\u0131 ve i\u015flendi\u011fi konusunda kafa kar\u0131\u015f\u0131kl\u0131\u011f\u0131 ya\u015fayabilirsiniz. Bu makalede, JavaScript&#039;teki Event Bubbling (Olay Kabarc\u0131klanmas\u0131) ve Event Capturing (Olay Yakalanmas\u0131) mekanizmalar\u0131n\u0131 ad\u0131m ad\u0131m a\u00e7\u0131klayacak, ger\u00e7ek d\u00fcnya \u00f6rnekleriyle peki\u015ftirecek ve ileri d\u00fczey teknikleri ele alaca\u011f\u0131z. Bu sayede, olay i\u015flemeyi tam olarak anlay\u0131p, daha verimli ve g\u00fcvenli web uygulamalar\u0131 geli\u015ftirebileceksiniz.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/javascriptte-event-bubbling-ve-capturing-tam-anlayis-icin\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-09-14T08:00:26+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/javascriptte-event-bubbling-ve-capturing-tam-anlayis-icin\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/javascriptte-event-bubbling-ve-capturing-tam-anlayis-icin\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"JavaScript&#8217;te Event Bubbling ve Capturing: Tam Anlay\u0131\u015f \u0130\u00e7in\",\"datePublished\":\"2025-09-14T08:00:26+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/javascriptte-event-bubbling-ve-capturing-tam-anlayis-icin\/\"},\"wordCount\":1447,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/javascriptte-event-bubbling-ve-capturing-tam-anlayis-icin\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/javascriptte-event-bubbling-ve-capturing-tam-anlayis-icin\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/javascriptte-event-bubbling-ve-capturing-tam-anlayis-icin\/\",\"name\":\"JavaScript'te Event Bubbling ve Capturing: Tam Anlay\u0131\u015f \u0130\u00e7in\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-09-14T08:00:26+00:00\",\"description\":\"Web geli\u015ftirmede etkile\u015fimli deneyimler olu\u015fturmak i\u00e7in JavaScript olaylar\u0131n\u0131 (event) kullanmak olmazsa olmazd\u0131r. Ancak, birden fazla \u00f6\u011fenin i\u00e7 i\u00e7e ge\u00e7ti\u011fi karma\u015f\u0131k HTML yap\u0131lar\u0131nda, olaylar\u0131n nas\u0131l yay\u0131ld\u0131\u011f\u0131 ve i\u015flendi\u011fi konusunda kafa kar\u0131\u015f\u0131kl\u0131\u011f\u0131 ya\u015fayabilirsiniz. Bu makalede, JavaScript'teki Event Bubbling (Olay Kabarc\u0131klanmas\u0131) ve Event Capturing (Olay Yakalanmas\u0131) mekanizmalar\u0131n\u0131 ad\u0131m ad\u0131m a\u00e7\u0131klayacak, ger\u00e7ek d\u00fcnya \u00f6rnekleriyle peki\u015ftirecek ve ileri d\u00fczey teknikleri ele alaca\u011f\u0131z. Bu sayede, olay i\u015flemeyi tam olarak anlay\u0131p, daha verimli ve g\u00fcvenli web uygulamalar\u0131 geli\u015ftirebileceksiniz.\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/javascriptte-event-bubbling-ve-capturing-tam-anlayis-icin\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/javascriptte-event-bubbling-ve-capturing-tam-anlayis-icin\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/javascriptte-event-bubbling-ve-capturing-tam-anlayis-icin\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript&#8217;te Event Bubbling ve Capturing: Tam Anlay\u0131\u015f \u0130\u00e7in\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"JavaScript'te Event Bubbling ve Capturing: Tam Anlay\u0131\u015f \u0130\u00e7in","description":"Web geli\u015ftirmede etkile\u015fimli deneyimler olu\u015fturmak i\u00e7in JavaScript olaylar\u0131n\u0131 (event) kullanmak olmazsa olmazd\u0131r. Ancak, birden fazla \u00f6\u011fenin i\u00e7 i\u00e7e ge\u00e7ti\u011fi karma\u015f\u0131k HTML yap\u0131lar\u0131nda, olaylar\u0131n nas\u0131l yay\u0131ld\u0131\u011f\u0131 ve i\u015flendi\u011fi konusunda kafa kar\u0131\u015f\u0131kl\u0131\u011f\u0131 ya\u015fayabilirsiniz. Bu makalede, JavaScript'teki Event Bubbling (Olay Kabarc\u0131klanmas\u0131) ve Event Capturing (Olay Yakalanmas\u0131) mekanizmalar\u0131n\u0131 ad\u0131m ad\u0131m a\u00e7\u0131klayacak, ger\u00e7ek d\u00fcnya \u00f6rnekleriyle peki\u015ftirecek ve ileri d\u00fczey teknikleri ele alaca\u011f\u0131z. Bu sayede, olay i\u015flemeyi tam olarak anlay\u0131p, daha verimli ve g\u00fcvenli web uygulamalar\u0131 geli\u015ftirebileceksiniz.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/javascriptte-event-bubbling-ve-capturing-tam-anlayis-icin\/","og_locale":"tr_TR","og_type":"article","og_title":"JavaScript'te Event Bubbling ve Capturing: Tam Anlay\u0131\u015f \u0130\u00e7in","og_description":"Web geli\u015ftirmede etkile\u015fimli deneyimler olu\u015fturmak i\u00e7in JavaScript olaylar\u0131n\u0131 (event) kullanmak olmazsa olmazd\u0131r. Ancak, birden fazla \u00f6\u011fenin i\u00e7 i\u00e7e ge\u00e7ti\u011fi karma\u015f\u0131k HTML yap\u0131lar\u0131nda, olaylar\u0131n nas\u0131l yay\u0131ld\u0131\u011f\u0131 ve i\u015flendi\u011fi konusunda kafa kar\u0131\u015f\u0131kl\u0131\u011f\u0131 ya\u015fayabilirsiniz. Bu makalede, JavaScript'teki Event Bubbling (Olay Kabarc\u0131klanmas\u0131) ve Event Capturing (Olay Yakalanmas\u0131) mekanizmalar\u0131n\u0131 ad\u0131m ad\u0131m a\u00e7\u0131klayacak, ger\u00e7ek d\u00fcnya \u00f6rnekleriyle peki\u015ftirecek ve ileri d\u00fczey teknikleri ele alaca\u011f\u0131z. Bu sayede, olay i\u015flemeyi tam olarak anlay\u0131p, daha verimli ve g\u00fcvenli web uygulamalar\u0131 geli\u015ftirebileceksiniz.","og_url":"https:\/\/fatihsoysal.com\/blog\/javascriptte-event-bubbling-ve-capturing-tam-anlayis-icin\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-09-14T08:00:26+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"8 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/javascriptte-event-bubbling-ve-capturing-tam-anlayis-icin\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/javascriptte-event-bubbling-ve-capturing-tam-anlayis-icin\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"JavaScript&#8217;te Event Bubbling ve Capturing: Tam Anlay\u0131\u015f \u0130\u00e7in","datePublished":"2025-09-14T08:00:26+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/javascriptte-event-bubbling-ve-capturing-tam-anlayis-icin\/"},"wordCount":1447,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/javascriptte-event-bubbling-ve-capturing-tam-anlayis-icin\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/javascriptte-event-bubbling-ve-capturing-tam-anlayis-icin\/","url":"https:\/\/fatihsoysal.com\/blog\/javascriptte-event-bubbling-ve-capturing-tam-anlayis-icin\/","name":"JavaScript'te Event Bubbling ve Capturing: Tam Anlay\u0131\u015f \u0130\u00e7in","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-09-14T08:00:26+00:00","description":"Web geli\u015ftirmede etkile\u015fimli deneyimler olu\u015fturmak i\u00e7in JavaScript olaylar\u0131n\u0131 (event) kullanmak olmazsa olmazd\u0131r. Ancak, birden fazla \u00f6\u011fenin i\u00e7 i\u00e7e ge\u00e7ti\u011fi karma\u015f\u0131k HTML yap\u0131lar\u0131nda, olaylar\u0131n nas\u0131l yay\u0131ld\u0131\u011f\u0131 ve i\u015flendi\u011fi konusunda kafa kar\u0131\u015f\u0131kl\u0131\u011f\u0131 ya\u015fayabilirsiniz. Bu makalede, JavaScript'teki Event Bubbling (Olay Kabarc\u0131klanmas\u0131) ve Event Capturing (Olay Yakalanmas\u0131) mekanizmalar\u0131n\u0131 ad\u0131m ad\u0131m a\u00e7\u0131klayacak, ger\u00e7ek d\u00fcnya \u00f6rnekleriyle peki\u015ftirecek ve ileri d\u00fczey teknikleri ele alaca\u011f\u0131z. Bu sayede, olay i\u015flemeyi tam olarak anlay\u0131p, daha verimli ve g\u00fcvenli web uygulamalar\u0131 geli\u015ftirebileceksiniz.","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/javascriptte-event-bubbling-ve-capturing-tam-anlayis-icin\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/javascriptte-event-bubbling-ve-capturing-tam-anlayis-icin\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/javascriptte-event-bubbling-ve-capturing-tam-anlayis-icin\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"JavaScript&#8217;te Event Bubbling ve Capturing: Tam Anlay\u0131\u015f \u0130\u00e7in"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/29505","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=29505"}],"version-history":[{"count":0,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/29505\/revisions"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=29505"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=29505"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=29505"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}