Bu dersimizde jQuery Dersleri – click ve dblclick olaylarını inceleyeceğiz. Olayları kullanabilmek için seçiciler üzerinden işlem yapacağız..
İlk olarak Click olayı bir nesneye tıklandığında meydana gelir hemen bir örnekle açıklayalım, aşağıdaki kodlar ile “a” etiketini seçip click olayını atıyoruz ve tıklandığında alert fonksiyonu ile ekranda “Linke Tıkladın Şimdi Sayfaya Gideceksin” mesajı veriliyor sonra linkte ki adrese sayfayı yönlendiriyoruz.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bilişim Öğretmeni jQuery Dersleri click olayı</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"> </script>
<script type="text/javascript">
$("document").ready(function(){
$('a').click(function(){
alert("Linke Tıkladın Şimdi Sayfaya Gideceksin")
});
});
</script>
</head>
<body>
<a href="http://www.bilisimogretmeni.com">Bilişim Öğretmeni</a>
</body>
</html>
Sıra geldi dblclick olayına bu da bir nesneye çift tıklandığı zaman çalışır. Uygulamamızda sayfaya dört tane kutu yerleştiriyoruz <div> ile ve bunlara sayfada stil ile sarı rengini veriyoruz dblclick olayı ile div etiketine bağlayıp css üzerinden zemin rengini kırmızı yapıyoruz.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bilişim Öğretmeni jQuery Dersleri dblclick olayı</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"> </script>
<script type="text/javascript">
$("document").ready(function(){
$("div").dblclick(function(){
$(this).css({background:"red"});
});
});
</script>
<style type="text/css">
div {
background:yellow;
width: 60px;
height:60px;
float:left;
margin:10px;
cursor:pointer;
}
</style>
</head>
<body>
<p>Aşağıdaki Kutulara Çift Tıkla </p>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
