diff options
Diffstat (limited to 'files/tr/web/api/mutationobserver/index.html')
| -rw-r--r-- | files/tr/web/api/mutationobserver/index.html | 250 |
1 files changed, 0 insertions, 250 deletions
diff --git a/files/tr/web/api/mutationobserver/index.html b/files/tr/web/api/mutationobserver/index.html deleted file mode 100644 index 33b181344b..0000000000 --- a/files/tr/web/api/mutationobserver/index.html +++ /dev/null @@ -1,250 +0,0 @@ ---- -title: MutationObserver -slug: Web/API/MutationObserver -tags: - - API - - DOM - - Dönüşüm Gözlemcisi -translation_of: Web/API/MutationObserver ---- -<p>{{APIRef("DOM")}}</p> - -<p><code>MutationObserver</code>, geliştiricilere <a href="/en-US/docs/DOM">DOM</a>'da gerçekleşen değişimleri yakalanması ve bir tepki üretilmesi için bir yol sunar. <a href="/en-US/docs/DOM/Mutation_events">Dönüşüm (Mutasyon) Olayları</a>'nın yerini almak üzere tasarlanmış, DOM3 Events (Olaylar) belirlemesinde tanımlanmıştır.</p> - -<h2 id="Kurucu_İşlerlik_(İşlev)">Kurucu İşlerlik (İşlev)</h2> - -<h3 id="MutationObserver()"><code>MutationObserver()</code></h3> - -<p>DOM dönüşüm gözlemcilerini (mutation observer) yaratmak için kullanılır.</p> - -<pre class="syntaxbox">new MutationObserver( - function geriyeCagri -); -</pre> - -<h6 id="Yönergeler_(Parametreler)">Yönergeler (Parametreler)</h6> - -<dl> - <dt>geriyeCagri</dt> - <dd>Her DOM dönüşümünde çağrılacak işlerliktir. Gözlemci, bu işlerliği iki yönergeyle çağıracaktır. İlki, {{domxref("MutationRecord")}} cinsinden nesneleri barındıran bir dizi; ikincisi <code>MutationObserver</code>'ın geçerli olan örneğidir.</dd> -</dl> - -<h2 id="Nesne_İşlerlikleri">Nesne İşlerlikleri</h2> - -<table class="standard-table"> - <tbody> - <tr> - <td><code>void <a href="#observe()">observe</a>( {{domxref("Node")}} hedef, <a href="#MutationObserverInit">MutationObserverInit</a> ayarlar );</code></td> - </tr> - <tr> - <td><code>void <a href="#disconnect()">disconnect</a>();</code></td> - </tr> - <tr> - <td><code>Array <a href="#takeRecords()">takeRecords</a>();</code></td> - </tr> - </tbody> -</table> - -<div class="note"> -<p><strong>Anımsatma</strong>: Hedefin {{domxref("Node")}} diye belirtilen cinsi, <a href="https://nodejs.org/en/">NodeJS</a> ile karıştırılmamalıdır..</p> -</div> - -<h3 id="observe()"><code>observe()</code></h3> - -<p>Belirtilen DOM düğüm noktasının (node) yapısında meydana gelen değişimlerin bildirilebilmesi için <code>MutationObserver</code> nesnesini kaydettirir.</p> - -<pre class="syntaxbox">void observe( - {{domxref("Node")}} hedef, - <a href="#MutationObserverInit"><code>MutationObserverInit</code></a> ayarlar -); -</pre> - -<h6 id="Yönergeler">Yönergeler</h6> - -<dl> - <dt><code>hedef</code></dt> - <dd>DOM yapısındaki dönüşümlerin gözleneceği, {{domxref("Node")}} sınıfında bir DOM düğüm noktasıdır.</dd> - <dt><code>ayarlar</code></dt> - <dd>Hangi dönüşümlerin bildirileceğini belirten bir <a href="#MutationObserverInit"><code>MutationObserverInit</code></a> sınıfı nesnesidir.</dd> -</dl> - -<div class="note"><strong>Anımsatma:</strong> Bir DOM ögesine (element) gözlemci atamak tıpkı addEventListener ile bir olay belirtmek gibidir. Eğer aynı gözlemciyi aynı geriye çağrı (callback) işlerliğiyle birden fazla kez aynı ögeye atarsanız dönüşümlerde işlerlik ikişer-üçer kez çağrılmaz. Tek bir kez gerçekleşir. Fakat aynı gözlemciyi aynı ögeye farklı geriye çağrı işlerlikleriyle atarsanız bu durumda her dönüşümde belirtilen tüm geriye çağrı işlerlikleri yürütülür.</div> - -<h3 id="disconnect()"><code>disconnect()</code></h3> - -<p><code>MutationObserver</code> nesnesinin DOM dönüşümlerinden haber almasını durdurur. <a href="#observe()"><code>observe()</code></a> işlerliği çağrılıncaya dek, nesnenin geriye çağrı (callback) işlerliği, DOM dönüşümlerinde çağrılmaz.</p> - -<pre class="syntaxbox">void disconnect(); -</pre> - -<h3 id="takeRecords()"><code>takeRecords()</code></h3> - -<p><code>MutationObserver</code> nesnesinin kayıt kuyruğunda tuttuğu kayıtları elde etmeye ve kuyruğu boşaltmaya yarar.</p> - -<pre class="syntaxbox">Array takeRecords(); -</pre> - -<h6 id="Döndürülen_değer">Döndürülen değer</h6> - -<p>{{domxref("MutationRecord")}} nesnelerinden oluşmuş bir dizidir.</p> - -<h2 id="MutationObserverInit"><code>MutationObserverInit</code></h2> - -<p><code>MutationObserverInit</code> aşağıdaki niteliklerin tanımlandığı nesnedir.</p> - -<div class="note"><strong>Anımsatma:</strong> En azından <code>childList</code>, <code>attributes</code> veyâ <code>characterData</code> nitelikleri <code>true</code> olarak belirtilmelidir. Tersi durumda, "Geçersiz veyâ hatalı bir metin belirtildi. (An invalid or illegal string was specified)" hatasıyla karşılaşılabilir.</div> - -<table class="standard-table"> - <tbody> - <tr> - <td class="header">Nitelik</td> - <td class="header">Açıklama</td> - </tr> - <tr> - <td><code>childList</code></td> - <td>Eğer <code>true</code> olarak belirtilirse DOM öğesinde gerçekleştirilen öge veyâ düğüm noktası eklemeler-çıkarmalar gözlenir. Metin düğüm noktaları (text node) da bunun içerisindedir.</td> - </tr> - <tr> - <td><code>attributes</code></td> - <td>Eğer <code>true</code> olarak belirtilirse hedef ögenin niteliklerinde ortaya çıkan değişiklikler gözlenir.</td> - </tr> - <tr> - <td><code>characterData</code></td> - <td>Eğer <code>true</code> olarak belirtilirse hedef ögenin verisindeki değişimler gözlenir.</td> - </tr> - <tr> - <td><code>subtree</code></td> - <td>Eğer <code>true</code> olarak belirtilirse hedef ögenin ve altögelerinin dönüşümleri gözlenir.</td> - </tr> - <tr> - <td><code>attributeOldValue</code></td> - <td>Eğer <code>true</code> olarak belirtilirse niteliğin değişimden önceki değeri de kayıt altına alınır.</td> - </tr> - <tr> - <td><code>characterDataOldValue</code></td> - <td>Eğer <code>true</code> olarak belirtilirse ögenin verisinin değişimden önceki değeri de kaydedilir.</td> - </tr> - <tr> - <td><code>attributeFilter</code></td> - <td>Eğer tüm niteliklerin gözlenmesi gerekmiyorsa gözlenmesi istenen niteliklerin adlarının bir dizisi bu niteliğe atanır.</td> - </tr> - </tbody> -</table> - -<h2 id="Örnek_Kullanım">Örnek Kullanım</h2> - -<p>Aşağıdaki örnek <a class="external" href="http://hacks.mozilla.org/2012/05/dom-mutationobserver-reacting-to-dom-changes-without-killing-browser-performance/" rel="freelink">bu blog gönderisinden</a> alınmıştır. Ancak açıklamalar ve değişken adları değiştirilmiştir.</p> - -<pre class="brush: js">// Hedef DOM ögesini seç. -var nHedef = document.getElementById('bir-kimlik-degeri'); - -// Bir gözlemci yarat. -var nGozlemci = new MutationObserver(function(nDonusumler) { - - // Öge dönüştüğünde, tüm dönüşümleri dolaş. - nDonusumler.forEach(function(nDonusum) { - - // Sıradaki dönüşümü komut satırı ekranına yazdır. - console.log(nDonusum.type); - - }); - -}); - -// Gözlemcinin ayarlarını belirle. -var nAyarlar = { attributes: true, childList: true, characterData: true }; - -// Gözlemciyi belirlenen ayarlarla belirtilen ögeye ata. -nGozlemci.observe(nHedef, nAyarlar); - -// Daha sonraları, aşağıdaki komutla gözlemleme durdurulabilir. -nGozlemci.disconnect(); -</pre> - -<h2 id="Ayrıca_Okuyunuz">Ayrıca Okuyunuz</h2> - -<ul> - <li><a class="external" href="http://updates.html5rocks.com/2012/02/Detect-DOM-changes-with-Mutation-Observers" rel="freelink">Kısa bir inceleme</a></li> - <li><a class="external" href="http://hacks.mozilla.org/2012/05/dom-mutationobserver-reacting-to-dom-changes-without-killing-browser-performance/" rel="freelink">Daha ayrıntılı bir tartışma</a></li> - <li><a class="external" href="http://www.youtube.com/watch?v=eRZ4pO0gVWw" rel="freelink">Chromium geliştiricisi Rafael Weinstein'ın ekran vidyosu</a></li> - <li><a class="external" href="http://code.google.com/p/mutation-summary/" rel="freelink">Dönüşüm özet kütüphanesi</a></li> -</ul> - -<h2 id="Specifications" name="Specifications">Belirlemeler</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Belirleme</th> - <th scope="col">Durum</th> - <th scope="col">Yorum</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('DOM WHATWG', '#mutationobserver', 'MutationObserver')}}</td> - <td>{{ Spec2('DOM WHATWG') }}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Tarayıcı_Desteği">Tarayıcı Desteği</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Durum</th> - <th>Chrome</th> - <th>Edge</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Temel destek</td> - <td>18 {{property_prefix("-webkit")}}<br> - 26</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop(14)}}</td> - <td>11</td> - <td>15</td> - <td>6.0 {{property_prefix("-webkit")}}<br> - 7</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Durum</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Edge</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Temel destek</td> - <td>4.4</td> - <td>18 {{property_prefix("-webkit")}}<br> - 26</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoMobile(14)}}</td> - <td>11 (8.1)</td> - <td>15</td> - <td>6 {{property_prefix("-webkit")}}<br> - 7</td> - </tr> - </tbody> -</table> -</div> |