Javascript’de Event ve Etki Alanı(Scope)

Eğer javascript’de kendi framework’ünüzü geliştiriyorsanız muhtemel karşılaşacağınız sorunlardan bir tanesi de cross browser -her browser’da çalışabilecek- bir event sistemidir. Çünkü gerek Mozilla’da ve gerekse Internet Explorer’da event fonksiyonları ve buna bağlı olarak gelişen sonuçları farklı farklıdır. Ben bunların hangisinin haklı veya başarılı olduğundan bahsetmeyeceğim.

Bu yazımızda kendi oluşturduğunuz bir html nesnesine nasıl eventlar tanımlayabiliyoruz ve cross browser olarak nasıl çalıştırabiliriz, onu görmeye çalışacağız. Ayrıca event listener’daki scope problemi içinde bazı çözümler getireceğiz.

Halen, geliştirmekte olduğum framework’de de bir çok event sorunu ile karşılaştım. En başta, browser’dan browser’a fonksiyonların farklı olması, bunları tek bir çatı altında toplama gereğini hissettirdi. Bu nedenle IE’de ve Mozilla’da çalışabilen tek bir komut yapmalıydım.

Å?imdi dilerseniz, IE ve Mozilladaki farklılıklara göz atalım. Aşağıda IE’de ve Mozilla’da bir nesneye nasıl event listener eklendiğini görmektesiniz.

var mybutton = document.getElementById("MyButton");
//Aşağıdaki satır IE için
mybutton.attachEvent('onclick', mybutton_onclick);
//Aşağıdaki satır ise Mozilla için
mybutton.addEventListener('click', mybutton_onclick, false);
function mybutton_onclick(e)
{
    alert ("e = " + e);
    alert ("'this', window objesi mi? = " + (this === window));
}
<input type=&quot;Button&quot; id=&quot;MyButton&quot; />

Bu haliyle iki browser’da da hata verecektir. IE ve Mozilla’da ayrı ayrı bu kodları denediğinizde, IE’de addEventListener ve Mozilla’da attachEvent metodlarının tanımlı olmadığını göreceksiniz.. Aynı şekilde, IE’de (Mozilla için olan satırı sildikten sonra…) bu kodları çalıştırdığınızda ve "MyButton" isimli button’a tıkladıktan sonra "e"’nin tanımlı olmadığını göreceksiniz. IE7′de ise tanımlı olduğunu göreceksiniz. Normalde Mozilla’da ve IE7′de "e" parametresi ile event’ın nesnesi gelecektir. Ve siz de bu nesnenin özelliklerini kullanarak event’a ait bilgileri alabileceksiniz. Mesela hangi noktalara tıklandığını öğrenebilmek için e.clientX ve e.clientY gibi özellikleri alabileceksiniz. Ama IE6 ve öncesinde bunun yerine window.event gibi bir nesneden bunu sağlayabiliyorsunuz.

Yine, mybutton_onclick fonksiyonunda this ifadesi IE’de window‘u gösterirken, Mozillada event’a sahip olan nesneyi, yani bu örnekte "mybutton" nesnesini gösterir. İnternet üzerinde araştırma yaptığınızda bununla ilgili bir çok fonksiyon görebileceksiniz. Ama benim gibi kendi görsel nesnelerinizi tasarlıyorsanız, bulacağınız bu fonksiyonlar pek de işe yaramayacaktır. Özellikle etki alanı(scope) noktasında sorunlar yaşayacaksınız.

Mesela bütün nesnelerinizi türettiğiniz bir fonksiyon olsun ve siz buna event ekleyen bir metod eklemek istiyorsunuz. Bu durumda, event listener (yukarıdaki örnekte mybutton_onclick) içinde this işaretçisinin daima sizin nesnenizi göstermesini istersiniz. Ama IE’de bu işaretçi window‘u gösterirken, Mozilla’da da html nesnesini gösteriyordu.

İşte yukarıda saydığımız gibi sorunları çözebilmek için aşağıdaki gibi iki metod geliştirdim. Nesnemizin ismini MyControl olarak kabul edelim. Ve bu MyControl içinde bir metod(getElement) gerçek html nesnesini versin.

/**
 * Event listener ekler.
 * Event tetiklendiğinde fonksiyona event'ın nesnesini parametre olarak yollar.
 * @param {String} type click, mouseover, keyup vs...
 * @param {Function} listener çalıştırılacak olan fonksiyon
 */
MyControl.prototype.addEventListener = function(type, listener)
{
    var element = this.getElement(); //nesnenizdeki gerçek html elamanını verir.
    var self = this;
    var scopeFunction = function(e){
        return listener.call(self, e);
    };
    this.Events[type + listener] = function(e){
        if (typeof(e) !== "undefined")
            scopeFunction(e);
        else
            scopeFunction(window.event);
    };
    if (document.attachEvent) //IE5+
        element.attachEvent('on' + type, this.Events[type + listener]);
    else//Mozilla, Safari, vs..
        element.addEventListener(type, this.Events[type + listener], false);
};

/**
 * @param {String} type
 * @param {Function} listener
 */
MyControl.prototype.removeEventListener = function(type, listener)
{
    var element = this.getElement();
    if (document.detachEvent)
        element.detachEvent('on' + type, this.Events[type + listener]);
    else
        element.removeEventListener(type, this.Events[type + listener], false);
    this.Events[type + listener] = null;
};

Bu metodlar MyControl isimli bir nesneniz olduğu varsayımı ile yazılmıştır. Aynı şekilde getElement() metodu da div, p, table gibi gerçek html nesnelerini dönderiyor. Bu metodları kendinize göre değiştirebilirsiniz.

Eğer sadece istediğiniz bir etki alanında event ekleyen basit bir fonksiyon yapmak isteseydik, yani nesne, sınıf olayına girmek istemeseydik, yukarıdaki fonksiyonları şu şekilde değiştirmemiz gerekecekti:

function addEventListener (element, type, listener, scope)
{
    var scopeFunction = function(e){
        return listener.call(scope, e);
    };
    element[type + listener] = function(e){
        if (typeof(e) !== "undefined")
            scopeFunction(e);
        else
            scopeFunction(window.event);
    };
    if (document.attachEvent) //IE5+
        element.attachEvent('on' + type, element[type + listener]);
    else//Mozilla, Safari, vs..
        element.addEventListener(type, element[type + listener], false);
};

function removeEventListener (element, type, listener)
{
    if (document.detachEvent)
        element.detachEvent('on' + type, element[type + listener]);
    else
        element.removeEventListener(type, element[type + listener], false);
    element[type + listener] = null;
};

Ekstradan element ve scope diye iki parametre daha ekledik. "element" parametresi, div, p, button gibi html elementleri. Scope ise listener’ın çalıştırılacağı kapsama alanı. Peki bunu nasıl kullanacağız? Cevabı aşağıdaki küçük örnekte:

var mybutton = document.getElementById("MyButton");
addEventListener(mybutton, "click", mybutton_onlick, mybutton_onlick);
function mybutton_onlick(e)
{
    alert(this);
}

Scope parametresine istediğiniz nesneyi ve fonskiyonu girebilirsiniz. Bu durumda button’a tıklandığında this işaretçisi belirtmiş olduğunuz nesne ya da fonksiyon olacaktır. Bu örneğimizde scope olarak mybutton_onclick fonksiyonunu seçtik. İsterseniz buraya, mybutton, window, document gibi nesneleri de girebilirsiniz. Burası size kalmış.

Hataları bildirirseniz sevinirim. Yorumlarınızı bekliyorum.