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, 250 insertions, 0 deletions
diff --git a/files/tr/web/api/mutationobserver/index.html b/files/tr/web/api/mutationobserver/index.html new file mode 100644 index 0000000000..33b181344b --- /dev/null +++ b/files/tr/web/api/mutationobserver/index.html @@ -0,0 +1,250 @@ +--- +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> |