\nJavaScript’teki olay kabarc\u0131klanmas\u0131 (bubbling) ve yakalama (capturing) mekanizmalar\u0131, web geli\u015ftiricilerin DOM olaylar\u0131n\u0131 nas\u0131l y\u00f6netti\u011fini k\u00f6kten etkiler. Bu teknik makale, bu temel kavramlar\u0131 ba\u015ftan sona a\u00e7\u0131kl\u0131yor, ger\u00e7ek d\u00fcnya \u00f6rnekleri ve detayl\u0131 kodlarla \u00f6\u011frenmenizi sa\u011fl\u0131yor. Etkin olay y\u00f6netimi ve kullan\u0131c\u0131 deneyimi i\u00e7in kritik bilgiler burada! Modern web uygulamalar\u0131nda kar\u015f\u0131la\u015f\u0131lan performans sorunlar\u0131n\u0131 a\u015fmak ve etkile\u015fimli aray\u00fczler olu\u015fturmak i\u00e7in bu mekanizmalar\u0131n derinlemesine anla\u015f\u0131lmas\u0131 vazge\u00e7ilmezdir. Peki, bu kavramlar tam olarak ne anlama geliyor ve projelerinizde nas\u0131l etkin bir \u015fekilde kullanabilirsiniz?\n<\/p>\n
\nWeb sayfalar\u0131, kullan\u0131c\u0131 etkile\u015fimleriyle canlanan dinamik yap\u0131lar sunar. Bir d\u00fc\u011fmeye t\u0131klamak, bir metin alan\u0131na yaz\u0131 yazmak, bir fareyi bir elementin \u00fczerine getirmek veya bir sayfay\u0131 kayd\u0131rmak gibi her eylem, JavaScript’te bir “olay” (event) olarak ele al\u0131n\u0131r. Bu olaylar, taray\u0131c\u0131 taraf\u0131ndan alg\u0131lan\u0131r ve belirli bir s\u0131rayla i\u015flenir. Ancak karma\u015f\u0131k web aray\u00fczlerinde, i\u00e7 i\u00e7e ge\u00e7mi\u015f bir\u00e7ok HTML elementi bulunur ve kullan\u0131c\u0131 bir elemente t\u0131klad\u0131\u011f\u0131nda asl\u0131nda birden fazla elementin de bu olaya maruz kalma ihtimali vard\u0131r. \u0130\u015fte tam da bu noktada, JavaScript’in olay kabarc\u0131klanmas\u0131 ve yakalama mekanizmalar\u0131 devreye girer. Bu mekanizmalar, olay\u0131n hangi s\u0131rayla ve hangi elementler \u00fczerinde tetiklenece\u011fini belirleyerek olay y\u00f6netimini standardize eder.\n<\/p>\n
\nBu kavramlar, sadece taray\u0131c\u0131n\u0131n olaylar\u0131 nas\u0131l i\u015fledi\u011fini anlamakla kalmaz, ayn\u0131 zamanda daha performansl\u0131, esnek ve s\u00fcrd\u00fcr\u00fclebilir web uygulamalar\u0131 geli\u015ftirmenize de olanak tan\u0131r. \u00d6zellikle dinamik olarak y\u00fcklenen i\u00e7eriklerle \u00e7al\u0131\u015f\u0131rken veya \u00e7ok say\u0131da benzer etkile\u015fimli \u00f6\u011feye sahip bir liste olu\u015ftururken, bu mekanizmalar\u0131n do\u011fru kullan\u0131lmas\u0131 b\u00fcy\u00fck fark yaratabilir. \u00d6rne\u011fin, bir liste eleman\u0131n\u0131n i\u00e7ine yerle\u015ftirilmi\u015f bir d\u00fc\u011fmeye t\u0131kland\u0131\u011f\u0131nda, hem d\u00fc\u011fmenin hem de liste eleman\u0131n\u0131n bir olay\u0131 tetiklemesi beklenebilir. Bu durumda hangi olay\u0131n \u00f6nce tetiklenece\u011fi veya hangi olay\u0131n di\u011ferini etkileyece\u011fi gibi sorular, kabarc\u0131klanma ve yakalama ile yan\u0131t bulur.\n<\/p>\n
\nOlay d\u00f6ng\u00fcs\u00fc veya olay ak\u0131\u015f\u0131 (Event Flow), bir olay\u0131n DOM a\u011fac\u0131 boyunca yay\u0131lma s\u00fcrecini ifade eder. Bu s\u00fcre\u00e7 \u00fc\u00e7 a\u015famadan olu\u015fur:<\/p>\n
window<\/code> veya document<\/code>) ba\u015flayarak, olay\u0131n ger\u00e7ekte ger\u00e7ekle\u015fti\u011fi hedef elemente do\u011fru a\u015fa\u011f\u0131ya do\u011fru yay\u0131l\u0131r. Bu a\u015famada, olay\u0131n hedef elemente ula\u015fmadan \u00f6nce \u00fcst elementlerde yakalanma f\u0131rsat\u0131 vard\u0131r.<\/li>\n- Hedef A\u015famas\u0131 (Target Phase):<\/b> Olay\u0131n ger\u00e7ekte ger\u00e7ekle\u015fti\u011fi elementtir. Bu element, olay\u0131 do\u011frudan al\u0131r.<\/li>\n
- Kabarc\u0131klanma A\u015famas\u0131 (Bubbling Phase):<\/b> Olay, hedef elementten ba\u015flayarak DOM a\u011fac\u0131n\u0131n en d\u0131\u015ftaki elementine do\u011fru yukar\u0131ya do\u011fru yay\u0131l\u0131r. Bu a\u015famada, olay\u0131n hedef elementten sonra \u00fcst elementlerde yakalanma f\u0131rsat\u0131 vard\u0131r.<\/li>\n<\/ol>\n
\nBu \u00fc\u00e7 a\u015fama, bir olay\u0131n ya\u015fam d\u00f6ng\u00fcs\u00fcn\u00fc olu\u015fturur ve geli\u015ftiricilere olay\u0131n herhangi bir noktas\u0131nda m\u00fcdahale etme olana\u011f\u0131 tan\u0131r. Bu mekanizmalar\u0131 anlamak, hem taray\u0131c\u0131n\u0131n nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131na dair derinlemesine bir bak\u0131\u015f a\u00e7\u0131s\u0131 sa\u011flar hem de olay dinleyicilerini daha verimli bir \u015fekilde y\u00f6netme becerisi kazand\u0131r\u0131r. Bu sayede, gereksiz olay dinleyicilerinin olu\u015fturulmas\u0131n\u0131n \u00f6n\u00fcne ge\u00e7ilerek bellek s\u0131z\u0131nt\u0131lar\u0131 engellenebilir ve uygulaman\u0131n genel performans\u0131 art\u0131r\u0131labilir. K\u0131sacas\u0131, etkin olay y\u00f6netimi, modern web geli\u015ftirmenin temel ta\u015flar\u0131ndan biridir ve kabarc\u0131klanma ile yakalama kavramlar\u0131 bu yap\u0131n\u0131n ana unsurlar\u0131d\u0131r.\n<\/p>\n
DOM Olay Ak\u0131\u015f\u0131: Kabarc\u0131klanma ve Yakalama Mekanizmalar\u0131n\u0131n Temelleri Nelerdir?<\/h2>\n
\nWeb sayfalar\u0131nda bir olay meydana geldi\u011finde, bu olay basit\u00e7e tek bir elementle s\u0131n\u0131rl\u0131 kalmaz. DOM (Document Object Model) hiyerar\u015fisi nedeniyle, i\u00e7 i\u00e7e ge\u00e7mi\u015f elementler aras\u0131nda bir etkile\u015fim zinciri olu\u015fur. Bu zincir, olay\u0131n DOM a\u011fac\u0131nda nas\u0131l yay\u0131ld\u0131\u011f\u0131n\u0131 belirleyen iki temel mekanizma olan olay yakalama (capturing) ve olay kabarc\u0131klanmas\u0131 (bubbling) ile a\u00e7\u0131klan\u0131r. Bu iki a\u015fama, olay ak\u0131\u015f\u0131n\u0131n ayr\u0131lmaz bir par\u00e7as\u0131d\u0131r ve bir olay\u0131n tetiklendi\u011fi andan itibaren taray\u0131c\u0131 taraf\u0131ndan ad\u0131m ad\u0131m i\u015flenir.\n<\/p>\n
Olay Yakalama (Event Capturing) Nedir ve Nas\u0131l \u00c7al\u0131\u015f\u0131r?<\/h3>\n
\nOlay yakalama, bir olay\u0131n DOM a\u011fac\u0131n\u0131n en k\u00f6k elementinden (document<\/code> veya window<\/code>) ba\u015flayarak, olay\u0131n tetiklendi\u011fi hedef elemente do\u011fru a\u015fa\u011f\u0131ya do\u011fru yay\u0131lma s\u00fcrecidir. Bu a\u015fama, olay\u0131n hedef elemente ula\u015fmadan \u00f6nce ebeveyn elementler taraf\u0131ndan “yakalanmas\u0131na” olanak tan\u0131r. Yani, bir elemana t\u0131klama olay\u0131 meydana geldi\u011finde, taray\u0131c\u0131 ilk olarak window<\/code>‘dan ba\u015flar, ard\u0131ndan document<\/code>, <\/code>, <\/code> ve di\u011fer ebeveyn elementler boyunca a\u015fa\u011f\u0131ya do\u011fru ilerler, ta ki as\u0131l hedef elemente ula\u015fana kadar.\n<\/p>\n\nBu a\u015famada bir olay\u0131 dinlemek i\u00e7in addEventListener()<\/code> metodunun \u00fc\u00e7\u00fcnc\u00fc parametresi olarak true<\/code> de\u011ferini kullan\u0131r\u0131z. Varsay\u0131lan olarak bu de\u011fer false<\/code>‘tur ve kabarc\u0131klanma a\u015famas\u0131nda olaylar\u0131 dinler. Ancak true<\/code> olarak ayarland\u0131\u011f\u0131nda, olay yakalama a\u015famas\u0131nda devreye girer. \u00d6rne\u011fin, bir div<\/code> elementinin i\u00e7indeki bir p<\/code> elementine t\u0131kland\u0131\u011f\u0131nda, yakalama a\u015famas\u0131nda ilk olarak div<\/code> elementi olay\u0131 yakalayabilir. Bu mekanizma, \u00f6zellikle belirli bir alandaki t\u00fcm \u00e7ocuk elementlerdeki olaylar\u0131 y\u00f6netmek istedi\u011finiz durumlarda faydal\u0131d\u0131r, \u00f6rne\u011fin bir formdaki t\u00fcm input elementlerinin giri\u015fini izlemek gibi.\n<\/p>\n\n\n \n \u00c7ocuk Paragraf\n <\/p>\n<\/div>\n\n