View Sidebar
jQuery ve Olaylar (Events)

jQuery ve Olaylar (Events)

Kasım 18, 2012 12:589 yorum

Selamlar. Bu hafta bir çok programlama dilinde büyük rol oynayan events yani olaylar konusunu işleyeceğim. Kullanıcı ile iletişime geçen bir sistem yapmak istiyorsak, olaylar bize büyük fayda sağlayacaklardır. Bir kaç ufak örnek vermek istersek bunlar, bir linke, butona vs. herhangi bir DOM elemente tıklandığında kullanıcıya mesaj kutusu göstermek, form içerisinde enter gibi formu gönderme görevine sahip bir tuşa basılmasını engellemek olabilir.

Lafı daha fazla uzatmadan bu haftaki konumuza başlayalım.

Event Nesnesi

JQuery’nin olaylar sistemi, event nesnesini W3C standartlarına göre normalleştirir. Normalleştirmeden kasıt, çarpraz tarayıcı kullanımına uygunluk olacaktır. Olay nesnesinin olay işleyicisinde tanımlı olması garanti edilmiştir. Gerçek olaydaki bir çok özellik kopyalanıp, normalleştirildikten sonra event nesnesine aktarılmıştır. JQuery dökümantasyondaki olan ve birebir çevirdiğim bu garip giriş cümlesinden sonra vereceğim örnekler, daha açıklayıcı olacaklardır.

jQuery.Event Constructor

jQuery.Event kurucusu, tetikleyici çağırarak kullanılabilir. “new” operatörünün kullanımı keyfidir.

// new operatörü kullanmadan yeni bir event nesnesi oluşturduk.
   var e = jQuery.Event("click");

// Yapay tıklama olayını tetikledik
   jQuery("body").trigger( e );

JQuery 1.6 ile birlikte event nesnesi oluştururken, parametre olarak başka bir nesne geçebilirsiniz.

  var e = jQuery.Event("keydown", { keyCode: 64 });

// Tuş kodu 64 olan tuş için sanal basma olayı oluşturduk
  jQuery("body").trigger( e );

Event Özellikleri

JQuery aşağıdaki özellikleri çapraz tarayıcı kullanımında sorunsuz olarak kullanmak üzere normalleştirir.

  • target
  • relatedTarget
  • pageX
  • pageY
  • which
  • metaKey

Yeni bir event nesnesi oluşturduğunuzda aşağıdaki özelliklerde bu nesneye kopyalanacaktır, ancak nesnenin türüne göre bazılarının değerleri “undefined” olarak tanımlanabilir.

altKey, bubbles, button, cancelable, charCode, clientX, clientY, ctrlKey, currentTarget, data, detail, eventPhase, metaKey, offsetX, offsetY, originalTarget, pageX, pageY, prevValue, relatedTarget, screenX, screenY, shiftKey, target, view, which

event.type

Olay tipini belirtir.

$("a").click(function(event) {
  alert(event.type); // "click"
});

Sonucumuz “click” olacaktır.

event.namespace

Yürürlükteki eventin hangi namespace’e etki ettiğini gösterir.

Örnek uygulama -> http://jsfiddle.net/icntfan/zkLGC/

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>

<button>Göster: event.namespace</button>
<p></p>

<script>
$("p").bind("test.birseyler", function(event) {
  alert( event.namespace );
});
$("button").click(function(event) {
  $("p").trigger("test.birseyler");
});
</script>

</body>
</html>​

event.which

Fare ve klavye olayları için neye basıldığını gösterir.
Örnek uygulama -> http://jsfiddle.net/icntfan/dR5CM/

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>

<input id="whichkey" value="birşeyler yaz veya tıkla">
<div id="log"></div>
<script>$('#whichkey').bind('keydown mousedown',function(e){
  $('#log').html(e.type + ': ' +  e.which );
});  </script>

</body>
</html>​

Input elementine odaklanmışken, basılan tuşun tuş kodunu ve yine fare ile tıklandığında faredeki tuşların kodlarını ekrana bastırıyoruz.

event.target

Yürürlükteki olayın hangi elemente uygulandığını belirtir.

Örnek uygulama -> http://jsfiddle.net/icntfan/y9T9K/

<!DOCTYPE html>
<html>
<head>
  <style>
