{"id":36838,"date":"2025-12-23T20:40:56","date_gmt":"2025-12-23T17:40:56","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=36838"},"modified":"2025-12-23T20:40:56","modified_gmt":"2025-12-23T17:40:56","slug":"polymerda-olay-yonetimi-bilesenler-arasi-etkilesimi-guclendirmek","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/polymerda-olay-yonetimi-bilesenler-arasi-etkilesimi-guclendirmek\/","title":{"rendered":"Polymer&#8217;da Olay Y\u00f6netimi: Bile\u015fenler Aras\u0131 Etkile\u015fimi G\u00fc\u00e7lendirmek"},"content":{"rendered":"<p><body><\/p>\n<h2>Polymer&#8217;da Olay Y\u00f6netimi: Bile\u015fenler Aras\u0131 Etkile\u015fimi G\u00fc\u00e7lendirmek<\/h2>\n<p>Modern web uygulamalar\u0131, kullan\u0131c\u0131larla dinamik ve interaktif bir deneyim sunma \u00fczerine kuruludur. Bu interaktifli\u011fin temelini ise kullan\u0131c\u0131 eylemlerine (t\u0131klamalar, klavye giri\u015fleri, form g\u00f6nderimleri vb.) ve sistem olaylar\u0131na (veri y\u00fcklenmesi, bile\u015fen durumu de\u011fi\u015fimi) tepki verme yetene\u011fi olu\u015fturur. Web bile\u015fenleri mimarisi, bu etkile\u015fimi mod\u00fcler, yeniden kullan\u0131labilir ve kaps\u00fcllenmi\u015f par\u00e7alar halinde y\u00f6netmeyi hedefler. Polymer, bu web bile\u015fenleri standartlar\u0131n\u0131 uygulayan ve geli\u015ftirmeyi kolayla\u015ft\u0131ran g\u00fc\u00e7l\u00fc bir k\u00fct\u00fcphanedir. Polymer ile geli\u015ftirilen her bile\u015fen, kendi i\u00e7 mant\u0131\u011f\u0131na sahip oldu\u011fu gibi, d\u0131\u015f d\u00fcnya ile de belirli kurallar \u00e7er\u00e7evesinde ileti\u015fim kurmal\u0131d\u0131r. \u0130\u015fte bu noktada olay y\u00f6netimi (event handling) devreye girer.<\/p>\n<p>Bu makale, Polymer ekosisteminde olaylar\u0131n nas\u0131l y\u00f6netildi\u011fini, bile\u015fenler aras\u0131 ileti\u015fimin olaylar arac\u0131l\u0131\u011f\u0131yla nas\u0131l sa\u011fland\u0131\u011f\u0131n\u0131 ve bu s\u00fcre\u00e7te dikkat edilmesi gereken en iyi uygulamalar\u0131 derinlemesine inceleyecektir. Deklaratif ve programatik olay dinleyicilerden \u00f6zel olaylar\u0131n olu\u015fturulmas\u0131na, Shadow DOM ile olaylar\u0131n etkile\u015fiminden performans optimizasyonlar\u0131na kadar geni\u015f bir yelpazede Polymer&#8217;da olay y\u00f6netiminin t\u00fcm y\u00f6nlerini ele alaca\u011f\u0131z. Amac\u0131m\u0131z, geli\u015ftiricilere Polymer tabanl\u0131 uygulamalar\u0131nda sa\u011flam, esnek ve s\u00fcrd\u00fcr\u00fclebilir bir olay y\u00f6netimi stratejisi olu\u015fturmalar\u0131 i\u00e7in kapsaml\u0131 bir rehber sunmakt\u0131r.<\/p>\n<h3>Web Bile\u015fenlerinde Olaylar\u0131n Temel Kavramlar\u0131<\/h3>\n<p>Web bile\u015fenleri, taray\u0131c\u0131da yerle\u015fik olarak gelen DOM (Belge Nesne Modeli) olay mekanizmalar\u0131n\u0131 kullan\u0131r. Ancak, bile\u015fenlerin kaps\u00fcllenmi\u015f yap\u0131s\u0131 ve Shadow DOM kullan\u0131m\u0131, standart olay y\u00f6netimini baz\u0131 \u00f6zel durumlarla zenginle\u015ftirir.<\/p>\n<h4>DOM Olaylar\u0131: Standart Etkile\u015fim Mekanizmalar\u0131<\/h4>\n<p>DOM olaylar\u0131, taray\u0131c\u0131n\u0131n kullan\u0131c\u0131 etkile\u015fimlerine veya belge durum de\u011fi\u015fikliklerine tepki vermek i\u00e7in kulland\u0131\u011f\u0131 temel mekanizmalard\u0131r. <code>click<\/code>, <code>mouseover<\/code>, <code>keydown<\/code>, <code>input<\/code>, <code>submit<\/code>, <code>load<\/code>, <code>error<\/code> gibi olaylar bu kategoriye girer. Bu olaylar, bir \u00f6\u011fe \u00fczerinde ger\u00e7ekle\u015fti\u011finde tetiklenir ve belirli bir s\u0131rayla DOM a\u011fac\u0131nda yay\u0131l\u0131rlar.<\/p>\n<h4>Olay Kabarc\u0131klanmas\u0131 (Bubbling) ve Yakalama (Capturing)<\/h4>\n<p>Bir DOM olay\u0131 tetiklendi\u011finde, olay DOM a\u011fac\u0131nda iki a\u015famal\u0131 bir yolculuk yapar:<\/p>\n<p>1.  <strong>Yakalama (Capturing) A\u015famas\u0131:<\/strong> Olay, <code>window<\/code> objesinden ba\u015flayarak hedef \u00f6\u011feye do\u011fru a\u015fa\u011f\u0131ya iner. Bu a\u015famada, olay\u0131 dinleyen herhangi bir \u00fcst \u00f6\u011fe, olay hedef \u00f6\u011feye ula\u015fmadan \u00f6nce olay\u0131 yakalayabilir.<br \/>\n2.  <strong>Hedef (Target) A\u015famas\u0131:<\/strong> Olay, tetiklendi\u011fi \u00f6\u011feye ula\u015f\u0131r.<br \/>\n3.  <strong>Kabarc\u0131klanma (Bubbling) A\u015famas\u0131:<\/strong> Olay, hedef \u00f6\u011feden ba\u015flayarak <code>document<\/code> ve <code>window<\/code> objelerine do\u011fru yukar\u0131 do\u011fru yay\u0131l\u0131r. Bu, bir alt \u00f6\u011fede ger\u00e7ekle\u015fen bir olay\u0131n, \u00fcst \u00f6\u011feler taraf\u0131ndan da dinlenebilmesini sa\u011flar. \u00d6rne\u011fin, bir d\u00fc\u011fmenin t\u0131klama olay\u0131, d\u00fc\u011fmenin \u00fcst\u00fcndeki <code>div<\/code> veya <code>body<\/code> gibi \u00f6\u011feler taraf\u0131ndan da dinlenebilir.<\/p>\n<p>\u00c7o\u011fu durumda, olay dinleyicileri kabarc\u0131klanma a\u015famas\u0131nda \u00e7al\u0131\u015f\u0131r. Ancak <code>addEventListener<\/code> metodunun \u00fc\u00e7\u00fcnc\u00fc parametresi olan <code>useCapture<\/code> (veya <code>capture<\/code>) se\u00e7ene\u011fini <code>true<\/code> olarak ayarlayarak olay\u0131 yakalama a\u015famas\u0131nda dinlemek de m\u00fcmk\u00fcnd\u00fcr.<\/p>\n<p>Olay ak\u0131\u015f\u0131n\u0131 kontrol etmek i\u00e7in baz\u0131 \u00f6nemli metotlar bulunur:<\/p>\n<p>*   <code>event.stopPropagation()<\/code>: Bu metot, olay\u0131n DOM a\u011fac\u0131nda daha fazla kabarc\u0131klanmas\u0131n\u0131 veya yakalanmas\u0131n\u0131 durdurur. Olay, mevcut \u00f6\u011feden sonraki \u00fcst \u00f6\u011felere yay\u0131lmaz.<br \/>\n*   <code>event.stopImmediatePropagation()<\/code>: Bu metot, <code>stopPropagation()<\/code> ile ayn\u0131 etkiyi g\u00f6sterir ve ek olarak, ayn\u0131 \u00f6\u011fe \u00fczerindeki di\u011fer olay dinleyicilerinin \u00e7al\u0131\u015fmas\u0131n\u0131 da engeller.<\/p>\n<h4>\u00d6zel Olaylar (Custom Events)<\/h4>\n<p>Web bile\u015fenleri mimarisinde, bile\u015fenler genellikle kaps\u00fcllenmi\u015f ve birbirinden ba\u011f\u0131ms\u0131z bir \u015fekilde \u00e7al\u0131\u015f\u0131r. Ancak, bir bile\u015fenin i\u00e7 durumundaki bir de\u011fi\u015fikli\u011fi veya bir kullan\u0131c\u0131 eylemini d\u0131\u015f d\u00fcnyaya (genellikle \u00fcst bile\u015fenlere) bildirmesi gerekti\u011finde standart DOM olaylar\u0131 yeterli olmayabilir. \u0130\u015fte bu noktada \u00f6zel olaylar (Custom Events) devreye girer. \u00d6zel olaylar, geli\u015ftiricilerin kendi tan\u0131mlad\u0131klar\u0131 olaylar\u0131 yay\u0131mlamas\u0131na ve dinlemesine olanak tan\u0131r, b\u00f6ylece bile\u015fenler aras\u0131nda esnek ve g\u00fc\u00e7l\u00fc bir ileti\u015fim kanal\u0131 olu\u015fturulur. Polymer, bu mekanizmay\u0131 etkin bir \u015fekilde kullan\u0131r ve geli\u015ftiricilere bile\u015fenlerini daha mod\u00fcler hale getirme imkan\u0131 sunar.<\/p>\n<h4>Shadow DOM ve Olaylar: <code>composed<\/code> \u00d6zelli\u011fi<\/h4>\n<p>Shadow DOM, web bile\u015fenlerinin stil ve i\u015faretlemesini ana DOM&#8217;dan izole ederek kaps\u00fclleme sa\u011flar. Bu kaps\u00fclleme, olaylar\u0131n Shadow DOM s\u0131n\u0131rlar\u0131n\u0131 nas\u0131l a\u015ft\u0131\u011f\u0131n\u0131 da etkiler. Bir olay Shadow DOM i\u00e7inden tetiklendi\u011finde, varsay\u0131lan olarak Shadow DOM d\u0131\u015f\u0131na kabarc\u0131klanmaz. Ancak, \u00f6zel olaylar olu\u015fturulurken <code>composed: true<\/code> olarak ayarlan\u0131rsa, olay Shadow DOM s\u0131n\u0131rlar\u0131n\u0131 a\u015farak ana DOM&#8217;a kabarc\u0131klanabilir ve burada dinlenebilir. Bu \u00f6zellik, bile\u015fenler aras\u0131 ileti\u015fimin Shadow DOM&#8217;un kaps\u00fclleme avantajlar\u0131ndan \u00f6d\u00fcn vermeden sa\u011flanmas\u0131 i\u00e7in kritik \u00f6neme sahiptir.<\/p>\n<h3>Polymer&#8217;da Deklaratif Olay Dinleyiciler<\/h3>\n<p>Polymer, bile\u015fen \u015fablonlar\u0131 i\u00e7inde olay dinleyicilerini deklaratif bir \u015fekilde tan\u0131mlamay\u0131 sa\u011flayan sezgisel bir yap\u0131 sunar. Bu yakla\u015f\u0131m, HTML i\u00e7inde olay i\u015fleyicilerini do\u011frudan belirtmeye benzer ancak Polymer&#8217;\u0131n veri ba\u011flama ve ya\u015fam d\u00f6ng\u00fcs\u00fc y\u00f6netimiyle entegre \u00e7al\u0131\u015f\u0131r.<\/p>\n<h4>Template \u0130\u00e7inde <code>on-event-name<\/code> Kullan\u0131m\u0131<\/h4>\n<p>Polymer bile\u015fenlerinin \u015fablonlar\u0131nda, standart DOM olaylar\u0131n\u0131 veya Polymer&#8217;a \u00f6zg\u00fc olaylar\u0131 dinlemek i\u00e7in <code>on-event-name<\/code> niteli\u011fi kullan\u0131l\u0131r. Bu nitelik, olay\u0131n tetiklenmesi durumunda bile\u015fenin s\u0131n\u0131f\u0131nda tan\u0131mlanm\u0131\u015f bir metodu \u00e7a\u011f\u0131r\u0131r.<\/p>\n<pre><code class=\"language-html\"><dom-module id=\"my-button-component\">\n  <template>\n    <button on-click=\"handleClick\">Bana T\u0131kla<\/button>\n    <input type=\"text\" on-input=\"handleInput\" placeholder=\"Bir \u015feyler yaz\u0131n\">\n  <\/template>\n  <script>\n    class MyButtonComponent extends PolymerElement {\n      static get is() { return 'my-button-component'; }\n\n      handleClick(event) {\n        console.log('D\u00fc\u011fmeye t\u0131kland\u0131!', event.target.textContent);\n      }\n\n      handleInput(event) {\n        console.log('Giri\u015f de\u011feri:', event.target.value);\n      }\n    }\n    customElements.define(MyButtonComponent.is, MyButtonComponent);\n  <\/script>\n<\/dom-module><\/code><\/pre>\n<p>Yukar\u0131daki \u00f6rnekte, <code><button><\/code> \u00f6\u011fesine <code>on-click=\"handleClick\"<\/code> niteli\u011fi eklenmi\u015ftir. Bu, d\u00fc\u011fmeye t\u0131kland\u0131\u011f\u0131nda <code>MyButtonComponent<\/code> s\u0131n\u0131f\u0131ndaki <code>handleClick<\/code> metodunun \u00e7a\u011fr\u0131lmas\u0131n\u0131 sa\u011flar. Benzer \u015fekilde, <code><input><\/code> \u00f6\u011fesindeki <code>on-input=\"handleInput\"<\/code> niteli\u011fi, giri\u015f alan\u0131na her yaz\u0131 yaz\u0131ld\u0131\u011f\u0131nda <code>handleInput<\/code> metodunu tetikler. Polymer, olay\u0131 (<code>event<\/code> objesi) otomatik olarak bu metotlara ilk arg\u00fcman olarak iletir.<\/p>\n<h4>Polymer&#8217;a \u00d6zg\u00fc Olaylar: <code>tap<\/code>, <code>down<\/code>, <code>up<\/code><\/h4>\n<p>Polymer, dokunmatik cihazlar ve fare etkile\u015fimlerini birle\u015ftiren, platformlar aras\u0131 tutarl\u0131 bir deneyim sa\u011flamak amac\u0131yla baz\u0131 soyutlanm\u0131\u015f olaylar sunar. Bunlar genellikle Pointer Events API \u00fczerine in\u015fa edilmi\u015ftir:<\/p>\n<p>*   <strong><code>on-tap<\/code><\/strong>: Hem fare t\u0131klamalar\u0131n\u0131 hem de dokunmatik ekranlardaki dokunmalar\u0131 temsil eden, bas-b\u0131rak hareketini alg\u0131layan bir olayd\u0131r. \u00c7o\u011fu durumda <code>on-click<\/code> yerine <code>on-tap<\/code> kullanmak daha iyi bir kullan\u0131c\u0131 deneyimi sa\u011flar.<br \/>\n*   <strong><code>on-down<\/code><\/strong>: Kullan\u0131c\u0131n\u0131n bir \u00f6\u011feye fare veya parmakla basmaya ba\u015flad\u0131\u011f\u0131 an tetiklenir.<br \/>\n*   <strong><code>on-up<\/code><\/strong>: Kullan\u0131c\u0131n\u0131n bir \u00f6\u011fe \u00fczerindeki fare veya parma\u011f\u0131n\u0131 kald\u0131rd\u0131\u011f\u0131 an tetiklenir.<\/p>\n<pre><code class=\"language-html\"><dom-module id=\"my-interactive-component\">\n  <template>\n    <div on-tap=\"handleTap\">Dokun veya T\u0131kla<\/div>\n    <div on-down=\"handleDown\" on-up=\"handleUp\">Bas\u0131l\u0131 Tut Denemesi<\/div>\n  <\/template>\n  <script>\n    class MyInteractiveComponent extends PolymerElement {\n      static get is() { return 'my-interactive-component'; }\n\n      handleTap(event) {\n        console.log('Tap olay\u0131 tetiklendi!');\n      }\n\n      handleDown(event) {\n        console.log('Down olay\u0131 tetiklendi!');\n      }\n\n      handleUp(event) {\n        console.log('Up olay\u0131 tetiklendi!');\n      }\n    }\n    customElements.define(MyInteractiveComponent.is, MyInteractiveComponent);\n  <\/script>\n<\/dom-module><\/code><\/pre>\n<h4>Y\u00f6ntem Ba\u011flama ve <code>event<\/code> Objelerine Eri\u015fim<\/h4>\n<p>Deklaratif olay dinleyicilerinde belirtilen metotlar, Polymer bile\u015feninin s\u0131n\u0131f\u0131nda tan\u0131mlanm\u0131\u015f olmal\u0131d\u0131r. Polymer, bu metotlar\u0131 otomatik olarak <code>this<\/code> ba\u011flam\u0131nda \u00e7a\u011f\u0131r\u0131r, bu da metot i\u00e7inde bile\u015fenin \u00f6zelliklerine ve di\u011fer metotlar\u0131na kolayca eri\u015febilece\u011finiz anlam\u0131na gelir.<\/p>\n<p>Her olay i\u015fleyici metodu, ilk arg\u00fcman olarak standart DOM <code>Event<\/code> objesini al\u0131r. Bu obje, olay\u0131n kayna\u011f\u0131 (<code>event.target<\/code>), olay\u0131n tipi (<code>event.type<\/code>), fare koordinatlar\u0131 (<code>event.clientX<\/code>, <code>event.clientY<\/code>) gibi bir\u00e7ok faydal\u0131 bilgi i\u00e7erir. \u00d6zel olaylar i\u00e7in ise <code>event.detail<\/code> \u00f6zelli\u011fi, olaya eklenmi\u015f \u00f6zel verileri ta\u015f\u0131r.<\/p>\n<h3>Polymer&#8217;da Programatik Olay Dinleyiciler<\/h3>\n<p>Polymer&#8217;\u0131n deklaratif olay dinleyicileri \u00e7o\u011fu senaryo i\u00e7in yeterli olsa da, baz\u0131 durumlarda programatik olarak <code>addEventListener<\/code> ve <code>removeEventListener<\/code> kullanarak olay dinleyicilerini manuel olarak y\u00f6netmek gerekebilir.<\/p>\n<h4>Ne Zaman Programatik Dinleyiciler Kullan\u0131l\u0131r?<\/h4>\n<p>Programatik olay dinleyicileri genellikle a\u015fa\u011f\u0131daki durumlarda tercih edilir:<\/p>\n<p>*   <strong>Dinamik Olaylar:<\/strong> Bile\u015fenin \u015fablonunda statik olarak var olmayan, \u00e7al\u0131\u015fma zaman\u0131nda olu\u015fturulan \u00f6\u011feler i\u00e7in olay dinleyicileri eklemek.<br \/>\n*   <strong>D\u0131\u015f DOM \u00d6\u011feleriyle Etkile\u015fim:<\/strong> Bile\u015fenin kendi Shadow DOM&#8217;u d\u0131\u015f\u0131ndaki \u00f6\u011feler (\u00f6rne\u011fin <code>document<\/code>, <code>window<\/code> veya ana DOM&#8217;daki belirli bir \u00f6\u011fe) \u00fczerindeki olaylar\u0131 dinlemek.<br \/>\n*   <strong>Karma\u015f\u0131k Olay Mant\u0131\u011f\u0131:<\/strong> \u00c7ok \u00f6zel yakalama veya kabarc\u0131klanma davran\u0131\u015flar\u0131 gerektiren senaryolar.<br \/>\n*   <strong>\u00dc\u00e7\u00fcnc\u00fc Taraf K\u00fct\u00fcphanelerle Entegrasyon:<\/strong> Baz\u0131 k\u00fct\u00fcphaneler kendi olay dinleme mekanizmalar\u0131n\u0131 programatik olarak eklemeyi gerektirebilir.<\/p>\n<h4><code>addEventListener<\/code> ve <code>removeEventListener<\/code> Kullan\u0131m\u0131<\/h4>\n<p>Programatik olay dinleyicileri eklemek i\u00e7in <code>element.addEventListener(eventType, handler, options)<\/code> metodu kullan\u0131l\u0131r. <code>options<\/code> parametresi, olay\u0131n yakalama a\u015famas\u0131nda dinlenip dinlenmeyece\u011fini (<code>capture: true<\/code>), olay\u0131n sadece bir kez mi dinlenece\u011fini (<code>once: true<\/code>) veya pasif bir dinleyici olup olmad\u0131\u011f\u0131n\u0131 (<code>passive: true<\/code>) belirtmek i\u00e7in kullan\u0131labilir.<\/p>\n<p>En kritik nokta, eklenen her programatik dinleyicinin, bile\u015fen DOM&#8217;dan kald\u0131r\u0131ld\u0131\u011f\u0131nda temizlenmesidir. Aksi takdirde, bellek s\u0131z\u0131nt\u0131lar\u0131 ve istenmeyen davran\u0131\u015flar meydana gelebilir. Bu temizlik <code>removeEventListener<\/code> metodu ile yap\u0131l\u0131r.<\/p>\n<pre><code class=\"language-javascript\">\/\/ \u00d6rnek kullan\u0131m\nelement.addEventListener('click', this._handleClick.bind(this));\nelement.removeEventListener('click', this._handleClick.bind(this));<\/code><\/pre>\n<p><code>this._handleClick.bind(this)<\/code> ifadesi \u00f6nemlidir \u00e7\u00fcnk\u00fc olay i\u015fleyici metodu \u00e7a\u011fr\u0131ld\u0131\u011f\u0131nda <code>this<\/code> ba\u011flam\u0131n\u0131n bile\u015fen \u00f6rne\u011fine i\u015faret etmesini sa\u011flar. <code>removeEventListener<\/code> metoduna ayn\u0131 referans\u0131 iletmek gerekti\u011fi i\u00e7in, <code>bind<\/code> i\u015fleminin sonucunu bir de\u011fi\u015fkende saklamak veya <code>bind<\/code> i\u015flemini <code>addEventListener<\/code> ve <code>removeEventListener<\/code> \u00e7a\u011fr\u0131lar\u0131nda ayn\u0131 \u015fekilde tekrarlamak \u00f6nemlidir.<\/p>\n<h4>Ya\u015fam D\u00f6ng\u00fcs\u00fc Metotlar\u0131 ile Y\u00f6netim<\/h4>\n<p>Polymer bile\u015fenleri, Web Bile\u015fenleri standard\u0131n\u0131n ya\u015fam d\u00f6ng\u00fcs\u00fc metotlar\u0131n\u0131 kullan\u0131r. Bu metotlar, programatik olay dinleyicilerini y\u00f6netmek i\u00e7in ideal yerlerdir:<\/p>\n<p>*   <strong><code>connectedCallback()<\/code><\/strong>: Bile\u015fen DOM&#8217;a eklendi\u011finde \u00e7a\u011fr\u0131l\u0131r. Programatik olay dinleyicilerini burada eklemek en uygun yerdir. Bu sayede bile\u015fen aktifken olaylar\u0131 dinlemeye ba\u015flar.<br \/>\n*   <strong><code>disconnectedCallback()<\/code><\/strong>: Bile\u015fen DOM&#8217;dan kald\u0131r\u0131ld\u0131\u011f\u0131nda \u00e7a\u011fr\u0131l\u0131r. Burada <code>removeEventListener<\/code> kullanarak eklenen t\u00fcm dinleyicileri temizlemek zorunludur. Bu, bellek s\u0131z\u0131nt\u0131lar\u0131n\u0131 \u00f6nler ve uygulaman\u0131n performans\u0131n\u0131 korur.<\/p>\n<pre><code class=\"language-html\"><dom-module id=\"my-programmatic-component\">\n  <template>\n    <div id=\"myDiv\">Programatik Dinleyici \u0130\u00e7in Alan<\/div>\n  <\/template>\n  <script>\n    class MyProgrammaticComponent extends PolymerElement {\n      static get is() { return 'my-programmatic-component'; }\n\n      constructor() {\n        super();\n        \/\/ Olay i\u015fleyicisinin 'this' ba\u011flam\u0131n\u0131 \u00f6nceden ba\u011flamak\n        this._handleDivClick = this._handleDivClick.bind(this);\n      }\n\n      connectedCallback() {\n        super.connectedCallback();\n        \/\/ Shadow DOM i\u00e7indeki bir \u00f6\u011feye dinleyici ekleme\n        this.shadowRoot.getElementById('myDiv').addEventListener('click', this._handleDivClick);\n        \/\/ Window objesine dinleyici ekleme\n        window.addEventListener('resize', this._handleWindowResize.bind(this));\n      }\n\n      disconnectedCallback() {\n        super.disconnectedCallback();\n        \/\/ Dinleyicileri temizleme\n        this.shadowRoot.getElementById('myDiv').removeEventListener('click', this._handleDivClick);\n        window.removeEventListener('resize', this._handleWindowResize.bind(this));\n      }\n\n      _handleDivClick(event) {\n        console.log('Div programatik olarak t\u0131kland\u0131!', event.target.textContent);\n      }\n\n      _handleWindowResize(event) {\n        console.log('Pencere boyutu de\u011fi\u015fti!');\n      }\n    }\n    customElements.define(MyProgrammaticComponent.is, MyProgrammaticComponent);\n  <\/script>\n<\/dom-module><\/code><\/pre>\n<p>Yukar\u0131daki \u00f6rnekte, <code>_handleDivClick<\/code> metodu <code>constructor<\/code> i\u00e7inde <code>bind<\/code> edilerek <code>this<\/code> ba\u011flam\u0131n\u0131n korunmas\u0131 sa\u011flanm\u0131\u015ft\u0131r. Bu, <code>addEventListener<\/code> ve <code>removeEventListener<\/code> \u00e7a\u011fr\u0131lar\u0131nda ayn\u0131 fonksiyon referans\u0131n\u0131n kullan\u0131lmas\u0131n\u0131 garanti eder. <code>connectedCallback<\/code> i\u00e7inde hem bile\u015fenin Shadow DOM&#8217;undaki bir \u00f6\u011feye hem de <code>window<\/code> objesine olay dinleyicileri eklenmi\u015f, <code>disconnectedCallback<\/code> i\u00e7inde ise bu dinleyiciler uygun \u015fekilde kald\u0131r\u0131lm\u0131\u015ft\u0131r.<\/p>\n<h3>Polymer&#8217;da \u00d6zel Olaylar Olu\u015fturma ve Y\u00f6netme<\/h3>\n<p>Polymer bile\u015fenlerinin en g\u00fc\u00e7l\u00fc ileti\u015fim mekanizmalar\u0131ndan biri, \u00f6zel olaylar arac\u0131l\u0131\u011f\u0131yla \u00fcst bile\u015fenlere veya di\u011fer dinleyicilere bilgi g\u00f6nderme yetene\u011fidir. Bu, \u00f6zellikle alt bile\u015fenlerin \u00fcst bile\u015fenlerin durumunu veya davran\u0131\u015f\u0131n\u0131 etkilemesi gerekti\u011finde hayati \u00f6neme sahiptir.<\/p>\n<h4>Olay Yay\u0131mlama (<code>this.dispatchEvent()<\/code>)<\/h4>\n<p>Bir Polymer bile\u015feninde \u00f6zel bir olay yay\u0131mlamak i\u00e7in standart <code>CustomEvent<\/code> aray\u00fcz\u00fc ve <code>HTMLElement.dispatchEvent()<\/code> metodu kullan\u0131l\u0131r.<\/p>\n<pre><code class=\"language-javascript\">this.dispatchEvent(new CustomEvent('eventName', {\n  detail: { \/<em> g\u00f6nderilecek veri <\/em>\/ },\n  bubbles: true,  \/\/ Olay\u0131n DOM a\u011fac\u0131nda yukar\u0131 do\u011fru yay\u0131lmas\u0131n\u0131 sa\u011flar\n  composed: true  \/\/ Olay\u0131n Shadow DOM s\u0131n\u0131rlar\u0131n\u0131 a\u015fmas\u0131n\u0131 sa\u011flar\n}));<\/code><\/pre>\n<p><code>CustomEvent<\/code> yap\u0131c\u0131 metodu iki ana arg\u00fcman al\u0131r:<\/p>\n<p>1.  <strong><code>type<\/code> (string):<\/strong> Olay\u0131n ad\u0131d\u0131r (\u00f6rne\u011fin, <code>'user-login'<\/code>, <code>'item-selected'<\/code>). Olay adlar\u0131 genellikle k\u00fc\u00e7\u00fck harfle, tire ile ayr\u0131larak (kebab-case) yaz\u0131l\u0131r.<br \/>\n2.  <strong><code>options<\/code> (object):<\/strong> Olay\u0131n davran\u0131\u015f\u0131n\u0131 ve ta\u015f\u0131yaca\u011f\u0131 veriyi belirten bir nesnedir. En \u00f6nemli \u00f6zellikleri \u015funlard\u0131r:<br \/>\n    *   <strong><code>detail<\/code> (any):<\/strong> Bu \u00f6zellik, olayla birlikte g\u00f6nderilecek herhangi bir veriyi ta\u015f\u0131mak i\u00e7in kullan\u0131l\u0131r. Bir nesne, dize, say\u0131 veya ba\u015fka herhangi bir veri tipi olabilir. \u00dcst bile\u015fenler bu veriyi <code>event.detail<\/code> \u00fczerinden eri\u015febilir.<br \/>\n    *   <strong><code>bubbles<\/code> (boolean, varsay\u0131lan <code>false<\/code>):<\/strong> E\u011fer <code>true<\/code> olarak ayarlan\u0131rsa, olay DOM a\u011fac\u0131nda yukar\u0131 do\u011fru kabarc\u0131klan\u0131r. Bu, \u00fcst bile\u015fenlerin olay\u0131 dinlemesini sa\u011flar.<br \/>\n    *   <strong><code>composed<\/code> (boolean, varsay\u0131lan <code>false<\/code>):<\/strong> E\u011fer <code>true<\/code> olarak ayarlan\u0131rsa, olay Shadow DOM s\u0131n\u0131rlar\u0131n\u0131 a\u015farak ana DOM&#8217;a veya di\u011fer Shadow DOM&#8217;lara kabarc\u0131klanabilir. Bu, kaps\u00fcllenmi\u015f bir bile\u015fenden d\u0131\u015far\u0131ya olay g\u00f6ndermek i\u00e7in kritik \u00f6neme sahiptir.<\/p>\n<p><strong>Ne Zaman \u00d6zel Olay Yay\u0131mlan\u0131r?<\/strong><\/p>\n<p>*   Bir alt bile\u015fenin i\u00e7 durumu de\u011fi\u015fti\u011finde ve bu durum \u00fcst bile\u015fenleri ilgilendirdi\u011finde (\u00f6rne\u011fin, bir form bile\u015feninde <code>submit<\/code> d\u00fc\u011fmesine t\u0131kland\u0131\u011f\u0131nda).<br \/>\n*   Kullan\u0131c\u0131 bir alt bile\u015fen i\u00e7inde \u00f6nemli bir eylem ger\u00e7ekle\u015ftirdi\u011finde ve bu eylemin bir \u00fcst d\u00fczeyde i\u015flenmesi gerekti\u011finde (\u00f6rne\u011fin, bir liste \u00f6\u011fesi se\u00e7ildi\u011finde <code>item-selected<\/code> olay\u0131).<br \/>\n*   Bir bile\u015fenin kendi i\u00e7inde bir i\u015flem tamamland\u0131\u011f\u0131nda veya bir hata olu\u015ftu\u011funda.<\/p>\n<p><strong>\u00d6rnek Kod:<\/strong><\/p>\n<p>Bir d\u00fc\u011fmeye t\u0131kland\u0131\u011f\u0131nda, bir <code>item-selected<\/code> \u00f6zel olay\u0131n\u0131 yay\u0131mlayan bir bile\u015fen d\u00fc\u015f\u00fcnelim:<\/p>\n<pre><code class=\"language-html\"><dom-module id=\"my-list-item\">\n  <template>\n    <style>\n      :host { display: block; padding: 10px; border: 1px solid #ccc; margin-bottom: 5px; cursor: pointer; }\n      :host([selected]) { background-color: #e0f2f7; }\n    <\/style>\n    <div on-click=\"selectItem\">[[itemText]]<\/div>\n  <\/template>\n  <script>\n    class MyListItem extends PolymerElement {\n      static get is() { return 'my-list-item'; }\n      static get properties() {\n        return {\n          itemId: { type: String },\n          itemText: { type: String },\n          selected: { type: Boolean, reflectToAttribute: true, value: false }\n        };\n      }\n\n      selectItem() {\n        this.selected = !this.selected; \/\/ Durumu de\u011fi\u015ftir\n        this.dispatchEvent(new CustomEvent('item-selected', {\n          detail: { itemId: this.itemId, selected: this.selected },\n          bubbles: true,\n          composed: true\n        }));\n      }\n    }\n    customElements.define(MyListItem.is, MyListItem);\n  <\/script>\n<\/dom-module><\/code><\/pre>\n<p>Bu <code>my-list-item<\/code> bile\u015feni, bir \u00f6\u011fe se\u00e7ildi\u011finde <code>item-selected<\/code> ad\u0131nda bir \u00f6zel olay yay\u0131mlar. <code>detail<\/code> \u00f6zelli\u011fi arac\u0131l\u0131\u011f\u0131yla se\u00e7ilen \u00f6\u011fenin <code>itemId<\/code> ve <code>selected<\/code> durumu gibi \u00f6nemli bilgiler ta\u015f\u0131r. <code>bubbles: true<\/code> ve <code>composed: true<\/code> ayarlar\u0131, olay\u0131n \u00fcst bile\u015fenler taraf\u0131ndan dinlenebilmesini sa\u011flar.<\/p>\n<h4>\u00d6zel Olaylar\u0131 Dinleme<\/h4>\n<p>Bir \u00fcst bile\u015fen, alt bile\u015fen taraf\u0131ndan yay\u0131mlanan \u00f6zel olaylar\u0131 dinleyebilir. Bunun i\u00e7in iki ana y\u00f6ntem vard\u0131r:<\/p>\n<p>1.  <strong>Programatik Dinleme (<code>addEventListener<\/code>):<\/strong> Bu en genel ve esnek y\u00f6ntemdir. \u00dcst bile\u015fen, alt bile\u015fenin \u00f6rne\u011fine <code>addEventListener<\/code> kullanarak olay dinleyici ekler.<\/p>\n<pre><code class=\"language-html\"><dom-module id=\"my-parent-list\">\n      <template>\n        <h3>\u00d6\u011fe Listesi<\/h3>\n        <my-list-item item-id=\"1\" item-text=\"\u00d6\u011fe Bir\"><\/my-list-item>\n        <my-list-item item-id=\"2\" item-text=\"\u00d6\u011fe \u0130ki\"><\/my-list-item>\n        <p>Se\u00e7ilen \u00d6\u011fe ID: [[_selectedItemId]]<\/p>\n      <\/template>\n      <script>\n        class MyParentList extends PolymerElement {\n          static get is() { return 'my-parent-list'; }\n          static get properties() {\n            return {\n              _selectedItemId: { type: String, value: 'Yok' }\n            };\n          }\n\n          connectedCallback() {\n            super.connectedCallback();\n            \/\/ T\u00fcm my-list-item bile\u015fenlerinin 'item-selected' olay\u0131n\u0131 dinleme\n            this.shadowRoot.querySelectorAll('my-list-item').forEach(item => {\n              item.addEventListener('item-selected', this._handleItemSelected.bind(this));\n            });\n          }\n\n          disconnectedCallback() {\n            super.disconnectedCallback();\n            this.shadowRoot.querySelectorAll('my-list-item').forEach(item => {\n              item.removeEventListener('item-selected', this._handleItemSelected.bind(this));\n            });\n          }\n\n          _handleItemSelected(event) {\n            const { itemId, selected } = event.detail;\n            console.log(<code>\u00d6\u011fe ${itemId} durumu: ${selected ? 'se\u00e7ildi' : 'se\u00e7im kald\u0131r\u0131ld\u0131'}<\/code>);\n            if (selected) {\n              this.set('_selectedItemId', itemId);\n            } else if (this._selectedItemId === itemId) {\n              this.set('_selectedItemId', 'Yok');\n            }\n          }\n        }\n        customElements.define(MyParentList.is, MyParentList);\n      <\/script>\n    <\/dom-module><\/code><\/pre>\n<p>    Bu \u00f6rnekte, <code>MyParentList<\/code> bile\u015feni, <code>connectedCallback<\/code> i\u00e7inde t\u00fcm <code>my-list-item<\/code> alt bile\u015fenlerini bulur ve her birine <code>item-selected<\/code> olay\u0131 i\u00e7in bir dinleyici ekler. <code>disconnectedCallback<\/code> i\u00e7inde ise bu dinleyicileri temizler. <code>_handleItemSelected<\/code> metodu, <code>event.detail<\/code> i\u00e7indeki veriye eri\u015ferek gerekli mant\u0131\u011f\u0131 y\u00fcr\u00fct\u00fcr.<\/p>\n<p>2.  <strong>Deklaratif Dinleme (<code>on-custom-event-name<\/code>):<\/strong> E\u011fer \u00f6zel olay <code>bubbles: true<\/code> ve <code>composed: true<\/code> olarak ayarlanm\u0131\u015fsa, \u00fcst Polymer bile\u015feninin \u015fablonunda da bu olay\u0131 deklaratif olarak dinlemek m\u00fcmk\u00fcnd\u00fcr.<\/p>\n<pre><code class=\"language-html\"><dom-module id=\"my-parent-list-declarative\">\n      <template>\n        <h3>\u00d6\u011fe Listesi (Deklaratif)<\/h3>\n        <my-list-item item-id=\"1\" item-text=\"\u00d6\u011fe Bir\" on-item-selected=\"handleItemSelectedDeclarative\"><\/my-list-item>\n        <my-list-item item-id=\"2\" item-text=\"\u00d6\u011fe \u0130ki\" on-item-selected=\"handleItemSelectedDeclarative\"><\/my-list-item>\n        <p>Se\u00e7ilen \u00d6\u011fe ID: [[_selectedItemId]]<\/p>\n      <\/template>\n      <script>\n        class MyParentListDeclarative extends PolymerElement {\n          static get is() { return 'my-parent-list-declarative'; }\n          static get properties() {\n            return {\n              _selectedItemId: { type: String, value: 'Yok' }\n            };\n          }\n\n          handleItemSelectedDeclarative(event) {\n            const { itemId, selected } = event.detail;\n            console.log(<code>Deklaratif: \u00d6\u011fe ${itemId} durumu: ${selected ? 'se\u00e7ildi' : 'se\u00e7im kald\u0131r\u0131ld\u0131'}<\/code>);\n            if (selected) {\n              this.set('_selectedItemId', itemId);\n            } else if (this._selectedItemId === itemId) {\n              this.set('_selectedItemId', 'Yok');\n            }\n          }\n        }\n        customElements.define(MyParentListDeclarative.is, MyParentListDeclarative);\n      <\/script>\n    <\/dom-module><\/code><\/pre>\n<p>    Bu yakla\u015f\u0131m, \u00f6zellikle alt bile\u015fenler do\u011frudan \u015fablonda tan\u0131mlan\u0131yorsa ve olaylar\u0131n kabarc\u0131klanmas\u0131 isteniyorsa daha okunakl\u0131 olabilir.<\/p>\n<h3>Olay Modifikat\u00f6rleri ve Yard\u0131mc\u0131 Fonksiyonlar<\/h3>\n<p>Olay i\u015fleme s\u0131ras\u0131nda, taray\u0131c\u0131n\u0131n varsay\u0131lan davran\u0131\u015flar\u0131n\u0131 engellemek veya olay\u0131n yay\u0131l\u0131m\u0131n\u0131 kontrol etmek i\u00e7in standart DOM olay metotlar\u0131 kullan\u0131l\u0131r. Polymer, bu metotlar\u0131 do\u011frudan destekler.<\/p>\n<p>*   <strong><code>event.preventDefault()<\/code><\/strong>: Bir olay\u0131n tetiklenmesiyle ili\u015fkili varsay\u0131lan taray\u0131c\u0131 davran\u0131\u015f\u0131n\u0131 engeller. \u00d6rne\u011fin, bir formun <code>submit<\/code> olay\u0131nda <code>preventDefault()<\/code> \u00e7a\u011f\u0131rmak, formun g\u00f6nderilmesini ve sayfan\u0131n yeniden y\u00fcklenmesini engeller. Bir ba\u011flant\u0131n\u0131n <code>click<\/code> olay\u0131nda kullan\u0131ld\u0131\u011f\u0131nda, ba\u011flant\u0131n\u0131n hedefine gitmesini engeller.<br \/>\n*   <strong><code>event.stopPropagation()<\/code><\/strong>: Bir olay\u0131n DOM a\u011fac\u0131nda daha fazla kabarc\u0131klanmas\u0131n\u0131 veya yakalanmas\u0131n\u0131 durdurur. Bu, bir alt \u00f6\u011fedeki olay\u0131n \u00fcst \u00f6\u011felerdeki dinleyicileri tetiklemesini engellemek i\u00e7in kullan\u0131\u015fl\u0131d\u0131r.<br \/>\n*   <strong><code>event.stopImmediatePropagation()<\/code><\/strong>: <code>stopPropagation()<\/code> ile ayn\u0131 i\u015flevi g\u00f6r\u00fcr ve ek olarak, ayn\u0131 \u00f6\u011fe \u00fczerindeki di\u011fer olay dinleyicilerinin \u00e7al\u0131\u015fmas\u0131n\u0131 da engeller. Ayn\u0131 \u00f6\u011fe \u00fczerinde birden fazla dinleyici varsa ve birinin di\u011ferlerini durdurmas\u0131 gerekiyorsa bu kullan\u0131l\u0131r.<\/p>\n<pre><code class=\"language-javascript\">handleClick(event) {\n  event.preventDefault(); \/\/ Varsay\u0131lan davran\u0131\u015f\u0131 engelle\n  event.stopPropagation(); \/\/ Kabarc\u0131klanmay\u0131 durdur\n  console.log('T\u0131klama i\u015flendi, ba\u015fka bir \u015fey olmayacak.');\n}<\/code><\/pre>\n<h4>Debounce ve Throttle<\/h4>\n<p>Baz\u0131 olaylar (\u00f6rne\u011fin <code>input<\/code>, <code>scroll<\/code>, <code>resize<\/code>, <code>mousemove<\/code>) \u00e7ok s\u0131k tetiklenebilir ve bu da performans sorunlar\u0131na yol a\u00e7abilir. Bu t\u00fcr durumlarda <code>debounce<\/code> ve <code>throttle<\/code> teknikleri kullan\u0131l\u0131r:<\/p>\n<p>*   <strong>Debounce<\/strong>: Bir fonksiyonun, belirli bir s\u00fcre boyunca tekrar \u00e7a\u011fr\u0131lmad\u0131\u011f\u0131nda yaln\u0131zca bir kez \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flar. \u00d6rne\u011fin, bir arama kutusuna yazarken her tu\u015f vuru\u015funda arama yapmak yerine, kullan\u0131c\u0131 yazmay\u0131 b\u0131rakt\u0131ktan belirli bir s\u00fcre sonra arama yapmak i\u00e7in kullan\u0131l\u0131r.<br \/>\n*   <strong>Throttle<\/strong>: Bir fonksiyonun, belirli bir zaman aral\u0131\u011f\u0131nda en fazla bir kez \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flar. \u00d6rne\u011fin, bir pencere yeniden boyutland\u0131r\u0131ld\u0131\u011f\u0131nda her piksel de\u011fi\u015fikli\u011finde de\u011fil, saniyede bir kez boyutland\u0131rma i\u015flemini ger\u00e7ekle\u015ftirmek i\u00e7in kullan\u0131l\u0131r.<\/p>\n<p>Polymer&#8217;\u0131n kendisi bu yard\u0131mc\u0131 fonksiyonlar\u0131 do\u011frudan sa\u011flamaz, ancak bunlar\u0131 manuel olarak uygulayabilir veya Lodash gibi yard\u0131mc\u0131 k\u00fct\u00fcphanelerden entegre edebilirsiniz.<\/p>\n<pre><code class=\"language-javascript\">\/\/ Basit bir debounce \u00f6rne\u011fi\n_debouncedInputHandler: null,\n\nconnectedCallback() {\n  super.connectedCallback();\n  this._debouncedInputHandler = this._debounce(() => {\n    console.log('Debounce ile giri\u015f i\u015flendi:', this.shadowRoot.querySelector('input').value);\n  }, 500);\n  this.shadowRoot.querySelector('input').addEventListener('input', this._debouncedInputHandler);\n}\n\ndisconnectedCallback() {\n  super.disconnectedCallback();\n  this.shadowRoot.querySelector('input').removeEventListener('input', this._debouncedInputHandler);\n}\n\n_debounce(func, delay) {\n  let timeout;\n  return function(...args) {\n    const context = this;\n    clearTimeout(timeout);\n    timeout = setTimeout(() => func.apply(context, args), delay);\n  };\n}<\/code><\/pre>\n<h3>En \u0130yi Uygulamalar ve Stratejiler<\/h3>\n<p>Etkili olay y\u00f6netimi, sadece bile\u015fenlerin do\u011fru \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flamakla kalmaz, ayn\u0131 zamanda uygulaman\u0131n s\u00fcrd\u00fcr\u00fclebilirli\u011fini, performans\u0131n\u0131 ve eri\u015filebilirli\u011fini de art\u0131r\u0131r.<\/p>\n<p>*   <strong>Anlaml\u0131 Olay Adlar\u0131 Kullan\u0131n:<\/strong> \u00d6zel olaylar i\u00e7in a\u00e7\u0131k, a\u00e7\u0131klay\u0131c\u0131 ve tutarl\u0131 adlar kullan\u0131n (\u00f6rne\u011fin <code>item-selected<\/code>, <code>user-logged-in<\/code>, <code>form-submitted<\/code>). Bu, bile\u015fenler aras\u0131 ileti\u015fimin anla\u015f\u0131lmas\u0131n\u0131 kolayla\u015ft\u0131r\u0131r. Kebab-case (tire ile ayr\u0131lm\u0131\u015f k\u00fc\u00e7\u00fck harfler) yayg\u0131n bir adland\u0131rma standard\u0131d\u0131r.<br \/>\n*   <strong>Olay \u0130\u015fleyicilerini K\u0131sa ve Odakl\u0131 Tutun:<\/strong> Olay i\u015fleyici metotlar\u0131, olay\u0131 i\u015flemek i\u00e7in gereken minimum mant\u0131\u011f\u0131 i\u00e7ermelidir. Karma\u015f\u0131k i\u015f mant\u0131\u011f\u0131n\u0131 ayr\u0131 yard\u0131mc\u0131 metotlara veya servislere delege edin. Bu, kodun okunabilirli\u011fini ve test edilebilirli\u011fini art\u0131r\u0131r.<br \/>\n*   <strong>Bellek S\u0131z\u0131nt\u0131lar\u0131n\u0131 \u00d6nleyin:<\/strong> Programatik olarak eklenen her <code>addEventListener<\/code> \u00e7a\u011fr\u0131s\u0131 i\u00e7in, bile\u015fen DOM&#8217;dan kald\u0131r\u0131ld\u0131\u011f\u0131nda kar\u015f\u0131l\u0131k gelen bir <code>removeEventListener<\/code> \u00e7a\u011fr\u0131s\u0131 oldu\u011fundan emin olun (<code>disconnectedCallback<\/code> i\u00e7inde). Bu, \u00f6zellikle <code>window<\/code> veya <code>document<\/code> gibi global nesnelere eklenen dinleyiciler i\u00e7in kritik \u00f6neme sahiptir.<br \/>\n*   <strong>Eri\u015filebilirli\u011fi G\u00f6z \u00d6n\u00fcnde Bulundurun:<\/strong> Yaln\u0131zca fare olaylar\u0131na g\u00fcvenmeyin. Klavye olaylar\u0131n\u0131 (<code>keydown<\/code>, <code>keyup<\/code>) ve ARIA niteliklerini kullanarak bile\u015fenlerinizin klavye ile de eri\u015filebilir oldu\u011fundan emin olun. \u00d6rne\u011fin, bir d\u00fc\u011fme i\u00e7in hem <code>on-tap<\/code> hem de <code>on-keydown<\/code> (Enter veya Space tu\u015fu i\u00e7in) dinleyicileri d\u00fc\u015f\u00fcnebilirsiniz.<br \/>\n*   <strong>Olay Delegasyonu Kullan\u0131n:<\/strong> \u00c7ok say\u0131da benzer \u00f6\u011feniz varsa (\u00f6rne\u011fin bir liste), her bir \u00f6\u011feye ayr\u0131 ayr\u0131 olay dinleyici eklemek yerine, \u00fcst \u00f6\u011feye tek bir dinleyici ekleyerek olay delegasyonu yapabilirsiniz. Kabarc\u0131klanma sayesinde, alt \u00f6\u011felerdeki olaylar \u00fcst \u00f6\u011feye ula\u015facak ve <code>event.target<\/code> \u00f6zelli\u011fini kullanarak hangi alt \u00f6\u011fenin olay\u0131 tetikledi\u011fini belirleyebilirsiniz. Bu, performans a\u00e7\u0131s\u0131ndan daha verimlidir.<br \/>\n*   <strong>Bile\u015fenler Aras\u0131 \u0130leti\u015fim Deseni Se\u00e7imi:<\/strong><br \/>\n    *   <strong>\u00dcstten Alta:<\/strong> Veri ak\u0131\u015f\u0131 genellikle \u00f6zellikler (<code>properties<\/code>) arac\u0131l\u0131\u011f\u0131yla sa\u011flan\u0131r. \u00dcst bile\u015fen, alt bile\u015fenin \u00f6zelliklerini ba\u011flayarak veri g\u00f6nderir.<br \/>\n    *   <strong>Alttan \u00dcste:<\/strong> \u00d6zel olaylar (<code>CustomEvent<\/code> ve <code>dispatchEvent<\/code>) en yayg\u0131n ve \u00f6nerilen y\u00f6ntemdir. Alt bile\u015fen bir olay yay\u0131mlar, \u00fcst bile\u015fen bu olay\u0131 dinler ve tepki verir.<br \/>\n    *   <strong>Karde\u015f Bile\u015fenler Aras\u0131 veya Global:<\/strong> Bu t\u00fcr ileti\u015fim i\u00e7in genellikle bir \u00fcst ortak bile\u015fen arac\u0131l\u0131\u011f\u0131yla olaylar\u0131n kabarc\u0131klanmas\u0131\/dinlenmesi veya daha karma\u015f\u0131k senaryolar i\u00e7in bir merkezi durum y\u00f6netimi k\u00fct\u00fcphanesi (\u00f6rne\u011fin Redux, MobX) veya basit bir olay yay\u0131n\/abone (pub\/sub) servisi kullan\u0131labilir.<\/p>\n<h3>Sonu\u00e7<\/h3>\n<p>Polymer, web bile\u015fenleri geli\u015ftiricilerine olaylar\u0131 y\u00f6netmek i\u00e7in hem deklaratif hem de programatik g\u00fc\u00e7l\u00fc ve esnek mekanizmalar sunar. Standart DOM olaylar\u0131ndan \u00f6zel olaylar\u0131n karma\u015f\u0131k d\u00fcnyas\u0131na kadar, Polymer bu s\u00fcre\u00e7leri kolayla\u015ft\u0131ran bir yap\u0131 sa\u011flar. Deklaratif <code>on-event-name<\/code> nitelikleri, bile\u015fen \u015fablonlar\u0131 i\u00e7inde olay i\u015fleyicilerini h\u0131zl\u0131ca ba\u011flaman\u0131za olanak tan\u0131rken, <code>addEventListener<\/code> ve <code>removeEventListener<\/code> ile programatik y\u00f6netim, daha dinamik ve d\u0131\u015f DOM etkile\u015fimleri i\u00e7in gerekli kontrol\u00fc sunar.<\/p>\n<p>\u00d6zellikle <code>CustomEvent<\/code> kullan\u0131m\u0131, <code>detail<\/code>, <code>bubbles<\/code> ve <code>composed<\/code> \u00f6zellikleri sayesinde bile\u015fenler aras\u0131 ileti\u015fimi sa\u011flaman\u0131n temel ta\u015f\u0131d\u0131r. Bu mekanizmalar\u0131 do\u011fru bir \u015fekilde anlamak ve uygulamak, kaps\u00fcllenmi\u015f, yeniden kullan\u0131labilir ve s\u00fcrd\u00fcr\u00fclebilir web bile\u015fenleri olu\u015fturman\u0131n anahtar\u0131d\u0131r. Olay i\u015fleyicilerini temiz tutmak, bellek s\u0131z\u0131nt\u0131lar\u0131n\u0131 \u00f6nlemek, eri\u015filebilirli\u011fi g\u00f6z \u00f6n\u00fcnde bulundurmak ve performans optimizasyonlar\u0131n\u0131 uygulamak gibi en iyi uygulamalar, Polymer ile geli\u015ftirilen uygulamalar\u0131n kalitesini art\u0131racakt\u0131r.<\/p>\n<p>Polymer&#8217;\u0131n olay y\u00f6netimindeki bu esnekli\u011fi, geli\u015ftiricilere karma\u015f\u0131k kullan\u0131c\u0131 aray\u00fczlerini ve etkile\u015fimleri verimli bir \u015fekilde tasarlama ve in\u015fa etme g\u00fcc\u00fc verir. Bu makalede ele al\u0131nan prensipleri ve teknikleri uygulayarak, web bile\u015fenlerinizin sadece i\u015flevsel de\u011fil, ayn\u0131 zamanda sa\u011flam, performansl\u0131 ve bak\u0131m\u0131 kolay olmas\u0131n\u0131 sa\u011flayabilirsiniz.<\/body><\/p>\n","protected":false},"excerpt":{"rendered":"Polymer&#8217;da Olay Y\u00f6netimi: Bile\u015fenler Aras\u0131 Etkile\u015fimi G\u00fc\u00e7lendirmek\nModern web uygulamalar\u0131, kullan\u0131c\u0131larla dinamik ve interaktif bir deneyim","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-36838","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>Polymer&#039;da Olay Y\u00f6netimi: Bile\u015fenler Aras\u0131 Etkile\u015fimi G\u00fc\u00e7lendirmek - Kodlar\u0131n Gizemli D\u00fcnyas\u0131<\/title>\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\/polymerda-olay-yonetimi-bilesenler-arasi-etkilesimi-guclendirmek\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Polymer&#039;da Olay Y\u00f6netimi: Bile\u015fenler Aras\u0131 Etkile\u015fimi G\u00fc\u00e7lendirmek\" \/>\n<meta property=\"og:description\" content=\"Polymer&#039;da Olay Y\u00f6netimi: Bile\u015fenler Aras\u0131 Etkile\u015fimi G\u00fc\u00e7lendirmek Modern web uygulamalar\u0131, kullan\u0131c\u0131larla dinamik ve interaktif bir deneyim\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/polymerda-olay-yonetimi-bilesenler-arasi-etkilesimi-guclendirmek\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-12-23T17:40:56+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=\"17 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/polymerda-olay-yonetimi-bilesenler-arasi-etkilesimi-guclendirmek\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/polymerda-olay-yonetimi-bilesenler-arasi-etkilesimi-guclendirmek\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"Polymer&#8217;da Olay Y\u00f6netimi: Bile\u015fenler Aras\u0131 Etkile\u015fimi G\u00fc\u00e7lendirmek\",\"datePublished\":\"2025-12-23T17:40:56+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/polymerda-olay-yonetimi-bilesenler-arasi-etkilesimi-guclendirmek\/\"},\"wordCount\":3054,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/polymerda-olay-yonetimi-bilesenler-arasi-etkilesimi-guclendirmek\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/polymerda-olay-yonetimi-bilesenler-arasi-etkilesimi-guclendirmek\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/polymerda-olay-yonetimi-bilesenler-arasi-etkilesimi-guclendirmek\/\",\"name\":\"Polymer'da Olay Y\u00f6netimi: Bile\u015fenler Aras\u0131 Etkile\u015fimi G\u00fc\u00e7lendirmek - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-12-23T17:40:56+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/polymerda-olay-yonetimi-bilesenler-arasi-etkilesimi-guclendirmek\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/polymerda-olay-yonetimi-bilesenler-arasi-etkilesimi-guclendirmek\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/polymerda-olay-yonetimi-bilesenler-arasi-etkilesimi-guclendirmek\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Polymer&#8217;da Olay Y\u00f6netimi: Bile\u015fenler Aras\u0131 Etkile\u015fimi G\u00fc\u00e7lendirmek\"}]},{\"@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":"Polymer'da Olay Y\u00f6netimi: Bile\u015fenler Aras\u0131 Etkile\u015fimi G\u00fc\u00e7lendirmek - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","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\/polymerda-olay-yonetimi-bilesenler-arasi-etkilesimi-guclendirmek\/","og_locale":"tr_TR","og_type":"article","og_title":"Polymer'da Olay Y\u00f6netimi: Bile\u015fenler Aras\u0131 Etkile\u015fimi G\u00fc\u00e7lendirmek","og_description":"Polymer'da Olay Y\u00f6netimi: Bile\u015fenler Aras\u0131 Etkile\u015fimi G\u00fc\u00e7lendirmek Modern web uygulamalar\u0131, kullan\u0131c\u0131larla dinamik ve interaktif bir deneyim","og_url":"https:\/\/fatihsoysal.com\/blog\/polymerda-olay-yonetimi-bilesenler-arasi-etkilesimi-guclendirmek\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-12-23T17:40:56+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"17 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/polymerda-olay-yonetimi-bilesenler-arasi-etkilesimi-guclendirmek\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/polymerda-olay-yonetimi-bilesenler-arasi-etkilesimi-guclendirmek\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"Polymer&#8217;da Olay Y\u00f6netimi: Bile\u015fenler Aras\u0131 Etkile\u015fimi G\u00fc\u00e7lendirmek","datePublished":"2025-12-23T17:40:56+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/polymerda-olay-yonetimi-bilesenler-arasi-etkilesimi-guclendirmek\/"},"wordCount":3054,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/polymerda-olay-yonetimi-bilesenler-arasi-etkilesimi-guclendirmek\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/polymerda-olay-yonetimi-bilesenler-arasi-etkilesimi-guclendirmek\/","url":"https:\/\/fatihsoysal.com\/blog\/polymerda-olay-yonetimi-bilesenler-arasi-etkilesimi-guclendirmek\/","name":"Polymer'da Olay Y\u00f6netimi: Bile\u015fenler Aras\u0131 Etkile\u015fimi G\u00fc\u00e7lendirmek - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-12-23T17:40:56+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/polymerda-olay-yonetimi-bilesenler-arasi-etkilesimi-guclendirmek\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/polymerda-olay-yonetimi-bilesenler-arasi-etkilesimi-guclendirmek\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/polymerda-olay-yonetimi-bilesenler-arasi-etkilesimi-guclendirmek\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Polymer&#8217;da Olay Y\u00f6netimi: Bile\u015fenler Aras\u0131 Etkile\u015fimi G\u00fc\u00e7lendirmek"}]},{"@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\/36838","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=36838"}],"version-history":[{"count":1,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/36838\/revisions"}],"predecessor-version":[{"id":36839,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/36838\/revisions\/36839"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=36838"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=36838"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=36838"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}