jQuery - Olayları İşleme

Olayları kullanarak dinamik web sayfaları oluşturma yeteneğine sahibiz. Olaylar, Web Uygulamanız tarafından tespit edilebilen eylemlerdir.

Örnek olaylar aşağıdadır -

  • Bir fare tıklaması
  • Bir web sayfası yükleniyor
  • Fareyi bir öğenin üzerine getirme
  • Bir HTML formu gönderme
  • Klavyenizde bir tuş vuruşu vb.

Bu olaylar tetiklendiğinde, olay ile hemen hemen istediğiniz her şeyi yapmak için özel bir işlev kullanabilirsiniz. Bu özel işlevler Olay İşleyicilerini çağırır.

Olay İşleyicileri Bağlama

JQuery Olay Modelini kullanarak, DOM öğeleri üzerinde olay işleyicileri oluşturabiliriz. bind() yöntem aşağıdaki gibidir -

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $('div').bind('click', function( event ){
               alert('Hi there!');
            });
         });
      </script>
		
      <style>
         .div{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>
   </head>
	
   <body>
      <p>Click on any square below to see the result:</p>
		
      <div class = "div" style = "background-color:blue;">ONE</div>
      <div class = "div" style = "background-color:green;">TWO</div>
      <div class = "div" style = "background-color:red;">THREE</div>
   </body>
</html>

Bu kod, bölme öğesinin tıklama olayına yanıt vermesine neden olur; Bir kullanıcı daha sonra bu bölümün içine tıkladığında, uyarı gösterilecektir.

Bu, aşağıdaki sonucu verecektir -

Bind () komutunun tam sözdizimi aşağıdaki gibidir -

selector.bind( eventType[, eventData], handler)

Aşağıda parametrelerin açıklaması verilmiştir -

  • eventType- Tıklama veya gönderme gibi bir JavaScript etkinlik türünü içeren bir dize. Olay türlerinin tam listesi için sonraki bölüme bakın.

  • eventData - Bu isteğe bağlı parametre, olay işleyicisine aktarılacak verilerin bir haritasıdır.

  • handler - Olay her tetiklendiğinde yürütülecek bir işlev.

Olay İşleyicilerini Kaldırma

Tipik olarak, bir olay işleyicisi bir kez kurulduktan sonra, sayfanın geri kalan ömrü boyunca etkin kalır. Olay işleyicisini kaldırmak istediğinizde bir ihtiyaç olabilir.

jQuery, unbind()mevcut bir olay işleyicisini kaldırmak için komut. Unbind () sözdizimi aşağıdaki gibidir -

selector.unbind(eventType, handler)

or 

selector.unbind(eventType)

Aşağıda parametrelerin açıklaması verilmiştir -

  • eventType- Tıklama veya gönderme gibi bir JavaScript etkinlik türünü içeren bir dize. Olay türlerinin tam listesi için sonraki bölüme bakın.

  • handler - Sağlanmışsa, kaldırılacak belirli dinleyiciyi tanımlar.

Olay Türleri

Sr.No. Olay Tipi ve Tanımı
1

blur

Öğe odağı kaybettiğinde oluşur.
2

change

Eleman değiştiğinde ortaya çıkar.
3

click

Bir fare tıklandığında ortaya çıkar.
4

dblclick

Fare çift tıklandığında ortaya çıkar.
5

error

Yükleme veya boşaltma vb. Bir hata olduğunda oluşur.
6

focus

Öğe odaklandığında oluşur.
7

keydown

Tuşuna basıldığında oluşur.
8

keypress

Tuşuna basıldığında ve bırakıldığında oluşur.
9

keyup

Anahtar bırakıldığında oluşur.
10

load

Belge yüklendiğinde oluşur.
11

mousedown

Fare düğmesine basıldığında oluşur.
12

mouseenter

Fare bir öğe bölgesine girdiğinde oluşur.
13

mouseleave

Fare bir eleman bölgesinden ayrıldığında oluşur.
14

mousemove

Fare işaretçisi hareket ettiğinde oluşur.
15

mouseout

Fare işaretçisi bir elemanın dışına çıktığında oluşur.
16

mouseover

Fare işaretçisi bir öğenin üzerinde hareket ettiğinde oluşur.
17

mouseup

Fare düğmesi bırakıldığında oluşur.
18

resize

Pencere yeniden boyutlandırıldığında oluşur.
19

scroll

Pencere kaydırıldığında oluşur.
20

select

Bir metin seçildiğinde gerçekleşir.
21

submit

Form gönderildiğinde gerçekleşir.
22

unload

Belgeler kaldırıldığında oluşur.

Etkinlik Nesnesi

Geri arama işlevi tek bir parametre alır; işleyici çağrıldığında, JavaScript olay nesnesi içinden geçirilir.

Olay nesnesi genellikle gereksizdir ve parametre atlanır, çünkü işleyici, işleyici tetiklendiğinde tam olarak ne yapılması gerektiğini bilmek zorunda olduğunda genellikle yeterli bağlam mevcuttur, ancak erişmeniz gereken bazı özellikler vardır.

Etkinlik Özellikleri

Sr.No. Özellik ve Açıklama
1

altKey

Olay tetiklendiğinde Alt tuşuna basıldıysa doğru, değilse yanlış olarak ayarlayın. Alt tuşu, çoğu Mac klavyesinde Option olarak etiketlenmiştir.
2

ctrlKey

Olay tetiklendiğinde Ctrl tuşuna basılırsa true, değilse false olarak ayarlayın.
3

data

İşleyici kurulduğunda, varsa değer, bind () komutuna ikinci parametre olarak geçirildi.
4

keyCode

Keyup ve keydown olayları için bu, basılan tuşu döndürür.
5

metaKey

Olay tetiklendiğinde Meta tuşuna basıldıysa doğru, değilse yanlış olarak ayarlayın. Meta tuşu, PC'lerde Ctrl tuşu ve Mac'lerde Command tuşudur.
6

pageX

Fare olayları için, sayfanın başlangıcına göre olayın yatay koordinatını belirtir.
7

pageY

Fare olayları için, sayfanın başlangıcına göre olayın dikey koordinatını belirtir.
8

relatedTarget

Bazı fare olayları için, olay tetiklendiğinde imlecin bıraktığı veya girdiği öğeyi tanımlar.
9

screenX

Fare olayları için, olayın ekran başlangıcına göre yatay koordinatını belirtir.
10

screenY

Fare olayları için, olayın ekran başlangıcına göre dikey koordinatını belirtir.
11

shiftKey

Olay tetiklendiğinde Shift tuşuna basıldıysa doğru, değilse yanlış olarak ayarlayın.
12

target

Olayın tetiklendiği öğeyi tanımlar.
13

timeStamp

Etkinliğin oluşturulduğu zaman damgası (milisaniye cinsinden).
14

type

Tüm olaylar için, tetiklenen olayın türünü belirtir (örneğin, tıklama).
15

which

Klavye olayları için, olaya neden olan tuş için sayısal kodu belirtir ve fare olayları için hangi düğmeye basıldığını belirtir (1 sol için, 2 orta, 3 sağ için).

 
<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $('div').bind('click', function( event ){
               alert('Event type is ' + event.type);
               alert('pageX : ' + event.pageX);
               alert('pageY : ' + event.pageY);
               alert('Target : ' + event.target.innerHTML);
            });
         });
      </script>
		
      <style>
         .div{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>
   </head>
	
   <body>
      <p>Click on any square below to see the result:</p>
		
      <div class = "div" style = "background-color:blue;">ONE</div>
      <div class = "div" style = "background-color:green;">TWO</div>
      <div class = "div" style = "background-color:red;">THREE</div>
   </body>
</html>

Bu, aşağıdaki sonucu verecektir -

Etkinlik Yöntemleri

Bir Etkinlik Nesnesinde çağrılabilecek yöntemlerin bir listesi vardır -

Sr.No. Yöntem ve Açıklama
1 preventDefault ()

Tarayıcının varsayılan eylemi yürütmesini engeller.
2 isDefaultPrevented ()

Bu olay nesnesinde event.preventDefault () öğesinin hiç çağrılıp çağrılmadığını döndürür.
3 stopPropagation ()

Bir olayın üst öğelere köpürmesini durdurarak, herhangi bir üst işleyicinin olaydan haberdar edilmesini engeller.
4 isPropagationStopped ()

Bu olay nesnesinde event.stopPropagation () öğesinin çağrılıp çağrılmadığını döndürür.
5 stopImmediatePropagation ()

İşleyicilerin geri kalanının yürütülmesini durdurur.
6 isImmediatePropagationStopped ()

Bu olay nesnesinde event.stopImmediatePropagation () öğesinin hiç çağrılıp çağrılmadığını döndürür.

Olay Manipülasyon Yöntemleri

Aşağıdaki tabloda, olayla ilgili önemli yöntemler listelenmektedir -

Sr.No. Yöntem ve Açıklama
1 bağla (tür, [veri], fn)

Her eşleşen öğe için bir işleyiciyi bir veya daha fazla etkinliğe (tıklama gibi) bağlar. Özel olayları da bağlayabilir.
2 kapalı (olaylar [, seçici] [, işleyici (eventObject)])

Bu, canlı olmanın tersini yapar, bağlı bir canlı olayı kaldırır.
3 fareyle üzerine gelme (üzerinden, dışarı)

Fareyi bir nesnenin üzerine ve dışına hareket ettirme gibi gezinmeyi simüle eder.
4 on (olaylar [, seçici] [, veri], işleyici)

İşleyiciyi, tüm geçerli ve gelecekteki eşleşen öğe için bir etkinliğe (tıklama gibi) bağlar. Özel olayları da bağlayabilir.
5 bir (tür, [veri], fn)

Bir işleyiciyi, her eşleşen öğe için bir kez yürütülecek bir veya daha fazla olaya bağlar.
6 hazır (fn)

DOM geçiş yapılmaya ve değiştirilmeye hazır olduğunda yürütülecek bir işlevi bağlar.
7 tetikleyici (olay, [veri])

Eşleşen her öğede bir olay tetikleyin.
8 triggerHandler (olay, [veri])

Bir öğedeki tüm ilişkili olay işleyicilerini tetikler.
9 bağını çöz ([tür], [fn])

Bu, bind'in tersini yapar, ilişkili olayları eşleşen her bir öğeden kaldırır.

Etkinlik Yardımcı Yöntemleri

jQuery ayrıca, yukarıda bahsedilen herhangi bir olay türünü bağlamak için bir olayı tetiklemek için kullanılabilen bir dizi olay yardımcı işlevi sağlar.

Tetikleme Yöntemleri

Aşağıda, tüm paragraflarda bulanıklık olayını tetikleyecek bir örnek verilmiştir -

$("p").blur();

Bağlama Yöntemleri

Aşağıda, bir click tüm <div> olayları -

$("div").click( function () { 
   // do something here
});
Sr.No. Yöntem ve Açıklama
1

blur( )

Eşleşen her öğenin bulanıklık olayını tetikler.
2

blur( fn )

Eşleşen her öğenin bulanıklık olayına bir işlev bağlayın.
3

change( )

Eşleşen her bir öğenin değişiklik olayını tetikler.
4

change( fn )

Eşleşen her öğenin değişiklik olayına bir işlevi bağlar.
5

click( )

Eşleşen her bir öğenin tıklama olayını tetikler.
6

click( fn )

Eşleşen her öğenin tıklama olayına bir işlev bağlar.
7

dblclick( )

Eşleşen her öğenin dblclick olayını tetikler.
8

dblclick( fn )

Eşleşen her öğenin dblclick olayına bir işlev bağlar.
9

error( )

Eşleşen her elemanın hata olayını tetikler.
10

error( fn )

Eşleşen her öğenin hata olayına bir işlevi bağlar.
11

focus( )

Her eşleşen öğenin odak olayını tetikler.
12

focus( fn )

Eşleşen her öğenin odak olayına bir işlevi bağlar.
13

keydown( )

Eşleşen her bir öğenin keydown olayını tetikler.
14

keydown( fn )

Eşleşen her öğenin keydown olayına bir işlev bağlayın.
15

keypress( )

Her eşleşen öğenin tuşa basma olayını tetikler.
16

keypress( fn )

Eşleşen her öğenin tuşa basma olayına bir işlev bağlar.
17

keyup( )

Eşleşen her bir öğenin keyup olayını tetikler.
18

keyup( fn )

Eşleşen her öğenin keyup olayına bir işlev bağlayın.
19

load( fn )

Eşleşen her öğenin yükleme olayına bir işlev bağlar.
20

mousedown( fn )

Eşleşen her öğenin fare indirme olayına bir işlev bağlar.
21

mouseenter( fn )

Eşleşen her öğenin mouseenter olayına bir işlev bağlayın.
22

mouseleave( fn )

Eşleşen her öğenin mouseleave olayına bir işlev bağlayın.
23

mousemove( fn )

Eşleşen her öğenin mousemove olayına bir işlev bağlayın.
24

mouseout( fn )

Eşleşen her öğenin mouseout olayına bir işlev bağlayın.
25

mouseover( fn )

Eşleşen her öğenin fareyle üzerine gelme olayına bir işlev bağlayın.
26

mouseup( fn )

Eşleşen her öğenin mouseup olayına bir işlev bağlayın.
27

resize( fn )

Eşleşen her öğenin yeniden boyutlandırma olayına bir işlev bağlayın.
28

scroll( fn )

Eşleşen her öğenin kaydırma olayına bir işlev bağlayın.
29

select( )

Eşleşen her elemanın seçme olayını tetikleyin.
30

select( fn )

Eşleşen her öğenin select olayına bir işlev bağlayın.
31

submit( )

Eşleşen her öğenin gönderme olayını tetikleyin.
32

submit( fn )

Eşleşen her öğenin submit olayına bir işlev bağlayın.
33

unload( fn )

Eşleşen her öğenin unload olayına bir işlev bağlar.
ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved