DOM’da Kabarc\u0131klanma (Bubbling) Nedir?<\/p>\n
Merhaba! Ben Fatih Soysal ve bug\u00fcn size web geli\u015ftirmenin temel kavramlar\u0131ndan biri olan DOM’da olay kabarc\u0131klanmas\u0131 (event bubbling) olay\u0131n\u0131 detayl\u0131 bir \u015fekilde a\u00e7\u0131klayaca\u011f\u0131m. \u00d6ncelikle \u015funu belirteyim ki, bu olay\u0131 anlamak, JavaScript ile etkile\u015fimli web uygulamalar\u0131 geli\u015ftirmek i\u00e7in olduk\u00e7a \u00f6nemlidir. Bu kavram\u0131 tam olarak kavrad\u0131\u011f\u0131n\u0131zda, kodlar\u0131n\u0131z\u0131n daha temiz, anla\u015f\u0131l\u0131r ve verimli \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flayabilirsiniz. <\/p>\n
Peki, DOM’da kabarc\u0131klanma tam olarak nedir? Basit\u00e7e ifade etmek gerekirse, bir DOM \u00f6\u011fesinde tetiklenen bir olay, o \u00f6\u011fenin t\u00fcm ata \u00f6\u011felerine do\u011fru “kabarc\u0131klan\u0131r”. \u00d6rne\u011fin, bir d\u00fc\u011fmeye t\u0131klad\u0131\u011f\u0131n\u0131zda ( \u0130\u015fte kabarc\u0131klanman\u0131n ad\u0131m ad\u0131m nas\u0131l i\u015fledi\u011fine dair bir \u00f6rnek: <\/p>\n Bu \u00f6rnekte, hem d\u00fc\u011fmeye hem de kapsay\u0131c\u0131ya bir t\u0131klama olay dinleyicisi ekledik. D\u00fc\u011fmeye t\u0131klad\u0131\u011f\u0131n\u0131zda, \u00f6ncelikle “D\u00fc\u011fmeye t\u0131kland\u0131!” mesaj\u0131 konsolda g\u00f6r\u00fcnecektir. Ard\u0131ndan, olay kabarc\u0131klanarak yukar\u0131 do\u011fru yay\u0131l\u0131r ve kapsay\u0131c\u0131ya ula\u015f\u0131r. Sonu\u00e7 olarak, “Kapsay\u0131c\u0131ya t\u0131kland\u0131!” mesaj\u0131 da konsolda g\u00f6r\u00fcn\u00fcr. <\/p>\n Bu, olaylar\u0131n nas\u0131l yukar\u0131 do\u011fru yay\u0131ld\u0131\u011f\u0131n\u0131 g\u00f6steren g\u00fczel bir \u00f6rnektir. Ancak, bu durum her zaman istenen bir davran\u0131\u015f olmayabilir. Baz\u0131 durumlarda, olaylar\u0131n sadece belirli bir \u00f6\u011fede tetiklenmesini isteyebilirsiniz.<\/p>\n Kabarc\u0131klanman\u0131n tam tersine, olay yakalama (event capture) da mevcuttur. Olay yakalamada, olay \u00f6nce en \u00fcstteki ata \u00f6\u011feden ba\u015flayarak en alttaki hedef \u00f6\u011feye do\u011fru ilerler. Bu, olaylar\u0131n hedef \u00f6\u011feye ula\u015fmadan \u00f6nce yakalanmas\u0131n\u0131 sa\u011flar. Genel olarak, olay kabarc\u0131klanmas\u0131, web geli\u015ftirmede olduk\u00e7a yayg\u0131n bir olayd\u0131r ve bir\u00e7ok etkile\u015fimli \u00f6zelli\u011fin temelini olu\u015fturur. Bu olay\u0131 anlamak, daha verimli ve performansl\u0131 web uygulamalar\u0131 geli\u015ftirmenize yard\u0131mc\u0131 olacakt\u0131r. Daha fazla bilgi edinmek i\u00e7in fatihsoysal.com<\/a> adresini ziyaret edebilirsiniz. Ayr\u0131ca, konuyla ilgili daha derinlemesine bilgi edinmek i\u00e7in MDN Web Docs<\/a> kayna\u011f\u0131n\u0131 da inceleyebilirsiniz. <\/p>\n #Etiketler: DOM, olay kabarc\u0131klanmas\u0131, bubbling, event bubbling, JavaScript, web geli\u015ftirme, HTML, programlama, event capture, olay yakalama<\/p>\n <\/body><button><\/code>), \u00f6ncelikle d\u00fc\u011fme \u00fczerindeki t\u0131klama olay\u0131 tetiklenir. Ancak, bu olay yaln\u0131zca d\u00fc\u011fmede kalmaz. D\u00fc\u011fmenin bir par\u00e7as\u0131 oldu\u011fu t\u00fcm \u00fcst \u00f6\u011felere (\u00f6rne\u011fin, <div><\/code>, <body><\/code>, <html><\/code>) do\u011fru yay\u0131l\u0131r. Bu yay\u0131lma s\u00fcrecine “kabarc\u0131klanma” denir.<\/p>\nKabarc\u0131klanman\u0131n \u00c7al\u0131\u015fma Mekanizmas\u0131<\/h2>\n
\n<div id=\"container\">\n <button id=\"myButton\">T\u0131kla<\/button>\n<\/div>\n\n<script>\n const button = document.getElementById('myButton');\n const container = document.getElementById('container');\n\n button.addEventListener('click', function(event) {\n console.log('D\u00fc\u011fmeye t\u0131kland\u0131!');\n });\n\n container.addEventListener('click', function(event) {\n console.log('Kapsay\u0131c\u0131ya t\u0131kland\u0131!');\n });\n<\/script>\n<\/code><\/pre>\nOlay Yakalama (Event Capture)<\/h2>\n
addEventListener<\/code> metodunda \u00fc\u00e7\u00fcnc\u00fc bir parametre olarak true<\/code> de\u011feri vererek olay yakalama etkinle\u015ftirilebilir.<\/p>\n
\n<\/html><\/p>\n","protected":false},"excerpt":{"rendered":"DOM’da Kabarc\u0131klanma (Bubbling) Nedir? Merhaba! Ben Fatih Soysal ve bug\u00fcn size web geli\u015ftirmenin temel kavramlar\u0131ndan biri olan DOM’da…","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-18645","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-genel","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\n