Javascript Event Handlers (Olay Yöneticileri)

ksc10

ksc10

Katılımcı Üye
29 Ocak 2016
414
2
Burdan
EEi2n0.png
[FONT=Trebuchet MS, serif]Javascript Event Handlers (Olay Yöneticileri)[/FONT]
[FONT=Trebuchet MS, serif]Javascript’in bir web sayfasını interaktif yapabilmesinin en büyük faktörü olay yöneticileridir.[/FONT]
[FONT=Trebuchet MS, serif]Olay yöneticileri sayfa veya sayfadaki herhangi bir element ile etkileşime girildiği zaman istediğimiz olayların gerçekleşmesini sağlar.[/FONT]


[FONT=Trebuchet MS, serif]Örnek kullanım:[/FONT]
[FONT=Trebuchet MS, serif]Html Kodu:[/FONT]
Kod: 
 [FONT=Trebuchet MS, serif]<img src=”resimurlsi” onclick=”alert(‘resme tıkladınız’)”/>[/FONT]
[FONT=Trebuchet MS, serif]Yukarıdaki onclick olayı ile resim üzerinde bir defa tıkladığında ekrana resme tıkladınız uyarısı vermesini sağladık.[/FONT]
[FONT=Trebuchet MS, serif]Olaylardaki Javascript kodları etiketlerin içine yazılabildiği gibi fonksiyonlara referans verilerek de kullanılabilir.[/FONT]
[FONT=Trebuchet MS, serif]Örnek kullanım:[/FONT]
[FONT=Trebuchet MS, serif]JS Kodu:[/FONT]
Kod: 
 [FONT=Trebuchet MS, serif]function tiklama(){[/FONT]
 [FONT=Trebuchet MS, serif]    alert(“tikladiniz”);[/FONT]
 [FONT=Trebuchet MS, serif]}[/FONT]

[FONT=Trebuchet MS, serif]Html Kodu:[/FONT]
Kod: 
 [FONT=Trebuchet MS, serif]<img src=”resimurlsi” onclick=”tiklama()”/>[/FONT]
[FONT=Trebuchet MS, serif]Şimdi gelelim olaylara.[/FONT]


lxinLW.png

​
[FONT=Trebuchet MS, serif]Eklendiği elementin üstüne bir defa tıklandığında olacak olayları temsil eder.[/FONT]
[FONT=Trebuchet MS, serif]Örnek kullanım:[/FONT]
[FONT=Trebuchet MS, serif]JS Kodu:[/FONT]
Kod: 
 [FONT=Trebuchet MS, serif]function tektiklama(){[/FONT]
 [FONT=Trebuchet MS, serif]    alert(“Tek tıkladınız”);[/FONT]
 [FONT=Trebuchet MS, serif]}[/FONT]
 [FONT=Trebuchet MS, serif]Html Kodu:[/FONT]
Kod: 
 [FONT=Trebuchet MS, serif]<button onclick=”tektiklama()”>Buraya Tıkla</button>[/FONT]
OfGQHU.png

​
[FONT=Trebuchet MS, serif]Eklendiği elemetin üstüne çift tıkladığı zaman olacak olayları temsil eder.[/FONT]
[FONT=Trebuchet MS, serif]Örnek kullanım:[/FONT]
[FONT=Trebuchet MS, serif]JS Kodu:[/FONT]
Kod: 
 [FONT=Trebuchet MS, serif]function cifttiklama(){[/FONT]
 [FONT=Trebuchet MS, serif]    alert(“Çift Tıkladınız”);[/FONT]
 [FONT=Trebuchet MS, serif]}[/FONT]
[FONT=Trebuchet MS, serif]Html Kodu:[/FONT]
Kod: 
 [FONT=Trebuchet MS, serif]<button ondblclick=”cifttiklama()”>Çift Tıkla</button>[/FONT]
[FONT=Trebuchet MS, serif]Olayın mantığını kavradığımıza göre hızlıca diğer olay yöneticilerini de göstereyim.[/FONT]

OZM8VP.png

​
[FONT=Trebuchet MS, serif]Eklendiği elementin üzerine gelindiğinde olacak olayları temsil eder.[/FONT]
[FONT=Trebuchet MS, serif]Örnek kullanım:[/FONT]
[FONT=Trebuchet MS, serif]Html Kodu:[/FONT]
Kod: 
 [FONT=Trebuchet MS, serif]<button onmouseover=”alert(‘butonun üzerine geldiniz’)”>Üzerine Gel</button>[/FONT]
Jmhwac.png

​
[FONT=Trebuchet MS, serif]Eklendiği elementin üzerinden fare imleci çekildiği zaman olacak olayları temsil eder.[/FONT]
[FONT=Trebuchet MS, serif]Örnek kullanım:[/FONT]
[FONT=Trebuchet MS, serif]Html Kodu:[/FONT]
Kod: 
 [FONT=Trebuchet MS, serif]<button onmouseout=”alert(‘butonun üzerine çekildiniz’)”>Çek Ellerini Üzerimden</button>[/FONT]
W0RKuX.png

