Bu yazımızda Jquery ile olay kullanımını inceleyeceğiz.
Event (Olay) Nedir ?
Olaylar bir web sayfasında yaptığımız şeylerdir. Mesela bir butona tıklamak, bir inputa yazı yazmak gibi. Sırayla jquery'de olay kullanımına değinelim.
$(document).ready() Olayı
Sayfa tamemen yüklendikten sonra olaylara tepki verilmesini istiyorsak bu olayı kullanırız.
<script type="text/javascript">
$(document).ready(function(){
})
</script>
click Olayı
Bir elemente, butona veya linke sadece bir kere tıkladığımız zaman işlem yapmak istiyorsak bu olayı kullanırız. Aşağıdaki örneği inceleyelim.
<!DOCTYPE html>
<html>
<head>
<title>Jquery Eğitimi</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<button id="tikla">Tıkla</button>
<script type="text/javascript">
$(document).ready(function(){
$('#tikla').click(function(){
alert("Elemente bir kere tıkladın.");
})
})
</script>
</body>
</html>
Tıkla butonuna bir kere tıkladığımızda ekranda alert mesajı olarak Elemente bir kere tıkladın yazar. Butona her tıklamanda bu yazı tekrar tekrar alert ekranında gösterilir.
dblclick Olayı
Eğer bir elemente peş peşe iki kere tıkladıktan sonra işlem yapılmasını istiyorsak bu olay tetikleyicisini kullanırız.
<button id="tikla">Tıkla</button>
<script type="text/javascript">
$(document).ready(function(){
$('#tikla').dblclick(function(){
alert("Elemente çift tıkladın.");
})
})
</script>
mouseenter Olayı
Fare bir elementin üzerine geldiği zaman işlem yaptırmak istiyorsak mouseenter olay tetikleyicisini kullanırız.
<button id="tikla">Tıkla</button>
<script type="text/javascript">
$(document).ready(function(){
$('#tikla').mouseenter(function(){
alert("Şu an elementin üzerindesin.");
})
})
</script>
mouseleave Olayı
Eğer fare elementin üzerinden ayrıldığı zaman işlem yapmak istiyorsak mouseleave olay tetikleyicisini kullanırız.
<button id="tikla">Tıkla</button>
<script type="text/javascript">
$(document).ready(function(){
$('#tikla').mouseleave(function(){
alert("Beni terketme.");
})
})
</script>
mousedown Olayı
Fare bir elementin üzerinde iken sağ, sol veya orta tuşuna basarsak bu olay tetikleyicisi çalışır.
<button id="tikla">Tıkla</button>
<script type="text/javascript">
$(document).ready(function(){
$('#tikla').mousedown(function(){
alert("Fare ile bir işlem gerçekleşti.");
})
})
</script>
mouseup Olayı
Fare bir elementin üzerinde iken sağ,sol veya orta tuşlardan herhangi biri basılıyken, elimizi çektiğimiz anda bir işlem yapılmasını istiyorsak bu olay işleyicisini kullanırız.
<button id="tikla">Tıkla</button>
<script type="text/javascript">
$(document).ready(function(){
$('#tikla').mouseup(function(){
alert("Farenin bir tuşuna tıkayıp bıraktın.");
})
})
</script>
hover Olayı
Fare bir elementin üzerine geldiğinde ve üzerinden ayrıldığında ayrı ayrı işlemler yapmak istiyorsak hover olayını kullanırız.
<button id="tikla">Tıkla</button>
<script type="text/javascript">
$(document).ready(function(){
$('#tikla').hover(function(){
alert("Hoşgeldin.");
},function(){
alert("Güle Güle")
})
})
</script>
focus Olayı
Form elemanlarına odaklandığımız zaman işlem yapmak istiyorsak fıcus olayını kullanırız.
<input type="text" name="">
<script type="text/javascript">
$(document).ready(function(){
$('input').focus(function(){
$(this).css('border','3px solid red');
})
})
</script>
blur Olayı
Eğer form alanına odaklandıktan sonra çıkarsak işlem yapmak için blur olayını kullanırız.
<input type="text" name="">
<script type="text/javascript">
$(document).ready(function(){
$('input').blur(function(){
$(this).css('border','3px solid green');
})
})
</script>
Jquery on Metodu
on metodu ile bir elemente birden fazla olay işleyicisi ekleyebiliriz.
<p>Zafer</p>
<script type="text/javascript">
$(document).ready(function(){
$("p").on({
mouseenter: function(){
$(this).css("background-color", "lightgray");
},
mouseleave: function(){
$(this).css("background-color", "lightblue");
},
click: function(){
$(this).css("background-color", "yellow");
}
});
})
</script>
İkinci Kullanım Yöntemi:
$("p").on("click", function(){
$(this).hide();
});