span, strong, p {
  padding: 8px; display: block; border: 1px solid #999;  }
    </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>

<div id="log"></div>
<div>
  <p>
    <strong><span>TIKLA</span></strong>
  </p>
</div>
<script>$("body").click(function(event) {
  $("#log").html("Şuraya tıklandı: " + event.target.nodeName);
});  </script>

</body>
</html>​

event.currentTarget

Bu özelliği açıklamadan önce, anlattıklarımın daha açıklayıcı olması bakımından bir tanım yapmak istiyorum.

JQuery Event Bubbling Nedir?

Javascript ile bir olay oluştuğunda, bu olay DOM ağacında en üste kadar ulaşır. Örneğin iç içe 2 tane div tagı var ve 2 div tagının da click eventleri var. İçteki div elemanına tıkladığınız zaman, hem içteki div in event-handler fonksiyonu hem de dıştaki div elemanının event-handler fonksiyonu tetiklenir.

İşte bu event bubbling esnasında geçerli olan elementi belirtir.

$("p").click(function(event) {
  alert( event.currentTarget === this ); // true döndürecektir.
});

event.timeStamp

1 Ocak 1970 tarihinden, tarayıcı olayı yarattığı ana kadar geçen süreyi milisaniye cinsinden verir.

Örnek uygulama -> http://jsfiddle.net/icntfan/566fW/

<!DOCTYPE html>
<html>
<head>
  <style>
div { height: 100px; width: 300px; margin: 10px;
      background-color: #ffd; overflow: auto; }
</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>

<div>Tıkla.</div>
<script>
var last, diff;
$('div').click(function(event) {
  if ( last ) {
    diff = event.timeStamp - last
    $('div').append('son tıklamadan itibaren geçen milisaniye: ' + diff + '<br/>');
  } else {
    $('div').append('Bİr daha tıkla.<br/>');
  }
  last = event.timeStamp;
});
</script>

</body>
</html>​

İki tık arasında geçen süreyi buluyoruz.

event.result

Geçerli olaydan dönen değeri tanımlanmış olması şartıyla gösterir.
Örnek uygulama -> http://jsfiddle.net/icntfan/jWAwH/

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>

<button>Göster: event.result</button>
<p></p>

<script>
$("button").click(function(event) {
  return "selam";
});
$("button").click(function(event) {
  $("p").html( event.result );
});
</script>

</body>
</html>​

Uygulamada return “selam”; ile click olayından değer döndürüyoruz ve bu değeri event.result ile ekrana bastırıyoruz.

event.relatedTarget

Eğer varsa, olayın içerdiği diğer elementtir. Şöyle ki:
Örnek uygulama -> http://jsfiddle.net/icntfan/seYCF/

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>

<div style="height: 100px; border: 1px solid gray;">
    <a href="#">Bu yazının üstüne geldikten sonra fareyi aşağıya sürükleyiniz</a>
</div>

<script>
$("a").mouseout(function(event) {
  alert(event.relatedTarget.nodeName); // "DIV"
});
</script>
</body>
</html>

Fare ile <a> elementinin üzerine geldikten sonra aşağıya doğru çektiğimizde, a elementi için mouseout olayı tetiklenecek ve bu aynı zamanda <div> elementine başlangıç olduğu için ekrana “DIV” uyarısı gelecektir.

event.pageX / event.pageY

event.pageX: Pencerenin sol kısmına göreceli olarak farenin konumu
event.pageY: Pencerenin üst kısmına göreceli olarak farenin konumu
Örnek uygulama -> http://jsfiddle.net/icntfan/kt6UG/

<!DOCTYPE html>
<html>
<head>
  <style>body {background-color: #eef; }
div { padding: 20px; }</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <div id="log"></div>
<script>$(document).bind('mousemove',function(e){
            $("#log").text("e.pageX: " + e.pageX + ", e.pageY: " + e.pageY);
}); </script>

</body>
</html>​

Dökümana eklenen mousemove olayı esnasında ekrana farenin koordinatlarını piksel cinsinden bastırıyoruz.

event.data

Event nesnesine geçilen verileri tutar.

Örnek uygulama -> http://jsfiddle.net/icntfan/gWgmb/

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>

<button> 0 </button>
<button> 1 </button>
<button> 2 </button>
<button> 3 </button>
<button> 4 </button>

<div id="log"></div>

<script>
var logDiv = $("#log");

for (var i = 0; i < 5; i++) {
  $("button").eq(i).on("click", {value: i}, function(event) {
    var msgs = [
      "button = " + $(this).index(),
      "event.data.value = " + event.data.value,
      "i = " + i
    ];
    logDiv.append( msgs.join(", ") + "<br>" );
  });
}
</script>

</body>
</html>​

For döngüsü içerisinde, i değişkeninin değerini .on() metoduna geçiyoruz ve bu sayede, geçerli olan iterasyon değeri korunmuş oluyor.

event.delegateTarget

JQuery olay işleyicisinin çağrıldığı yerdeki elementi belirtir.

$(".box").on("click", "button", function(event) {
  $(event.delegateTarget).css("background-color", "red");
});

CSS sınıfı box olan herhangi bir kutuya tıklandığı anda, hangi kutuya tıklandı ise, o kutunun arka planını kırmızı yapar.

event.preventDefault()

Eğer bu metot çağrıldıysa, yürürlükteki işlem gerçekleştirilmeyecektir.

Örnek uygulama -> http://jsfiddle.net/icntfan/NaAsu/

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>

<a href="http://ulviercan.com">ulviercan.com a git</a>
<div id="log"></div>

<script>
$("a").click(function(event) {
  event.preventDefault();
  $('<div/>')
    .append('varsayılan ' + event.type + ' olayı engellendi')
    .appendTo('#log');
});
</script>

</body>
</html>​

<a> elementinin tıklama olayında event.preventDefault(); kullanıyoruz ve bu bir sonraki işlem olan linki açma işlemini iptal ediyor.

event.isDefaultPrevented()

Geçerli olay için .preventDefault() metodu çağrılmış mı diye kontrol eder.

$("a").click(function(event){
  alert( event.isDefaultPrevented() ); // false uyarısı verir
  event.preventDefault();
  alert( event.isDefaultPrevented() ); // true uyarısı verir
});

İlk kısım “false” uyarısı verecektir. İkinci kısımda ise, event.preventDefault(); kullandığımız için “true” uyarısı verecektir.

event.stopPropagation()

Yukarıda tanımını yapmış olduğum “Event Bubbling” denen yapıyı engeller. İç elementlerin birinde olan olayı, atalarındaki olay işleyicilerinden uzak tutar.

$("p").click(function(event){
  event.stopPropagation();
  // bir şeyler yap
});

Tıklama olayındaki “Event Bubbling” i engeller.

event.isPropagationStopped()

Geçerli olan event için .stopPropagation() metodu çağrılmış mı diye kontrol eder.
Örnek uygulama -> http://jsfiddle.net/icntfan/vyfLV/

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>

  <button>bana tık at</button>
  <div id="stop-log"></div>

<script>

function propStopped(e) {
  var msg = "";
  if ( e.isPropagationStopped() ) {
    msg =  "çağrıldı"
  } else {
    msg = "çağrılmadı";
  }
  $("#stop-log").append( "<div>" + msg + "</div>" );
}

$("button").click(function(event) {
  propStopped(event);
  event.stopPropagation();
  propStopped(event);
});
</script>

</body>
</html>​

Uygulamada da görebileceğiniz üzere, yürürlükteki event için yapılan ilk kontrolde sonuç çağrılmadı çıkıyor. .stopPropagation() kullanıldıktan sonra sonuç çağrıldı çıkıyor.

event.stopImmediatePropagation()

.stopPropagation() metodunun yaptığı işe yani diğer olay işleyicilerini bubbling-up’tan korumanın yanında var olan bubbling-up işlemini de durdurur.

Örnek uygulama -> http://jsfiddle.net/icntfan/ThUZY/

<!DOCTYPE html>
<html>
<head>
  <style>
p { height: 30px; width: 150px; background-color: #ccf; }
div {height: 30px; width: 150px; background-color: #cfc; }
</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <p>paragraf</p>
<div>kısım</div>
<script>
$("p").click(function(event){
  event.stopImmediatePropagation();
});
$("p").click(function(event){
  // Bu fonksiyon çalışmayacaktır
  $(this).css("background-color", "#f00");
});
$("div").click(function(event) {
  // Bu fonksiyon çalışacaktır
    $(this).css("background-color", "#f00");
});</script>

</body>
</html>​

<p> elementi için kullandığımız event.stopImmediatePropagation(); metottan dolayı, tıklama olayımız çalışmayacaktır.

event.isImmediatePropagationStopped()

Geçerli objeye bağlı olay işleyicisi için, .stopImmediatePropagation() metodu çağrılmış mı diye kontrol eder.

Örnek uygulama -> http://jsfiddle.net/icntfan/PZtSh/

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>

  <button>bana tık at</button>
  <div id="stop-log"></div>

<script>

function immediatePropStopped(e) {
  var msg = "";
  if ( e.isImmediatePropagationStopped() ) {
    msg =  "çağrıldı"
  } else {
    msg = "çağrılmadı";
  }
  $("#stop-log").append( "<div>" + msg + "</div>" );
}

$("button").click(function(event) {
  immediatePropStopped(event);
  event.stopImmediatePropagation();
  immediatePropStopped(event);
});
</script>

</body>
</html>​

.immediatePropStopped() çağrıldıktan sonra çağrıldı şeklinde uyarıyı alıyoruz.

Fare Olayları

.click()

JavaScript’teki tıklama olayında olacakları belirler veya tıklama olayını gerçekleştirir. Şöyle ki:

Örnek uygulama -> http://jsfiddle.net/icntfan/pgCn5/

<!DOCTYPE html>
<html>
<head>
  <style>
  p { color:red; margin:5px; cursor:pointer; }
  p:hover { background:yellow; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <p>Birinci Paragraf</p>
  <p>İkinci Paragraf</p>
  <p>Üçüncü Paragraf</p>

    <div>Bana tıklarsan bütün p elementleri kapanır.</div>
<script>

    $("p").click(function () {
      $(this).slideUp();
    });

    $("div").click(function () {
        $("p").click();
    });
</script>

</body>
</html>​

Her bir <p> elementinin tıklama olayında, kendisini slideUp(); komutuyla yukarı kaydırıyor. Ancak <div> elementine tıkladığımız zaman, sanki tüm <p> elementlerine tıklamışcasına hepsini yukarı kaydırıyor. Çünkü, genel seçici olan $(“p”) seçicisini kullandık. Seçiciler hakkında daha fazla bilgi için buraya tıklayınız.

.dblclick()

JavaScript’teki çift tıklama olayında olacakları belirler veya çift tıklama olayını gerçekleştirir. Şöyle ki:

Örnek uygulama -> http://jsfiddle.net/icntfan/zWv2K/

<!DOCTYPE html>
<html>
<head>
  <style>
  p { color:red; margin:5px; }
  p:hover { background:yellow; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <p>Birinci Paragraf</p>
  <p>İkinci Paragraf</p>
  <p>Üçüncü Paragraf</p>

    <div>Bana çift tıklarsan bütün p elementleri kapanır.</div>
<script>

    $("p").dblclick(function () {
      $(this).slideUp();
    });

    $("div").dblclick(function () {
        $("p").dblclick();
    });
</script>

</body>
</html>​

Her bir <p> elementinin çifttıklama olayında, kendisini slideUp(); komutuyla yukarı kaydırıyor. Ancak <div> elementine çift tıkladığımız zaman, sanki tüm <p> elementlerinin hepsine çift tıklamışcasına hepsini yukarı kaydırıyor.

.focusin()

Herhangi bir elemente odaklandığımızda çalışır. .focus() metodundan farklı olarak eklendiği elementin alt elementlerindeki odaklanmayı da yakalar.

Örnek uygulama -> http://jsfiddle.net/icntfan/cGtjF/

<!DOCTYPE html>
<html>
<head>
  <style>span {display:none;}</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <p><input type="text" /> <span>focusin gerçekleşti</span></p>
<p><input type="password" /> <span>focusin gerçekleşti</span></p>
<script>
    $("p").focusin(function() {
         $(this).find("span").css('display','inline').fadeOut(1000);
    });
</script>

</body>
</html>​

Genel element seçicisi olan $(“p”) ile herhangi bir <p> elementine .focusin() ile odaklanıldığını yakalıyoruz ve input’umuzun hemen yanında animasyonlu bir şekilde “focusin gerçekleşti” yazdırıyoruz.

.focusout()

Herhangi bir elementten odaklanmayı bıraktığımızda çalışır. .blur() metodundan farklı olarak eklendiği elementin tüm çocuklarındaki bulanıklaşma (blur, focusout) olaylarını yakalar.

Örnek uygulama -> http://jsfiddle.net/icntfan/V9Qsp/

<!DOCTYPE html>
<html>
<head>
  <style>
.inputs { float: left; margin-right: 1em; }
.inputs p { margin-top: 0; }
</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>

<div class="inputs">
  <p>
    <input type="text" /><br />
    <input type="text" />
  </p>
  <p>
    <input type="password" />
  </p>
</div>
<div id="fo">focusout gerçekleşti</div>
<div id="b">blur gerçekleşti</div>

<script>
var fo = 0, b = 0;
$("p").focusout(function() {
  fo++;
  $("#fo")
    .text("focusout gerçekleşti: " + fo + "x");
}).blur(function() {
  b++;
  $("#b")
    .text("blur gerçekleşti: " + b + "x");

});
</script>

</body>
</html>​

Dikkat ederseniz, .focusout() ve .blur() olaylarını <p> elementlerine bağladık, <input> elementlerine değil. Bu yüzden .focusout() olayı çalışırken .blur() olayımız çalışmıyor.

.hover()

Eklendiği elementteki 2 olayı ele alır. Bunlar fare ile o elementin üzerine gelmemiz olayı ve farenin o elementin üzerinden ayrılması olayı.

Örnek uygulama -> http://jsfiddle.net/icntfan/xCJTr/

<!DOCTYPE html>
<html>
<head>
  <style>
  ul { margin-left:20px; color:blue; }
  li { cursor:default; }
  span { color:red; }
</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <ul>
    <li>Süt</li>
    <li>Ekmek</li>
    <li class='fade'>Köfte</li>
    <li class='fade'>Sucuk</li>
  </ul>
<script>
$("li").hover(
  function () {
    $(this).append($("<span> ***</span>"));
  },
  function () {
    $(this).find("span:last").remove();
  }
);
</script>

</body>
</html>​

Herhangi bir <li> elementinin üzerine geldiğimizde, üzerine gelinen elementin sonuna 3 tane yıldız ekliyoruz ve üzerinden ayrıldığımızda bu 3 yıldızı siliyoruz.

.mousedown() / .mouseup()

.mousedown(): Herhangi bir element için farenin butonuna basma anını tetikler veya o anda olacakları belirler.
.mouseup(): Herhangi bir element için farenin butonuna bastıktan sonra çekme anını tetikler veya o anda olacakları belirler.
Örnek uygulama -> http://jsfiddle.net/icntfan/LdMV8/

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <p>Fareyi buraya getirdikten sonra tıklayıp bırakınız.</p>

<script>
    $("p").mouseup(function(){
      $(this).append('<span style="color:#F00;">Mouse up.</span>');
    }).mousedown(function(){
      $(this).append('<span style="color:#00F;">Mouse down.</span>');
    });

</script>

</body>
</html>​

$(“p”) ile seçtiğimiz tüm paragraflar için, tıklandığı anda “Mouse down” yazar, tıklamayı bıraktığımız anda “Mouse up” yazar.

.mouseenter() / .mouseleave()

.mouseenter(): Farenin seçilen elementlerin üzerine geldiği anı temsil eder, tetikler, olacakları belirler.
.mouseleave(): Farenin seçilen elementlerin üzerinden ayrıldığı anı temsil eder, tetikler, olacakları belirler.

Örnek uygulama -> http://jsfiddle.net/icntfan/kD88W/

<!DOCTYPE html>
<html>
<head>
  <style>
div.out {
width:40%;
height:120px;
margin:0 15px;
background-color:#D6EDFC;
float:left;
}
div.in {
width:60%;
height:60%;
background-color:#FFCC00;
margin:10px auto;
}
p {
line-height:1em;
margin:0;
padding:0;
}
</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>

<div class="out overout"><p>fareyi buraya getirin</p><div class="in overout"><p>fareyi buraya getirin</p><p>0</p></div><p>0</p></div>

<div class="out enterleave"><p>fareyi buraya getirin</p><div class="in enterleave"><p>fareyi buraya getirin</p><p>0</p></div><p>0</p></div>

<script>
    var i = 0;
    $("div.overout").mouseover(function(){
      $("p:first",this).text("mouse over");
      $("p:last",this).text(++i);
    }).mouseout(function(){
      $("p:first",this).text("mouse out");
    });

    var n = 0;
    $("div.enterleave").mouseenter(function(){
      $("p:first",this).text("mouse enter");
      $("p:last",this).text(++n);
    }).mouseleave(function(){
      $("p:first",this).text("mouse leave");
    });

</script>

</body>
</html>​

Kod parçası, fare kutuların üzerinde gezdikçe, kutulara giriş ve ayrılış sayılarını sayıyor.

.mousemove()

Farenin seçilen elementlerin üzerinde hareket ettiği her bir anı temsil eder, tetikler, olacakları belirtir.

Örnek uygulama -> http://jsfiddle.net/icntfan/2MqXD/

<!DOCTYPE html>
<html>
<head>
  <style>
  div { width:220px; height:170px; margin: 10px 50px 10px 10px;
        background:yellow; border:2px groove; float:right; }
  p { margin:0; margin-left:10px; color:red; width:220px;
      height:120px; padding-top:70px;
      float:left; font-size:14px; }
  span { display:block; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <p>
    <span>Fareyi, kutunun üzerinde hareket ettirin.</span>
    <span>&nbsp;</span>
  </p>

  <div></div>
<script>
    $("div").mousemove(function(e){
      var pageCoords = "( " + e.pageX + ", " + e.pageY + " )";
      var clientCoords = "( " + e.clientX + ", " + e.clientY + " )";
      $("span:first").text("( e.pageX, e.pageY ) : " + pageCoords);
      $("span:last").text("( e.clientX, e.clientY ) : " + clientCoords);
    });

</script>

</body>
</html>​

Fareyi kutunun üzerinde hareket ettirdiğimiz anda, farenin koordinatlarını pencereye göreceli olarak ekranda yazdırıyoruz.

.mouseover() / .mouseout()

Bu ikili farenin seçilen elementlere giriş çıkışını belirtir, tetikler, olacakları belirler. .mouseenter() / .mouseleave() metodundan farklı olarak, içi içe kutular olduğunda ve içteki kutulardan birinin üzerine geldiğimizde ana kutunun dışına çıkmışız gibi davranır.

Örnek uygulama -> http://jsfiddle.net/icntfan/38Qu2/

<!DOCTYPE html>
<html>
<head>
  <style>
div.out { width:40%; height:120px; margin:0 15px;
          background-color:#D6EDFC; float:left; }
div.in {  width:60%; height:60%;
          background-color:#FFCC00; margin:10px auto; }
p { line-height:1em; margin:0; padding:0; }
</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>

<div class="out overout">
  <span>fareyi buraya getirin</span>
  <div class="in">
  </div>
</div>

<div class="out enterleave">
  <span>fareyi buraya getirin</span>
  <div class="in">
  </div>
</div>

<script>
  var i = 0;
  $("div.overout").mouseover(function() {
    i += 1;
    $(this).find("span").text( "mouse over x " + i );
  }).mouseout(function(){
    $(this).find("span").text("mouse out ");
  });

  var n = 0;
  $("div.enterleave").mouseenter(function() {
    n += 1;
    $(this).find("span").text( "mouse enter x " + n );
  }).mouseleave(function() {
    $(this).find("span").text("mouse leave");
  });

</script>

</body>
</html>​

Sol taraftaki içi içe olan kutulara dikkat ederseniz, içteki kutuya her bir girişi bir .mouseover() olayı olarak algılıyor.

.toggle()

Seçilen elemente her bir tıklamada sırasıyla verilen fonksiyonları çalıştırır.

Örnek uygulama -> http://jsfiddle.net/icntfan/Nnccx/

<!DOCTYPE html>
<html>
<head>
  <style>
  ul { margin:10px; list-style:inside circle; font-weight:bold; }
  li { cursor:pointer; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <ul>
    <li>Mağazaya git</li>
    <li>Öğlen yemeğini al</li>
    <li>Eve dön</li>

    <li>Koşuya çık</li>
  </ul>
<script>
    $("li").toggle(
      function () {
        $(this).css({"list-style-type":"disc", "color":"blue"});
      },
      function () {
        $(this).css({"list-style-type":"disc", "color":"red"});
      },
      function () {
        $(this).css({"list-style-type":"", "color":""});
      }
    );

</script>

</body>
</html>​

<li> elementleri için her bir tıklamada, sırasıyla renkleri değiştiriyor.

Klavye Olayları

.keydown()

Klavye tuşuna bastığımız anı temsil eder, tetikler, olacakları belirler.
Örnek uygulama -> http://jsfiddle.net/icntfan/Yt3XB/

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>

    <input type="text">

<script>
$("input").keydown(function(){
  $("input").css("background-color","red");
});
    </script>

</body>
</html>​

Uygulamamız, input elementine odaklanılmışken bir tuşa bastığımızda, input’un arka plan rengini kırmızı yapıyor.

.keyup()

Klavye tuşuna bastıktan sonraki çekme anını temsil eder, tetikler, olacakları belirler.
Örnek uygulama -> http://jsfiddle.net/icntfan/ak4UA/

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>

    <input type="text">

<script>
$("input").keyup(function(){
  $("input").css("background-color","red");
});
    </script>

</body>
</html>​

Uygulama input elementine odaklanılmışken bir tuşa basıp çekme anında, input’un arka plan rengini kırmızı yapıyor.

.keypress()

Klavye tuşuna basma anımızı temsil eder, tetikler, olacakları belirler.

Örnek uygulama -> http://jsfiddle.net/icntfan/ZASGE/

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>

    <textarea cols="45" rows="15" id="yorum"></textarea>

    <script>
        $('#yorum').keypress(function(event){
            if (event.keyCode == 10 || event.keyCode == 13)
                event.preventDefault();
          });
    </script>

</body>
</html>​

Uygulama, yorum alanında enter tuşuna basmamızı engelliyor. Klavyede bulunan iki adet enter tuşlarının tuşu kodu karşılıkları ’10’ ve ’13’ tür.

Form Olayları

.blur()

Javascript kütüphanesindeki blur olayını temsil eder, tetikler, olacakları belirler.
Örnek uygulama -> http://jsfiddle.net/icntfan/p6jM3/

<!DOCTYPE html>
<html>
<head>
  <style>
.inputs { float: left; margin-right: 1em; }
.inputs p { margin-top: 0; }
</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>

    <form>
      <input id="hedef" type="text" value="Alan 1" />
      <input type="text" value="Alan 2" />
    </form>

    <script>
    $('#hedef').blur(function() {
      alert('.blur() olayı.');
    });
    </script>

    </body>
</html>
​

Blur anındaki ekrana uyarı veriyor.

.change()

Select elemetindeki değişimleri tetikler, temsil eder.
Örnek uygulama -> http://jsfiddle.net/icntfan/rGYZR/

<!DOCTYPE html>
<html>
<head>
  <style>

  div { color:red; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <select name="sweets" multiple="multiple">
    <option>Çikolata</option>
    <option selected="selected">Şeker</option>

    <option>Puf</option>
    <option selected="selected">Karemel</option>
    <option>Kurabiye</option>

  </select>
  <div></div>
<script>
    $("select").change(function () {
          var str = "";
          $("select option:selected").each(function () {
                str += $(this).text() + " ";
              });
          $("div").text(str);
        })
        .change();
</script>

</body>
</html>​

Select elementinin seçili olan seçeneklerinde herhangi bir değişim olduğunda, seçili olanları ekrana bastırıyoruz.

.focus()

Herhangi bir elemente odaklandığımızda olacakları belirler, tetikleme mekanizması sağlar.

Örnek uygulama -> http://jsfiddle.net/icntfan/nQ79s/

<!DOCTYPE html>
<html>
<head>
  <style>span {display:none;}</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <p><input type="text" /> <span>focus olayı</span></p>

<p><input type="password" /> <span>focus olayı</span></p>
<script>
    $("input").focus(function () {
         $(this).next("span").css('display','inline').fadeOut(1000);
    });
</script>

</body>
</html>​

Input elementlerinden birine tıklandığında ekrana “focus olayı” yazdırıyoruz.

.select()

Input elementlerinden herhangi birinde seçim işlemi yapıldığında olacakları belirler, tetikler.
Örnek uygulama -> http://jsfiddle.net/icntfan/tvWpe/

<!DOCTYPE html>
<html>
<head>
  <style>
  p { color:blue; }
  div { color:red; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <input type="text" value="Bazı yazılar" />
  <input type="text" value="Beni lütfen seçiniz." />

  <div></div>
<script>
    $(":input").select( function () {
      $("div").text("Bir şeyler seçildi").show().fadeOut(1000);
    });
</script>

</body>
</html>​

Input elementlerinden birinde seçim işlemi yapıldığında, ekrana “Bir şeyler seçildi” metnini bastırıyoruz.

.submit()

Herhangi bir formun gönderme anınıı temsil eder, tetikler.

Örnek uygulama -> http://jsfiddle.net/icntfan/nFSZb/

<!DOCTYPE html>
<html>
<head>
  <style>

  p { margin:0; color:blue; }
  div,p { margin-left:10px; }
  span { color:red; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <p>İnputa 'doğru' yazınız.</p>
  <form action="javascript:alert('başarılı!');">
    <div>
      <input type="text" />

      <input type="submit" />
    </div>
  </form>
  <span></span>
<script>

    $("form").submit(function() {
      if ($("input:first").val() == "doğru") {
        $("span").text("Doğrulandı...").show();
        return true;
      }
      $("span").text("Doğrulanmadı!").show().fadeOut(1000);
      return false;
    });
</script>

</body>
</html>​

Input elementine ‘doğru’ yazmadığımız sürece ekrana ‘Doğrulanmadı!’ yazıyoruz. Aksi takdirde ‘Doğrulandı…’ yazdırıp ekrana ‘başarılı’ uyarısını veriyoruz.

Döküman Yüklenme Olayları

.load()

Herhangi bir DOM elementin dökümana yüklenme anını temsil eder, tetikler.

Aşağıdaki kod betiği yüksekliği 100’den büyük olan her bir resim elementlerine dökümana yüklenmesi tamamlana kadar sürekli geçerli olmak üzere buyuk_resim CSS sınıfını ekler.

$('img.userIcon').load(function(){
  if($(this).height() > 100) {
    $(this).addClass('buyuk_resim');
  }
});

.ready()

Herhangi bir DOM elementin dökümana tamamen yüklenmesi anını temsil eder, tetikler.

$(document).ready(function() {
  // Dökümanımız hazır olduğunda bu kısım çalışır.
});

jQuery(document).ready(function($) {
  // Dökümanımız hazır olduğunda bu kısım çalışır. $ işareti yerine jQuery kullandık.
});

$(function() {
  // Dökümanımız hazır olduğunda bu kısım çalışır.
});

.unload()

DOM elementin dökümandan kaybolduğu ana denk gelir. Bu element, dökümanın kendisi de olabilir.
Aşağıdaki örnek kod, pencere kapanırken ekrana “Hoşçakal!” yazan uyarı kutusu getiriyor.

$(window).unload( function () { alert("Hoşçakal!"); } );

Tarayıcı Olayları

.error()

Herhangi bir DOM element için oluşacak hatayı temsil eder. Aşağıdaki örnekte resim elementi için bir sorun oluşursa, örneğin resmin kaynağının bulunamaması gibi, missing.png’yi yükle işlemini yapıyor.

$("img").error(function(){
    $(this).hide();
  }).attr("src", "missing.png");

.resize()

Seçilen elementin yeniden boyutlandırıldığı anı temsil eder. Aşağıdaki koda bakacak olursak, seçilen element olan pencerenin yeniden boyutlandırıldığı anda veya hemen sonrasında ekrana pencerenin yeni genişlik değerini bastıracaktır.

$(window).resize(function() {
  $('body').prepend('<div>' + $(window).width() + '</div>');
});

.scroll()

Seçilen element için scroll anını temsil eder.

Örnek uygulama -> http://jsfiddle.net/icntfan/7Aqsu/

<!DOCTYPE html>
<html>
<head>
  <style>
  div { color:blue; }
  p { color:green; }
  span { color:red; display:none; }

  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>

  <div>Scroll yapmayı dene.</div>
  <p>Paragraf- <span>Scroll oldu!</span></p>
<script>
    $("p").clone().appendTo(document.body);
    $("p").clone().appendTo(document.body);
    $("p").clone().appendTo(document.body);
    $("p").clone().appendTo(document.body);
    $("p").clone().appendTo(document.body);
    $("p").clone().appendTo(document.body);
    $(window).scroll(function () {
      $("span").css("display", "inline").fadeOut("slow");
    });

</script>

</body>
</html>​

Window elementi, scroll olduğu anda ekrana “Paragraf- Scroll oldu!” yazdırıyor.

Olay İşleyicisi Eklentisi

.bind()

Birden fazla olayı bir araya getirmek için kullanılır.

Örnek uygulama -> http://jsfiddle.net/icntfan/bBzVs/

<!DOCTYPE html>
<html>
<head>
  <style>
p { background:yellow; font-weight:bold; cursor:pointer;
padding:5px; }
p.over { background: #ccc; }
span { color:red; }
</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <p>Buraya tek veya çift tıklayınız.</p>
<span></span>
<script>
$("p").bind("click", function(event){
var str = "( " + event.pageX + ", " + event.pageY + " )";
$("span").text("Tıklandı " + str);
});
$("p").bind("dblclick", function(){
$("span").text("Çift tıklandı " + this.nodeName);
});
$("p").bind("mouseenter mouseleave", function(event){
$(this).toggleClass("over");
});

</script>

</body>
</html>​

Uygulamada <p> elementi için tek tıklama, çift tıklama veya mouseenter mouseleave olaylarında olacakları belirledik.

.unbind()

Daha önce eklenen olayları silmek için kullanılır.

Örnek uygulama -> http://jsfiddle.net/icntfan/KQstB/

<!DOCTYPE html>
<html>
<head>
  <style>
button { margin:5px; }
button#theone { color:red; background:yellow; }
</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <button id="theone">Birşey yapmaz...</button>
<button id="bind">Bind Et</button>
<button id="unbind">Unbind Et</button>

<div style="display:none;">Tıkla!</div>
<script>

function aClick() {
$("div").show().fadeOut("slow");
}
$("#bind").click(function () {

$("#theone").click(aClick)
  .text("Tıklanabilir!");
});
$("#unbind").click(function () {
$("#theone").unbind('click', aClick)
  .text("Birşey yapmaz...");
});

</script>

</body>
</html>​

Uygulama ilk çalıştığı anda ilk butona her hangi bir olay eklenmemiştir. Bind et butonuna tıkladığımızda ilk butonda, click olayına bağlı olan .show() ardından .fadeOut() animasyonlarını eklemiş oluyoruz. Unbind et butonuna tıkladığımızda ise click olayını iptal ettiğimiz için, animasyonlar da iptal edilmiş oluyor.

.live()

Elementler olay eklendikten sonra dökümana dahil edilseler bile, seçilen tüm elementlere belirlenen olayı ekliyor.

Örnek uygulama -> http://jsfiddle.net/icntfan/4XX9x/

<!DOCTYPE html>
<html>
<head>
  <style>
  p { background:yellow; font-weight:bold; cursor:pointer;
      padding:5px; }
  p.over { background: #ccc; }
  span { color:red; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <p>Bana tıkla!</p>

  <span></span>
<script>
$("p").live("click", function(){
  $(this).after("<p>Başka paragraf!</p>");
});
</script>

</body>
</html>​

<p> elementine eklenen olayı (<p>Başka paragraf!</p> kodunu ekleme) daha sonradan eklenen <p> elementlerine tıkladığımızda da görebiliyoruz.

.die()

.live() ile eklenen tüm olayları iptal eder.

Örnek uygulama -> http://jsfiddle.net/icntfan/UUbt6/

<!DOCTYPE html>
<html>
<head>
  <style>
button { margin:5px; }
button#theone { color:red; background:yellow; }
</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <button id="theone">Birşey yapmaz...</button>
<button id="bind">Bind Et</button>
<button id="unbind">Unbind Et</button>

<div style="display:none;">Tıkla!</div>
<script>

function aClick() {
  $("div").show().fadeOut("slow");
}
$("#bind").click(function () {
  $("#theone").live("click", aClick)
              .text("Tıklanabilir!");
});
$("#unbind").click(function () {
  $("#theone").die("click", aClick)
              .text("Birşey yapmaz...");
});

</script>

</body>
</html>​

Uygulamanın ilk çalışmasında, birinci sıradaki butona herhangi bir olay eklenmemiştir. Bind Et düğmesine tıkladığımızda .live() metodu ile eklenen olaylar, .die() metodu ile iptal ediliyor.

.on()

Seçilen elementlere, bir veya daha fazla olay için, olay işleyicisi ekler. Şöyle ki:
Örnek uygulama -> http://jsfiddle.net/icntfan/BYbUe/

<!DOCTYPE html>
<html>
<head>
  <style>
.test { color: #000; padding: .5em; border: 1px solid #444; }
.aktif{ color: #900;}
.icerde{ background-color: blue; }
</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <div class="test">test div</div>
<script>$("div.test").on({
  click: function(){
    $(this).toggleClass("aktif");
  },
  mouseenter: function(){
    $(this).addClass("icerde");
  },
  mouseleave: function(){
    $(this).removeClass("icerde");
  }
});</script>

</body>
</html>​

Test kutusu için her bir click, mouseenter, mouseleave olaylarında farklı durumlar gerçekleşiyor.

.off()

.on() ile eklenen olayları iptal etmek için kullanılır.

Örnek uygulama -> http://jsfiddle.net/icntfan/BNnkf/

<!DOCTYPE html>
<html>
<head>
  <style>
button { margin:5px; }
button#theone { color:red; background:yellow; }
</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <button id="theone">Birşey yapmaz...</button>
<button id="bind">Tık Ekle</button>
<button id="unbind">Tık Sil</button>
<div style="display:none;">Tık !</div>
<script>
function aClick() {
  $("div").show().fadeOut("slow");
}
$("#bind").click(function () {
  $("body").on("click", "#theone", aClick)
    .find("#theone").text("Tıklanabilir!");
});
$("#unbind").click(function () {
  $("body").off("click", "#theone", aClick)
    .find("#theone").text("Birşey yapmaz...");
});
</script>

</body>
</html>​

Uygulama üzerinde rahatlıkla görebileceğiniz üzere, .on() ile eklenen olayı .off() ile iptal ediyoruz.

.delegate()

Seçilen elementler için, bir veya daha fazla olay için olay işleyicisi ekler. Bunlar .live() metodundaki gibi sürekli canlıdırlar. Yani olay işleyicisi eklendikten sonra dökümana eklenen elementler içinde geçerli olur. .live() metodundan farklı olan kısmı ise, herhangi bir kök elementin altındaki elementlerin tümü için kullanıyor olmaktır.

Örnek uygulama -> http://jsfiddle.net/icntfan/UUQWd/

<!DOCTYPE html>
<html>
<head>
  <style>
  p { background:yellow; font-weight:bold; cursor:pointer;
      padding:5px; }
  p.over { background: #ccc; }
  span { color:red; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <p>Bana tıka!</p>

  <span></span>
<script>
    $("body").delegate("p", "click", function(){
      $(this).after("<p>Başka paragraf!</p>");
    });
</script>

</body>
</html>​

Dikkat ettiyseniz, olay işleyici fonksiyonu <p> elementine değil, tüm elementler için kök yani ata element olan <body> elementine ekledik.

.undelegate()

.delegate() ile eklenen olayları iptal eder.

Örnek uygulama -> http://jsfiddle.net/icntfan/CN7Nt/

<!DOCTYPE html>
<html>
<head>
  <style>
button { margin:5px; }
button#theone { color:red; background:yellow; }
</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <button id="theone">Birşey Yapmaz...</button>
<button id="bind">Bind Et</button>
<button id="unbind">Unbind Et</button>
<div style="display:none;">Tık!</div>
<script>
function aClick() {
  $("div").show().fadeOut("slow");
}
$("#bind").click(function () {
  $("body").delegate("#theone", "click", aClick)
    .find("#theone").text("Tıklanabilir!");
});
$("#unbind").click(function () {
  $("body").undelegate("#theone", "click", aClick)
    .find("#theone").text("Birşey Yapmaz...");
});
</script>

</body>
</html>​

.delegate() ile eklenen olayı, .undelegate() ile iptal ettik.

.one()

Seçilen elementlere eklenen olayın sadece bir kere çalışmasına olanak sağlar.

Örnek uygulama -> http://jsfiddle.net/icntfan/XqwX2/

<!DOCTYPE html>
<html>
<head>
  <style>
div { width:60px; height:60px; margin:5px; float:left;
background:green; border:10px outset;
cursor:pointer; }
p { color:red; margin:0; clear:left; }
</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>

<div></div>
<div></div>
<div></div>
<div></div>

<p>Yeşil kutulara tıkla...</p>

<script>
var n = 0;
$("div").one("click", function() {
  var index = $("div").index(this);
  $(this).css({
    borderStyle:"inset",
    cursor:"auto"
  });
  $("p").text("Kutunun indeks numarası " + index +
      "  Toplam Tık: " + ++n );
});

</script>

</body>
</html>​

Kutulardan her birine tıklandığı anda çalışan fonksiyon, bir sonraki tıklamada çalışmıyor.

.trigger()

Seçilen tüm elementlere bağlı verilen tipteki olayları tetikler.
Örnek uygulama -> http://jsfiddle.net/icntfan/qykj3/

<!DOCTYPE html>
<html>
<head>
  <style>

button { margin:10px; }
div { color:blue; font-weight:bold; }
span { color:red; }
</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <button>Buton #1</button>
<button>Buton #2</button>
<div><span>0</span> buton #1 kere tıklandı.</div>

<div><span>0</span> buton #2 kere tıklandı.</div>
<script>
$("button:first").click(function () {
update($("span:first"));
});
$("button:last").click(function () {
$("button:first").trigger('click');

update($("span:last"));
});

function update(j) {
var n = parseInt(j.text(), 10);
j.text(n + 1);
}
</script>

</body>
</html>​

İlk buton için tıkladığımızda çalışan olay işleyicisi, gerçek tıklamayı temsil ediyor. İkinci butonda ise, ilk butona bağlı tıklama olayını tetikliyoruz.

.triggerHandler()

Bir elemente bağlı tüm olay işleyicilerini çalıştırır. .trigger() metodu seçilen tüm elementler için bu işlemi yaparken, .triggerHandler() metodu sadece ilk element için yapar.

Örnek uygulama -> http://jsfiddle.net/icntfan/eDUdx/

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <button id="old">.trigger("focus")</button>
<button id="new">.triggerHandler("focus")</button><br/><br/>

<input type="text" value="Odaklanılacak"/>
<script>

$("#old").click(function(){
$("input").trigger("focus");
});
$("#new").click(function(){
$("input").triggerHandler("focus");
});
$("input").focus(function(){
$("<span>Odaklanıldı!</span>").appendTo("body").fadeOut(1000);
});

</script>

</body>
</html>​

ID kullanarak seçtiğimiz tek bir element için .triggerHandler() metodunu çalıştırmış olduk.

jQuery.proxy()

Bir fonksiyonu alır, sanki başka bir element veya nesne için çalışıyormuş gibi ele alır. Şöyle ki:
Örnek uygulama -> http://jsfiddle.net/icntfan/LPm8k/

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>

  <p><button id="test">Test</button></p>
  <p id="log"></p>

<script>
  var obj = {
    name: "Ulvi",
    test: function() {
      $("#log").append( this.name );
      $("#test").unbind("click", obj.test);
    }
  };

  $("#test").click( jQuery.proxy( obj, "test" ) );
</script>

</body>
</html>​

Test butonuna tıkladığımızda obj nesnesindeki test fonksiyonunu çalıştırmış oluyoruz.

Faydalanılan kaynaklar:
1-) JQuery documentation -> Events | http://api.jquery.com/category/Events/

9 Yorum

Yanıtla