​
[FONT=Trebuchet MS, serif]Eklendiği elementin üzerinde fare imleci hareket ettirildiği zaman olacak olayları temsil eder.[/FONT]
[FONT=Trebuchet MS, serif]Örnek kullanım:[/FONT]
[FONT=Trebuchet MS, serif]Html Kodu:[/FONT]
Kod: 
 [FONT=Trebuchet MS, serif]<button onmousemove=”alert(‘Git başka yerde oyna’)”>Buralarda gezinme</button>[/FONT]
VjYJpE.png

​
[FONT=Trebuchet MS, serif]Eklendiği elementin üzerine basıldığı an gerçekleşen olayları temsil eder. onclick’ten farkı bu olayla fare tuşunun bırakılmasına gerek yoktur.[/FONT]
[FONT=Trebuchet MS, serif]Örnek kullanım:[/FONT]
[FONT=Trebuchet MS, serif]Html Kodu:[/FONT]
Kod: 
 [FONT=Trebuchet MS, serif]<button onmousedown=”alert(‘Çok bastırma’)”>Bas bana :)</button>[/FONT]
YzEL0U.png

​
[FONT=Trebuchet MS, serif]Eklendiği elementin üzerinde fare tuşu bırakıldığı an olacak olayları temsim eder.[/FONT]
[FONT=Trebuchet MS, serif]Örnek kullanım:[/FONT]
[FONT=Trebuchet MS, serif]Html Kodu:[/FONT]
Kod: 
 [FONT=Trebuchet MS, serif]<button onmousedown=”alert(‘Böyle daha iyi’)”>Bırak beni</button>[/FONT]
DNURmX.png

​
[FONT=Trebuchet MS, serif]Eklendiği element aktifken yani focused haldeyken bir tuşa basıldığında olacak olayları temsil eder.[/FONT]
[FONT=Trebuchet MS, serif]Eğer onkeydown olayını body elementi için kullanırsanız sayfa açıkkken olacak olayları kullanabilirsiniz.[/FONT]
[FONT=Trebuchet MS, serif]Aşağıdaki kodu herhangi bir tuşa basıldığında olacak olayları gösterir.[/FONT]
[FONT=Trebuchet MS, serif]Örnek kullanım:[/FONT]
[FONT=Trebuchet MS, serif]Html Kodu:[/FONT]
Kod: 
 [FONT=Trebuchet MS, serif]<body onkeydown=”alert(‘Böyle daha iyi’)”>Sayfa içeriği</body>[/FONT]
[FONT=Trebuchet MS, serif]Eğer basılmasını istediğimiz tuşu ayarlama istiyorsak if-else statement ile bunu ayarlayabiliriz. Body elementi için ayarlayabileceğimiz gibi, herhangi bir elementin etiketine eklemeden de Javascript kodları içerisinden window bileşeni ile de kullanabiliriz. Aşağıda örnek kodu vereceğim sonra açıklamasını yapacağım.[/FONT]
[FONT=Trebuchet MS, serif]Örnek kullanım:[/FONT]
[FONT=Trebuchet MS, serif]JS Kodu:[/FONT]
Kod: 
 [FONT=Trebuchet MS, serif]window.onkeydown=function(olay){[/FONT]
 [FONT=Trebuchet MS, serif]    if(olay.keyCode==32){[/FONT]
 [FONT=Trebuchet MS, serif]        alert(“Boşluk tuşuna bastın”)[/FONT]
 [FONT=Trebuchet MS, serif]    }else{[/FONT]
 [FONT=Trebuchet MS, serif]        //Aksi halde birşey yapmıyoruz.[/FONT]
 [FONT=Trebuchet MS, serif]    }[/FONT]
 [FONT=Trebuchet MS, serif]}[/FONT]
[FONT=Trebuchet MS, serif]Gelelim açıklamasına. “window” ibaresi ile elementin tarayıcı penceresi olduğunu belirttik. Onkeydown olayını bir fonksiyona atadık. Fonksiyon içerisine olay değişkeni parametresi verdik. İllaki olay ismi vermek zorunda değilsiniz bu arada. Daha sonradan bir tuşa basıldığı zaman işlem gerçekleşmesi yerine, if-else statement kullanarak istenilen tuş ile işlem yapılmasını sağladık. Olay.keyCode değeri 32 ise yani basılan tuş 32 kodlu tuş (Boşluk tuşuna tekabül eder) ise ekrana uyarı bastırmasını sağladık.[/FONT]


mSHgq6.png

​
[FONT=Trebuchet MS, serif]Metin kutusu içinde yazı seçildiği zaman olacak olayları temsil eder.[/FONT]
[FONT=Trebuchet MS, serif]Örnek kullanım:[/FONT]
[FONT=Trebuchet MS, serif]Html Kodu:[/FONT]
Kod: 
 [FONT=Trebuchet MS, serif]<input type=”text” onselect=”alert(‘yazıyı seçtin’)”/>[/FONT]
NLg3zo.png

