Html5 derslerimize devam ediyoruz.Bu derste event yani olay yakalayıcı olan
addEventListener fonksiyonunu işliyeceğiz.Öncelikle ne tür olayları yakalıyor ona bakalım.Mouse hareket,tıkla,klavye tıklamaları,form etkileşimleri,yüklenme,değişim gibi bir çok eventı içinde barındırıyor.Bu derste hepsini tek tek incelemiyeceğiz.addEventListener kullanımına ve event isimlerine bakacağız.Gerekli eventları ilerki derslerde ayrıntılı işliyeceğiz.
addEventListener(olay ,fonksiyon ,false)
temel kalıbı bu şekilde.
canvas.addEventListener("click",function(){ //işlemler },false)
canvas.addEventListener("click",fonksiyon_ismi,false)
örnek kullanımları ise bu şekilde.
Eventları ise şunlar :
click : Mouse sol tıklama olayı.
dblclick : Mouse sol 2 kez ard arda tıklama.
mousedown : Mouse sol tışa basıldığı an.
mouseup : Mouse sol tıktan elimizi çektiğimiz an.
mousemove : Mouse hareket ettiği zaman.
keydown,keypress,keyup : Klavye tuş yakalama evıntları.
load : Yükleme tamamlandığı an.genek sayfa ve resim için kullanılır.
change : Form elemanlarında değişim olduğunda.
focus : Form elemanlarına odaklanıldığında.
blur : Form elemanlarında odaktan çıkıldığında.
genel kullanılan eventlar bunlar.
Genel örnek :
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Ustaderslik</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(function(){
var canvas = document.getElementById('canvas'),
cizim= canvas.getContext('2d');
canvas.addEventListener('click',tik, false);
canvas.addEventListener('dblclick', function() { $("span").text("çift tıklama"); }, false);
window.addEventListener('keyup', function(e) { $("span").text(e.which+" tuşa bastın" ); }, false);
function tik(){
$("span").text("tek tıklama");
}
})
</script>
<style type="text/css">
canvas{border:1px solid #ddd;}
</style>
</head>
<body>
<canvas id="canvas" width="400" height="200"></canvas> <br />
<span>tıkla-çift tıkla-tuşlara bas</span>
</body>
</html>
Yukarıda kullanımı ile ilgili bir kaç örnek yaptık.
UstaDerslik
