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 :

• Event : Bir olay nesnesi oluşturur.

Özellikler :

• event.type :Tetiklendiğinde, olay türünün adını döndürür.
• event.currentTarget :Olay dinleyicileri olayı tetikleyen öğe döndürür.
• event.target:Olayı tetikleyen öğe döndürür.
• button :salt okunur özelliği, olayı tetiklemek için hangi mouse düğmesine basıldığını gösterir.
• buttons:salt okunur özelliği, olay tetiklendiğinde hangi düğmelerin mouse üzerinde (veya başka bir giriş cihazında) basıldığını gösterir.
• event.timeStamp:Olayın ne zaman olduğunu belirten zamanı gösterir.
• event.clientX:Mouse olayı tetiklendiğinde geçerli pencereye göre mouse işaretçisinin yatay koordinatını döndürür.
• event.clientY:Mouse olayı tetiklendiğinde geçerli pencereye göre mouse işaretçisinin dikey koordinatını döndürür.
• event.pageX:Mouse olayı tetiklendiğinde, belgeye göre mouse işaretçisinin yatay koordinatını döndürür.
• event.pageY :Mouse olayı tetiklendiğinde, belgeye göre mouse işaretçisinin dikey koordinatını döndürür
• altKey :Bir anahtar olayı tetiklendiğinde "ALT" anahtarının basılı olup olmadığını döndürür.
• ctrlKey :Bir anahtar olayı tetiklendiğinde "CTRL" anahtarının basılı olup olmadığını döndürür.
• shiftKey :Bir anahtar olayı tetiklendiğinde "SHIFT" tuşuna basılı olup olmadığını döndürür.

Methodlar :

• stopPropagation () :Dom ile birlikte olayların yayılmasını durdurur.
• preventDefault() : Olayı iptal eder.

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:

• Bubbles: (isteğe bağlı) bir Boolen olay kabarcık olup olmadığını gösteren. Varsayılı değer false 'tur.
• cancelable: (İsteğe bağlı) Olayın iptal edilip edilmeyeceğini gösteren bir Boolean. Varsayılı değer false değeridir.
• composed: (İsteğe bağlı) Olayın bir gölge kökünün dışındaki dinleyicileri tetikleyip tetikleyeceğini belirten bir Boolean. Varsayılı değer false değeridir.

//  Ö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ı:

• 0: Sol fare tuşu
• 1: Tekerlek düğmesi veya orta düğme (varsa)
• 2: Sağ fare tuşu
• 3: Genellikle Tarayıcı Geri düğmesi
• 4: Genellikle Tarayıcı İleri düğmesi

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 :

• 1: Sol fare düğmesi
• 2: Sağ fare tuşu
• 4: Tekerlek düğmesi veya orta düğme
• 8: Dördüncü fare düğmesi (genellikle "Tarayıcı Geri" düğmesi)
• 16: Beşinci fare düğmesi (tipik olarak "Tarayıcı İleri" düğmesi)

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:

• Bir "Gönder" düğmesini tıklamak, form gönderilmesini önlemek
• Bir bağlantıyı tıklamak, bağlantıyı URL'yi takip etmesini önlemek

Ö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()
  
});

1571

Gönder