HTML5 Canvas Ders-22 Olay Yakalayıcı - addEventListener
UstaDerslik Soru-Cevap Yararlı Araçlar
arama ikon
Diller
Türkçe Türkçe

bilgi UstaDerslik
Bu uyari kutusudur.
Tamam
Anasayfa
İletişim
Üyeler

HTML5 Canvas Ders-22 Olay Yakalayıcı - addEventListener

profil
cArleone
BEĞEN(1)
BEĞENME(0)
GÖRÜNTÜLENME(2566)
RAPOR ET
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.



Kod
Kalın
Vurgu
Resim
Video
Url
CEVAPLA
Tüm Hakları Saklıdır. ©Arleone 2013-2014 UstaDerslik






Giriş
Şifremi Unuttum...
Şifre Talep
  Kuralları Kabul Ediyorum.
Kaydol