dHTML

Giriş-DOM CSS Katman DOM Olaylar

Dinamik HTML

26 Kasım 2007

W3C DOM Düzey 2 Olayları

Olayların çalışması konusunda bir fikriniz oldu. Şimdi W3C DOM Düzey 2'de durum nedir ona bakalım. Buradaki adreste ayrıntılı bilgi vardır:

DOM Olayları (Events)

Yakalama ya da Fokurdama (Capture or Bubble)?

DOM'un bir sayfada nasıl siradüzensel yapıda olduğunu anımsayıp olaylara ne olduğuna bakalım:

O düğümde olay olur ve olay yakalama işlemi o düğüm için geçerli olur
Düğümde olay gerçekleşir, olay yakalama işlemini bu noktaya demirleyip sıradüzensel yapı içinde aşağıya doğru ilerlerken her geçtiği düğümde başkası kalmayıncaya dek bu olayı tetiklemeyi kaldırır.
Olay düğümde oluşur, o düğüm için olay yakalama işlemini kapatır ve sıradüzensel yapı içinde başkası kalmayıncaya dek yukarıya çıkarak işlemleri tamamlar.

Let's take a look at an example page:

Şimdi aşağıdaki örneğe bakalım:

<html>
     <head>
     </head>
       <body>
            <div id="div1">
                 <span id="span1">
                    Click Me
               </span>
            </div>
       </body>
</html>

Ve şimdi olayın üç yöne gidişini gösteren çizime bakalım:

1. Olay içinde bulunduğu düğümde etkindir

2. Yakalama - bir düğümde olay olduğunda ve en üst noktadan aşağıya doğru tümünü ateşlediğinde.

3. Fokurdama - Bir düğümde olay olduğunda ve olayın olduğu düğümden yukarı doğru tümünü ateşlediğinde

Yöntemleri Anlama

Bir olay oluştuğunda üç değişik biçimde geliştiğini biliyoruz. Şimdi bazı kodlamalara bakalım.

"addEventListener(eventType, Function, useCapture)" Bir düğümden çalıştırılacak olayı ekler.

İlk parametre ne tür olayın algılanacağını söyler. Unutulmamaı gereken konu burada alıştığımız "on" önekini kullanmamamızdır. Yani "onclick" yerine küçük harflerle "click" kullanılır.
Olayda kullanılacak işlev ikinci parametrede belirtilir.
Son parametre mantıksal doğru/yanlış değerini kabul eder. Bu değer "true" (doğru) ise olay yakalanacaktır. Bunun anlamı en üst demirlenme noktasından içeriye doğru ilerleyecektir. Eğer "false" (yanlış) ise olay fokurdar. Bunun anlamı en üst düğüme doğru olay ilerleyecektir.

"removeEventListener(eventType, Function, useCapture)" Çalıştırılacağı düğümden bu olay dinleme işlemini kaldırmak için kullanılır. Unutulmaması gereken en önemli nokta tüm parametreler "addEventListener()" işlemindekiyle aynı olmalıdır. Eğer "addEventListener()" işleminde useCapture değerini "false" olarak atamışsanız, removeEventListener() işleminde buraya "true" yazarsanız silme işlemi çalışmaz...

"stopPropagation()" Olayın dökümanın diğer yerlerinde dolanmasını engeller. Örneğin olayın yakalanmasıni ya da fokurdamasını engeller.

DOM Örnekleri

DOM yazılımı için bir tablo üzerinde çalışacağız. Bir tablo yaratacağız. Hücresi tıklandığında rengi değişecek ve "ışıldayacak". Tablonun bir hücresi seçildiğinde görünen bir form çıkacak ve yapabileceğimiz işlemleri belirtecek. Yeni satır ekleme, seçilen satırı silme, o anki satırı kopyalama, kopyalanan satırı yapıştırma ve satırın yazısını değiştirme. Buradaki örnek Örnek 12 yalnız NS 6 ve Mozilla tarayıcılarında çalışır.

Örnek Kod

Şimdi parç parça bu kodu inceleyelim

<script language="javascript" type="text/javascript">
    var selectedTD = null;
    var copiedTD = null;
    var table, tbody, tr, td, text;

Bu kod kullanacağımız küresel değişkenlerimizi yaratır. "selectedTD" kullanıcının seçtiği tablo hücresini saklar. "copiedTD" Kullanıcının kopyaladığı tablo hücresini saklar. "document.createElement()" işlemiyle yarattığımız değişik tablo bölümlerinin değerlerinin "table, tbody, tr, td, text" değişkenleri saklar.

Tablomnuzu yaratalım