​
[FONT=Trebuchet MS, serif]Eklendiği Text Inputu aktifken olacak olayları temsil eder.[/FONT]
[FONT=Trebuchet MS, serif]Örnek kullanım:[/FONT]
[FONT=Trebuchet MS, serif]Html Kodu:[/FONT]
Kod: 
 [FONT=Trebuchet MS, serif]<input type=”text” onfocus=”alert(‘kutu aktif’)”/>[/FONT]
nyc5HO.png

​
[FONT=Trebuchet MS, serif]Eklendiği Text Inputu aktiflikten çıkınca olacak olayları temsil eder.[/FONT]
[FONT=Trebuchet MS, serif]Örnek kullanım:[/FONT]
[FONT=Trebuchet MS, serif]Html Kodu:[/FONT]
Kod: 
 [FONT=Trebuchet MS, serif]<input type=”text” onblur=”alert(‘Benimle ilgilenir misin?’)”/>[/FONT]
rdcqGA.png

​
[FONT=Trebuchet MS, serif]Body elementine yazılır. Tarayıcı penceresini boyutu değiştiği zaman gerçekleşecek olayları temsil eder.[/FONT]
[FONT=Trebuchet MS, serif]Örnek kullanım:[/FONT]
[FONT=Trebuchet MS, serif]Html Kodu:[/FONT]
Kod: 
 [FONT=Trebuchet MS, serif]<body onresize=”alert(‘percere boyutu değişti’)”>Sayfa içeriği</body>[/FONT]
TMefkm.png

​
[FONT=Trebuchet MS, serif]Eklendiği elementin yüklenme olayını temsil eder. Eğer body elementine eklerseniz, sayfanın yüklenme sırasında olacak olayları ayarlayabilirsiniz.[/FONT]
[FONT=Trebuchet MS, serif]Örnek kullanım:[/FONT]
[FONT=Trebuchet MS, serif]Html Kodu:[/FONT]
Kod: 
 [FONT=Trebuchet MS, serif]<body onload=”alert(‘sayfa yüklendi’)”>Sayfa içeriği</body>[/FONT]
jnCXny.png

​
[FONT=Trebuchet MS, serif]Elementin kaldırılacağı zaman olacak olayları temsil eder. Eğer body elementi içerisine eklerseniz, sayfa kapatılırken olacak olayları ayarlayabilirsiniz.[/FONT]
[FONT=Trebuchet MS, serif]Örnek kullanım:[/FONT]
[FONT=Trebuchet MS, serif]Html Kodu:[/FONT]
Kod: 
 [FONT=Trebuchet MS, serif]<body onunload=”alert(‘Hoşçakalın’)”>Sayfa içeriği</body>[/FONT]
[FONT=Trebuchet MS, serif]Yazı anlatımı kendime aittir. Eğer yazıyı beğendiyseniz birşey yapmanıza gerek yok. Siz bilirsiniz. Yapacağınız benim bi’ işime yaramaz zaten :)[/FONT]
[FONT=Trebuchet MS, serif]İYİ FORUMLAR!!![/FONT]​
 
sh

sh

Üye
31 Ara 2018
107
41
sh
Eline sağlık, yararlı. Ben de öğrenmeyi düşünüyorum. 1 saat sonra karar değiştireceğim ama olsun :) .
 
ksc10

ksc10

Katılımcı Üye
29 Ocak 2016
414
2
Burdan
noonebey' Alıntı:
Bende javascript ogrenıyorum okucam bu yazdıklarını.
Genişletmek için tıkla ...

pars4203' Alıntı:
Eline sağlık, yararlı. Ben de öğrenmeyi düşünüyorum. 1 saat sonra karar değiştireceğim ama olsun :) .
Genişletmek için tıkla ...
Teşekkür ederim. Aslında sıkıcı bir dil değil. Yaptığının karşılığını çabuk alıyorsun. Ayrıca betik dili olduğundan sıkı kurallı bir dil de değil.


Hichigo' Alıntı:
Harbi kaliteli ve emek var eline sağlık.
Genişletmek için tıkla ...

Shadowfire' Alıntı:
Kaliteli içerik. Eline sağlık.
Genişletmek için tıkla ...


Teşekkür ederim.
 
Cevap yazmak için giriş yap yada kayıt ol.
Üst

Turkhackteam.org internet sitesi 5651 sayılı kanun’un 2. maddesinin 1. fıkrasının m) bendi ile aynı kanunun 5. maddesi kapsamında "Yer Sağlayıcı" konumundadır. İçerikler ön onay olmaksızın tamamen kullanıcılar tarafından oluşturulmaktadır. Turkhackteam.org; Yer sağlayıcı olarak, kullanıcılar tarafından oluşturulan içeriği ya da hukuka aykırı paylaşımı kontrol etmekle ya da araştırmakla yükümlü değildir. Türkhackteam saldırı timleri Türk sitelerine hiçbir zararlı faaliyette bulunmaz. Türkhackteam üyelerinin yaptığı bireysel hack faaliyetlerinden Türkhackteam sorumlu değildir. Sitelerinize Türkhackteam ismi kullanılarak hack faaliyetinde bulunulursa, site-sunucu erişim loglarından bu faaliyeti gerçekleştiren ip adresini tespit edip diğer kanıtlarla birlikte savcılığa suç duyurusunda bulununuz.