javaScript EVENT NESNESİ

Olay (Event) arabirimi, DOM'da gerçekleşen herhangi bir olayı temsil eder; Bazıları kullanıcı tarafından üretilen (mouse veya klavye etkinlikleri gibi) diğerleri ise API'lar tarafından üretilir (bir animasyonun çalışıp çalışmadığını, videolar duraklatıldığını gösteren etkinlikler gibi). Birçok olay türü vardır, bunların bazıları ana Olay arayüzüne dayalı diğer arayüzleri kullanır. Olayın kendisi, tüm olaylarda ortak olan özellikleri ve methodları içerir.

Kurucu :

Özellikler :

Methodlar :

Event Oluştur


click, mousemove, keyup ve bir sürü diğer olay işleyiciler hakkında bir şeyler biliyorsunuz, ancak Javascript'te kendi özel etkinliklerinizi oluşturabileceğinizi biliyor muydunuz? Javascript genişletilebilirlik mekanizmaları sayesinde mevcut nesnelere yeni özellikler ve methodlar eklemek ve hatta yeni javascript nesneleri oluşturmak kolaydır. Özel javascript olayları nasıl oluşturulur bakalım.

Sözdizimi :

event = new Event(typeArg, eventInit);

typeArg :Olayın adını temsil eden bir DOMString

eventInit :Aşağıdaki alanlara sahip bir EventInit sözlük:

//  Özel etkinliği oluşturun.

var event = new Event("hello");
   
//Etkinlik dinleyicisini ekleyin.
  
elem.addEventListener("hello", function(event) {

    alert("javascript Dersi");
	
  });
  
// Olayın tetiklenmesi

 elem.dispatchEvent(event);  

Genellikle, DOM'da bir işlemi tamamladığımızda etkinlik otomatik olarak tetiklenir. Bu durum herhangi bir DOM işlemiyle bağlantılı değildir, bu nedenle el ile çağırmamız gerekir. Javascript'in dispatchEvent() methodu kullanıyoruz.

Kabarcıklanan ve iptal edilemeyen bir "hello" olayı oluşturalım.

var evt = new Event("hello", {"bubbles":true, 

"cancelable":false});

event.type


Event.type salt okunur özelliği, olayın türünü içeren bir dize döndürür. Etkinlik oluşturulduğunda belirlenir ve click, load veya error gibi belirli olayı belirtmek için yaygın olarak kullanılan ad olur.

Sözdizimi :

event.type

ÖRNEK :

HTML :

<p  onclick="tipi(event)">javaScript öğren </p>

javaScript :

function tipi(e){

  var x = e.type;//ÇIKTI:click
	
  alert(x);
  
  }

event.currentTarget


Bir kullanıcı iç içe geçmiş bir öğeyi tıkladığında

CurrentTarget olay özelliği olay dinleyicileri olayı tetikleyen öğe döndürür.

Bu özellikle capturing (yakalama) ve bubbling(kabarcıklanma) sırasında yararlıdır.

CurrentTarget methodu olayın oluştuğu öğeyi tanımlayan event.target'ın aksine, her zaman olay işleyicisinin eklendiği öğeye atıfta bulunur.

Sözdizimi :

event.currentTarget

HTML :


<div onclick="tikla(event)">

<p>javaScript dersi öğren</p>

</div>

javaScript :

function tikla(event) {  

alert(event.currentTarget.nodeName);//ÇIKTI:div
	
}

event.target


Event.target özelliği, hangi DOM öğesinin etkinliği tetiklediğini döndürür.

Sözdizimi :

event.target

HTML :

<body onclick="tikla(event)">

<p>javaScript dersi öğren</p>

</body>

javaScript :


function tikla(e) { 

 alert(e.target.nodeName);//ÇIKTI: "p"
	
}

button


Button özelliği, mouse olayı tetiklendiğinde hangi mouse düğmesine basıldığını gösteren bir sayı döndürür.

Verilen bir düğmeyi temsil eden bir sayı:

Sözdizimi :

event.button

HTML :


<div onmousedown="Tikla(event)">Mouse butonlarından biri 

ile bu metni tıkla

 <p>

  0 = Sol mouse buton<br>
  
  1 = Orta mouse button<br>
  
  2 = Sağ mouse button
  
 </p>
  
</div>

javaScript :

function Tikla(event) {

    alert("mouse butona bastınız: " + event.button)
}

buttons


Buttons özelliği, mouse olayı tetiklendiğinde hangi mouse düğmesine veya mouse düğmelerine basıldığını gösteren bir sayı döndürür.

Mouse olayı oluştuğunda basılan (genellikle örnek: "Tarayıcı Geri") düğmesi bir veya daha fazla mouse düğmesini temsil eden bir Numara. Birden fazla düğme basılırsa, değerler yeni bir sayı üretmek üzere birleştirilir. (Örneğin, sol düğme (1) ve sağ düğme (2) basılırsa, döndürülen değer 1 + 2 = 3'dür)

Bir veya daha fazla düğmeyi temsil eden bir sayı. Aynı anda birden fazla tuşa basıldığında, değerler birleştirilir.

Olası değerler :

Not : Sol'a konfigüre edilmiş bir mouse için dönüş değerleri tersine çevrilir.

Sözdizimi :

event.buttons

HTML :


<div onmousedown="Tikla(event)">Mouse butonlarından biri

 veya iki tuşa anında bu metni tıkla
 
<p>
  1 = Sol mouse button<br>
  
  2 = Sağ mouse button<br>
  
  4 = Orta mouse button<br>
  
  8 = Dördüncü mouse button (Genellikle "Tarayıcı Geri" 
  
  düğmesi)<br>
  
  16 = Beşinci mouse button (Genellikle "Tarayıcı ileri" 
  
  düğmesi)<br>
  
  </p>
  
</div>

<h2>Düğmesine basmışın: <span id="test"></span></h2>

javaScript :

function Tikla(event) {

    var x = event.buttons;
	
    document.getElementById("test").innerHTML = x;
}

event.timeStamp


Zaman bilgisi öğrenmek için kullanılır. Bir tıklamadan sonra ikinci bir tıklama için kaç saniye geçtiği bilgisini edinebilirsiniz.

Sözdizimi :

event.timeStamp

ÖRNEK :

HTML :

<p onclick="test(event)">İki tıklama arasında geçen zamanı 

öğrenmek için bu metne tıklayın</p>

<p>Timestamp: <span id="demo"></span></p>

javascript :

function test(event) {

    var n = event.timeStamp;
	
    document.getElementById("demo").innerHTML = n;
}

event.clientX - event.clienty


clientX : ClientX özelliği, mouse olayı tetiklendiğinde mouse işaretçisinin yatay koordinatını (görünüm penceresine göre ) döndürür.

clientY : ClientY özelliği, bir mouse olayı tetiklendiğinde, mouse işaretçisinin dikey koordinatını (görünüm penceresine göre) döndürür.

ÖRNEK :

HTML :

<div id="El" style="width:200px; height:200px; background-color:#00BFFF"> </div>

javascript :


var x = document.getElementById("El")
  
x.onmousemove = function (e) {

var evt = window.event || e //Diğer tarayıcılarda çalışması için
  
x.textContent = evt.clientX + ":" + evt.clientY
  
  }

ÇIKTI:

Yukarıda ki mavi kutunun üzerinde mouse gezdirin.

event.pageX - event.pageY


event.pageX : Mouse işaretçisinin belgenin yatay kordinatına göre konumunu döndürür.

event.pageY :Mouse işaretçisinin belgenin dikey koordinatını göre konumunu döndürür.

ÖRNEK :

HTML :

<div id="el" style="width:200px; height:200px; background-color:#00BFFF"> </div>

javascript :

 var x = document.getElementById("el")
 
 x.onmousemove = function (e) {

 var evt = window.event || e //çapraz tarayıcı olay nesnesi
  
 x.textContent = evt.pageX + ":" + evt.pageY
  }

ÇIKTI:

altKey - ctrlKey - shiftKey


altKey : AltKey özelliği, bir anahtar olayı tetiklendiğinde "ALT" tuşuna basılı olup olmadığını gösteren bir Boolean değeri döndürür.

CtrlKey : CtrlKey özelliği, bir anahtar olayı tetiklendiğinde "Ctrl" tuşuna basılı olup olmadığını gösteren bir Boolen değeri döndürür.

shiftKey : shiftKey özelliği, bir mouse olayı tetiklendiğinde "SHIFT" tuşuna basılı olup olmadığını gösteren bir Boolen değeri döndürür.

Klavye Olayları

onkeydown : Olay, kullanıcı bir tuşa bastığında gerçekleşir.

onkeypress : Olay, kullanıcı herhangi bir tuşa bastığında oluşur.

onkeyup : Olay, kullanıcı bir tuşu bıraktığında gerçekleşir.

ÖRNEK :

document.onkeydown = keydown;

  function keydown(e) {
  
      if (e.altKey) {
	  
          alert('Alt tuşuna basılmıştır.');
		  
      }else {
	  
          alert("ALT tuşuna basılmamıştır. ");
  }
}

ÖRNEK :

  document.onkeyup = key;

  function key(e) {
  
      if (e.keyCode==17) {
	  
          alert('CTRL tuşuna basılmıştır.');
		  
      }else {
	  
          alert("CTRL tuşuna basılmamıştır. ");
  }
}

ÖRNEK :

  document.onkeydown = keydown;

  function keydown(e) {

      if (e.shiftKey) {

          alert('SHİFT tuşuna basılmıştır.');

      }else {

          alert("SHİFT tuşuna basılmamıştır. ");
  }
}

onkeypress klavye olayı sadece herhangi bir tuşa basıldığını anlar; değili yoktur.

ÖRNEK :

document.onkeypress = key;

  function key(e) {

        if (e)
		
          alert('herhangi bir tuşa basılmıştır.');
       }

event.stopPropagation() Method


Event.stopPropagation() methodu, bir olayın üst öğelere DOM ağacının kabarcıklanmasını durdurur ve üst olay işleyicilerinin yürütülmesini önler.

<body onclick="alert('kabarcıklanma olmaz')">

<button onclick="event.stopPropagation()">Tıkla</button>

</body>

preventDefault() Event Method


PreventDefault() methodu, iptal edilebiliyorsa etkinliği iptal eder; Bu, olayın varsayılan eyleminin gerçekleşmeyeceği anlamına gelir.

Örneğin, şu durumlarda yararlı olabilir:

ÖRNEK :

HTML :

<a id="test" href="http://www.webcebir.com/"> 

Webcebir.com</a>

javascript :

 var x = document.getElementById("test");

 x.addEventListener("click", function(event){

 event.preventDefault()
	
});
Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlacaktır.

7016

KATEGORİ
  • HTML
  • CSS
  • PHP
  • JQUERY
  • PHOTOSHOP
  • JavaScript
  • Web Dünyası
  • Linux
POPÜLER MAKALE
  • HTML RESME LİNK VERME
  • HTML LİNK(Bağlantı)EKLEME - LİNK VERME
  • HTML YAZI VE RESİM ORTALAMA
  • HTML DİV ve SPAN NEDİR?
  • HTML FORM OLUŞTURMA
  • HTML KAYAN RESİM VE Marguee KULLANIMI
  • HTML ARKAPLANA MÜZİK EKLEME
  • CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
  • HTML RESİM EKLEME
  • PHP ceil()-floor()-round() YUVARLAMA FONKSİYONU
ETİKET
WEBCEBİR © 2013 Tüm hakları saklıdır.