JS Bilgiler -10- JavaScript Pencere Olayları (Window Events)
Merhaba, Kullanıcılarımız web sayfamızda bir işlemi gerçekleştirdiğinde bir etkileşime geçilmesi işlemini window events ile yapıyoruz.
onclick Event
Kullanıcı bir öğeye tıkladığında onclickile tanımlanmış olay gerçekleşir. Örnek olarak sayfada herhangi bir yere tıklandığında bir uyarı mesajı çıkarabiliriz.
<!DOCTYPE html>
<html>
<body onclick="fonksiyonum()">
<h1>onclick Event</h1>
<p>Sayfada herhangi bir yere tıkladığınızda uyarı mesajı açılacaktır. Bu olay sayfanın herhangi bir yerine tıklandığında gerçekleşebilmesi için body etiketine olay ekledik.</p>
<script>
function fonksiyonum() {
alert('İşte oldu!');
}
</script>
</body>
</html>
Örnekteki kodlarla bir HTML sayfası oluşturup çalıştırdığınızda sayfanın herhangi bir yerine tıklandığında İşte oldu! mesajını alacaksınız. onclick="fonksiyonum()"özelliğini başka bir HTML etiketine verseydik o etikete tıklandığında çalışacaktı. Örnek olarak bir yazıya, bir görsele veya bir düğmeye bu özelliği kazandırabiliriz.
ondblclick Event
İki kere tıklama yapıldığında gerçekleşecek eylemdir. Az önceki örneğimizi bu olay ile yapalım.
<!DOCTYPE html>
<html>
<body ondblclick="fonksiyonum()">
<h1>ondblclick Event</h1>
<p>Sayfada herhangi bir yere çift tıkladığınızda uyarı mesajı açılacaktır. Bu olay sayfanın herhangi bir yerine çift tıklandığında gerçekleşebilmesi için body etiketine olay ekledik.</p>
<script>
function fonksiyonum() {
alert('İşte oldu!');
}
</script>
</body>
</html>
onkeydown Event, onkeyup Event ve onkeypress Event
Birbirleri ile bağlantılı bu 3 olay klavyeden bir tuşa basılması ile gerçekleşir. Basıldığı anda gerçekleşecek olay onkeydown, basılı kalırken gerçekleşecek olay onkeypressve tuş bırakıldığı anda gerçekleşecek olay onkeyupile ifade edilir.
<!DOCTYPE html>
<html>
<body>
<p id="p1">Aşağıdaki kutuya bir harf yazın.</p>
Yazın: <input type="text" onkeydown="fonksiyonum()" onkeypress="fonksiyonum2()" onkeyup="fonksiyonum3()">
<script>
function fonksiyonum() {
document.getElementById("p1").innerHTML = "Tuşlandı!";
}
function fonksiyonum2() {
document.getElementById("p1").innerHTML = "Tuşlanıyor!";
}
function fonksiyonum3() {
document.getElementById("p1").innerHTML = "Bırakıldı!";
}
</script>
</body>
</html>
onload Event
Bu olay sayfa yüklendiği sırada çalıştırılacak olan olaydır. Sayfa her yüklendiğinde tekrar çalışacaktır.
<!DOCTYPE html>
<html>
<body onload="fonksiyonum()">
<h1>Merhaba!</h1>
<script>
function fonksiyonum() {
alert("Sayfa yüklendi!");
}
</script>
</body>
</html>
onunload Event
Bu olay sayfa kapanırken çalışacak olaydır. Sayfanın yenilenmesi de aynı olayı tetikler.
<!DOCTYPE html>
<html>
<body onunload="fonksiyonum()">
<h1>Merhaba!</h1>
<p>Sayfayı kapatın veya yenileyin.</p>
<p><strong>Bilgi:</strong> Tarayıcı ayarlarına göre onunload olayı çalışmayabilir.</p>
<script>
function fonksiyonum() {
alert("Sayfamı ziyaret ettiğiniz için teşekkürler!");
}
</script>
</body>
</html>
onmousedown Event ve onmouseup Event
Mouse düğmesine tıklandığı (onmousedown) ve bırakıldığı (onmouseup) sırada gerçekleşecek olan olaylardır.
<!DOCTYPE html>
<html>
<body>
<p id="paragrafim" onmousedown="mouseDown()" onmouseup="mouseUp()">
Yazıya tıklayın! mouseDown() fonksiyonumuz bu paragrafın üzerine tıklandığı zaman çalışır ve yazının rengini kırmızı yapar. mouseUp() fonksiyonumuz ise tıklama bırakıldığı zaman çalışır ve yazının rengini yeşil yapar.
</p>
<script>
function mouseDown() {
document.getElementById("paragrafim").style.color = "red";
}
function mouseUp() {
document.getElementById("paragrafim").style.color = "green";
}
</script>
</body>
</html>
onmouseenter Event ve onmouseleave Event
Mouse ile öğenin üzerine gelindiğinde (onmouseenter) ve üzerinden ayrıldığında (onmouseleave) gerçekleşecek olaylardır.
<!DOCTYPE html>
<html>
<body onmouseenter="faregeldi()" onmouseleave="faregitti()">
<h1>Mouse ile sayfa üzerine gelin.</h1>
<script>
function faregeldi(){
alert('Mouse sayfaya giriş yaptı.');
}
function faregitti(){
alert('Mouse sayfadan ayrıldı.');
}
</script>
</body>
</html>
onmouseover Event , onmouseenter Event , onmousemove Event
Bu 3 event birbirine benzer özellikler gösterir ancak işlevleri farklıdır. onmouseover olayını bir önceki örneğimizde görmüştük. Mouse ile üzerine gelindiğinde işlem gerçekleşiyordu.
- onmouseover: Fareyle üzerine gelme olayı, fare işaretçisi bir öğeye veya alt öğelerinden herhangi birine girdiğinde tetiklenir.
- onmouseenter: onmouseenter olayı yalnızca fare işaretçisi öğeye çarptığında tetiklenir.
- onmousemove: fare imleci bir öğenin üzerindeyken her hareket ettirildiğinde onmousemove olayı tetiklenir.
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
}
h1 {
color: blue;
}
div {
margin: 15px 50px 0px 50px;
border: 2px solid black;
padding: 10px;
text-align: center;
background-color: lightblue;
}
p {
color: white;
}
h3 {
background-color: white;
border-radius: 10px;
}
</style>
<script>
function over(e) {
document.getElementById("sover").innerHTML++;
}
function enter(e) {
document.getElementById("senter").innerHTML++;
}
function move(e) {
document.getElementById("smove").innerHTML++;
}
</script>
</head>
<body>
<h1>OKT</h1>
<h4>Mouseover, Mouseenter ve Mousemove Örnekleri</h4>
<div class="over" onmouseover="over(this)">
<h3>Mouseover olayı
<span id="sover">0</span>
kez tetiklendi.
</h3>
<p>Bu olay, fare işaretçisi div öğesine veya alt öğelerine her girdiğinde gerçekleşir. (burada alt öğeler h3 veya p)</p>
</div>
<div class="enter" onmouseenter="enter(this)">
<h3>Mouseenter olayı
<span id="senter">0</span>
kez tetiklendi.
</h3>
<p>Bu olay yalnızca fare işaretçisi div öğesine girdiğinde oluşur.</p>
</div>
<div class="move" onmousemove="move(this)">
<h3>Mousemove olayı
<span id="smove">0</span>
kez tetiklendi.
</h3>
<p>Bu olay, fare işaretçisi div öğesinin üzerindeki her hareketinde oluşur.</p>
</div>
</body>
</html>
onmouseout Event ve onmouseleave Event
Bu iki olay da birbirine yakın durumlarda çalıştığı için birlikte inceliyoruz.
- onmouseleave olayı yalnızca fare işaretçisi div öğesinin dışına taşındığında gerçekleşir.
- onmouseout olayı, fare işaretçisi div öğesinin dışına taşındığında ve alt öğelerinden (p ve span) ayrıldığında gerçekleşir.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
border: 1px solid black;
margin: 10px;
float: left;
padding: 30px;
text-align: center;
background-color: aqua;
}
p {
background-color: white;
}
</style>
</head>
<body>
<h3>Bu örnek onmouseleave ve onmouseout arasındaki farkı gösterir.</h3>
<p>mouseleave olayı yalnızca mouse işaretçisi div öğesinin dışına taşındığında gerçekleşir.</p>
<p>Onmouseout olayı, fare işaretçisi div öğesinin dışına taşındığında ve alt öğelerinden (p ve span) ayrıldığında gerçekleşir.</p>
<div onmouseleave="leaveFonksiyonu()">
<p>onmouseleave: <br> <span id="test">Mouse ile üstüne gel ve ayrıl!</span></p>
</div>
<div onmouseout="outFonksiyonu()">
<p>onmouseout: <br> <span id="test2">Mouse ile üstüne gel ve ayrıl!</span></p>
</div>
<script>
var x = 0;
var y = 0;
function leaveFonksiyonu() {
document.getElementById("test").innerHTML = x+=1;
}
function outFonksiyonu() {
document.getElementById("test2").innerHTML = y+=1;
}
</script>
</body>
</html>
onfocus, onblur, onfocusin, onfocusout Event
Bu olay ilgili kontrolün aktifleşmesi durumunda çalışır. Örnek olarak bir form sayfasında form kontrolleri arasında gezinirken o anda hangi form öğesini dolduruyorsak o öğe için onfocus olayı çalışır. Bu öğeyi doldurmayı bıraktığımızda gerçekleşecek olayı seçebiliriz. onfocusin ve onfocusout olayları ile de bunu doldurulduğu sırada ve bırakıldığı sırada şeklinde ayırmak da mümkün. Fark olarak onfocus ve onblur olayları doğrudan ilgili öğeyi tetikler. Eğer öğenin veya alt öğelerin odağı kaybedip kaybetmediğini öğrenmek istiyorsanız onfocusin ve onfocusout öğelerini kullanabilirsiniz.
<!DOCTYPE html>
<html>
<body>
Adınızı Yazın: <input type="text" onfocus="sariyap(this)" onblur="beyazyap(this)"><br>
Soyadınızı Yazın: <input type="text" onfocusin="sariyap(this)" onfocusout="beyazyap(this)">
<p>Adınızı Yazın: form öğesine gelindiğinde onfocus özelliği ile arkaplanı sarı yapan sariyap fonksiyonu çalışır.</p>
<p>Soyadınızı Yazın: form öğesine gelindiğinde onfocusin özelliği ile arkaplanı sarı yapan sariyap fonksiyonu çalışır. Herhangi başka bir yere tıklandığında ise onfocusout özelliği ile beyazyap fonksiyonu çalışır ve arkaplanı beyaz olur.</p>
<script>
function sariyap(x) {
x.style.background = "yellow";
}
function beyazyap(x) {
x.style.background = "white";
}
</script>
</body>
</html>