function createNewRow(txt){
      tr = document.createElement("tr");
      td = document.createElement("td");

      td.setAttribute("width","300");
      td.setAttribute("bgColor","purple");
      td.setAttribute("style","color:white;font-family:Arial;text-align:center");
      td.addEventListener("click", 
  clickTD, false);
      text = document.createTextNode(txt);
      td.appendChild(text);
      tr.appendChild(td);
    }

Bu işlev yeni satır yaratır ve değerlerini ilgili değişkenlerde saklar. Bu işlev, parametresinden gelen yazıya göre bir yazı düğümü yaratır. It creates a textNode with the text passed in its sole argument. Also, it assigns some attributes to the table cell tag; the bgColor Tablo hücresinin niteliklerine de değerler atar. Aslında "bgColor" bu yazılımda oldukça çok kullanılan bir niteliktir. Varsayılan değeri seçilmediğinde pembedir (seçilince parlak mavi olacaktır). Ek olarak bu yeni yaratılmış tablo hücrelerine "Olay Dinleyici" eklemekteyiz. Böylece hücrelerden birini tıklayınca "clickTD" işlevini çalıştıracağız.

    div = document.createElement("div");
    div.setAttribute("align","center");
    table = document.createElement("table");

    table.setAttribute("border","3");
    div.appendChild(table);
    tbody = document.createElement("tbody");

    table.appendChild(tbody);
    for(i=0;i<5;i++){
      createNewRow("This 
  is the text in cell "+parseInt(i+1)+".");

      tbody.appendChild(tr);
    }
    document.body.appendChild(div);

Kodun bu bölümü "align" niteliği ortalanmış (center) bir "div" öğesi yaratır. Aynı zamanda bir "table" öğesi "div" öğesinin çocuğu olarak yaratılır. Daha sonra "tbody" öğesi "table" öğesinin çocuğu olarak yaratılır. Artık yeni satırlar "tbody" öğesinin altına eklenecektir. Son olarak "div" öğesi "body" öğesinin arkasına eklenir. Böylece tamamı aşağıdaki HTML kodunu üretmeiş olur.

<body>

    <div align="center">

      <table border="3">

  <tbody>

    <tr>

      <td width="300" 
  bgcolor="purple" style="color:white;font-family:Arial;text-align:center">

  This is the text in cell 1.

      </td>

    </tr>

    <tr>

      <td width="300" 
  bgcolor="purple" style="color:white;font-family:Arial;text-align:center">

  This is the text in cell 2.

      </td>

    </tr>

    <tr>

      <td width="300" 
  bgcolor="purple" style="color:white;font-family:Arial;text-align:center">

  This is the text in cell 3.

      </td>

    </tr>

    <tr>

      <td width="300" 
  bgcolor="purple" style="color:white;font-family:Arial;text-align:center">

  This is the text in cell 4.

      </td>

    </tr>

    <tr>

      <td width="300" 
  bgcolor="purple" style="color:white;font-family:Arial;text-align:center">

  This is the text in cell 5.

      </td>

    </tr>

  </tbody>

      </table>

    </div>

  </body>

clickTD işlevi

Şimdi bir başka kod parçasını inceleyelim:

function clickTD(){
  if(selectedTD) 
      selectedTD.setAttribute("bgColor","purple");
      if(selectedTD != this){
          selectedTD = this;
          selectedTD.setAttribute("bgColor","blue");
          showForm();
      }else{
          selectedTD = null;
          hideForm();
      }
    }

Bu kod zor gelebilir ama göründüğü gibi değildir. Biri tablo hücresinde fareyi tıkladığında bu işlev çalışmaya başlar. Hücrenin art alan rengi değişerek hücre seçilmiş (etkinleştirilmiş) olur. Daha önce seçilmiş bir başka hücre varsa o hücrenin etkinleştirilmiş olması kaldırılır. (rengi yeniden pembeye döner). Hücre etkinleştirilince tablonun hemen altında bir form görüntülenir. Seçilmiş hücre yeniden tıklandığında etkinleştirilme kalkar ve görüntülenmiş form kaybolur.

Öncelikle "clickTD" bir işlev olarak tanımlanır. Eğer hücre daha önce seçilmişse, etkinliği kaldırılır ve art alan rengi diğer hücrelerinki gibi "pembe" olur. "selectedTD" değişkenine kullanıcının tıkladığı tablo hücresinin değerini atar. Tıklanan hücrenin rengini de "mavi" yapar. Bundan sonra "showForm" işlevi çalıştırılır. Birazdan incelenecek olan form bu işlevle görüntülenir. Eğer tıklanan tablo hücresi daha önce seçilmişse, şimdi seçilmişlik kaldırılmak istenmektedir. Bu durumda "selectedTD" değeri "null" yapılır ve "form" "hideForm" işleviyle saklanır.

Form

Daha çok ilerlemeden "Form" kodunu inceleyelim::

<form style="display:none">
    <div align="center">
      <input type="button" 
          value="Delete" onclick="deleteR()">
          &nbsp; <font 
               face="Arial, Helvetica, sans-serif">
      <input type="button" 
          value="Insert New Row"
               onClick="insertNR()">
      <input type="button" 
          value="Copy Cell"
               onClick="copyCell(selectedTD)">
      <input type="button" 
          value="Paste Cell"
               onClick="pasteCell()">
      <br>
      Change Text:
      </font> 
      <input name="newTextInput" 
          type="text" size="27">
      <input type="button" 
          value="Change Text"
          onclick="changeText(document.forms[0].newTextInput.value)">
    </div>
  </form>

Şimdi bu formu gösteren ve saklayan işlerleri inceleyelim. Form öncelikle (sayfa yüklenince) saklıdır. İşlevlerimiz:

function hideForm(){
    document.getElementsByTagName("form").item(0).setAttribute("style","display:none");
 }

function showForm(){
    document.forms[0].setAttribute("style","display:block");
 }

"hideForm" işlevi formu saklar, "showForm" işlevi formu görüntüler. form öğesine her iki biçimde de ulaşmanın nasıl olduğu görülmüş olur.

Seçilen tablo hücresinde işlerin nasıl yapıldığına bakalım.

Yeni Satır Ekle

  function insertNR(){
      if(document.forms[0].newTextInput.value=="") 
           createNewRow("This is the new table cell");
      else createNewRow(document.forms[0].newTextInput.value);
      tbody.insertBefore(tr, 
               selectedTD.parentNode.nextSibling);
               window.resizeBy(-10,-10);
               window.resizeBy(10,10);
    }

Bu işlev yeni satır oluşturur. Eğer "newTextInput" giriş alanı boşsa, yeni tablo hücresini soysal yazıyla üretir. Aksi halde "next" değeri "newTextInput" içinde olacak biçimde yeni hücreyi üretir. Üretilen hücre seçilenin peşine eklenir. Unutmayın ki "selectedTD.parentNode" "td" öğesinin bulunduğu "tr" öğesini gösterir. "selectedTD.parentNode.nextSibling" ise seçili öğeden sonra gelen ilk "tr" öğesini belirtir. Böylece yenisi seçilenden selectedTD.parentNode sonra eklenebilir. O da selectedTD.parentNode.nextSibling'dan öncekidir. Burada kodun sonunda yer alan "window.resizeBy()", birden çok satır eklemek ya da yapıştırmak isteyince çıkan Mozilla hatasını geçiştirmek için kodlanmıştır.

Hücre Yazısını Değiştir

  function changeText(txt){
     if(txt="")return;
     selectedTD.firstChild.nodeValue = txt;
  }

Bunun yaptığı document.forms[0].newTextInput içindeki veriyi parametre olarak geçirmektir (txt). Ama document.forms[0].newTextInput.value değeri boşsa, hiçbir şey yapmaz.

Hücre Kopyala

  function copyCell(cellToCopy){
      copiedTD = selectedTD.cloneNode(true);
      copiedTD.setAttribute("bgColor","purple");
      copiedTD.addEventListener("click", clickTD, false);
    }

Seçilen hücreyi kopyalar. Seçilen hücre zaten selectedTD içinde olduğundan aynı özellikleri olan copiedTD gerekmez. Seçilen etkinleştirilmiştir ama kopyalanın da etkinleştirilmesi gerekmediğinden bu özellik kaldırılmıştır. Son olarak kopyalanan bir düğümün EventListener özellikleri kopyalanmadığından yeni düğüm için bunları ayarlamak gerekir.

Hücreyi Yapıştır

  function pasteCell(){
   if(!copiedTD) return;
   tr = document.createElement("tr");
   tr.appendChild(copiedTD);
   tbody.insertBefore(tr, 
          selectedTD.parentNode.nextSibling);
   window.resizeBy(-10,-10);
   window.resizeBy(10,10);
   copyCell(copiedTD);
   }

Önce hücrenin kopyalanıp kopyalanmadığını saptar. Eğer kopyalanmamışsa işlev son bulur. Ama kopyalanmışsa işlev devam eder. Yeni bir "tr" öğesi ekler ve ona "copiedTD" içindeki "td" öğesini ekler. Ve yeni tablo satırını hemen seçilenin altına ekler. Daha sonra Mozilla düzeltme koduna yer verilmiştir.

Burada çekirdek DOM (temel DOM) kullandık, ama DOM buradakiler yerine hazır işlevleri vardır. "insertRow" ve "deleteRow" bunlardan bazılarıdır. Bu yöntemler bazı öğeler için geçerlidir. Konuya ilişkin WEB sayfası DOM-HTML ve burada anlatılanların (tablolar gibi) yer aldığı belgeler DOM-HTML: TABLES altında bulunabilir.