onclick, oncontextmenu ve ondblclick
Bu nitelikler sırasıyla girildikleri elemana sol tıklama, sağ tıklama ve çift tıklama durumunda script çalıştırmaya yarar.
<!DOCTYPE html>
<html>
<head>
<title>onclick-ondblclick-oncontextmenu</title>
</head>
<body>
<button onclick="onclick_orn()">Sol Tıklama</button>
<button ondblclick="ondblclick_orn()">Çift Tıklama</button>
<button oncontextmenu="oncontextmenu_orn()">Sağ Tıklama</button>
<script>
function onclick_orn(){
alert("Sol tıklama");
}
function ondblclick_orn(){
alert("Çift tıklama");
}
function oncontextmenu_orn(){
alert("Sağ tıklama");
}
</script>
</body>
</html>
onmousedown ve onmouseup
onmousedown niteliği bir elemana tıklandığı anda script çalıştırmaya yarar. onmouseup niteliği ise bir niteliğe tıklandıktan sonra fare butonu bırakıldıktan sonra script çalıştırmaya yarar. onclick niteliğinin de buton bırakıldıktan sonra script çalıştırdığı düşünülecek olursa bu iki nitelik aynı işi yapıyor gibi görünebilir. Aralarında küçük bir fark vardır. onclick niteliği ile nitelenmiş bir elemana tıklandıktan sonra fare butonu bırakılmadan imleç elemanın dışına çekilir ve sonra tekrar elemanın üzerine getirilir, ardından buton bırakılırsa script çalışmayacaktır. onmouseup niteliği ile aynı işlem yapıldığında ise script çalışır. Kısacası onclick niteliği kullanıldığında butona basma ve butonu bırakma işlemleri arasında her zaman elemanın üzerinde kalınmalıdır, aksi takdirde script çalışmayacaktır.
<!DOCTYPE html>
<html>
<head>
<title>onclick-ondblclick-oncontextmenu</title>
</head>
<body>
<button onmousedown="onmousedown_orn()">Onmousedown</button>
<button onmouseup="onmouseup_orn()">Onmouseup</button>
<script>
function onmousedown_orn(){
alert("Onmousedown");
}
function onmouseup_orn(){
alert("Onmouseup");
}
</script>
</body>
</html>
onmouseenter, onmousemove, onmouseover, onmouseout ve onmouseleave
Bu nitelikler bir elemanın üzerine gelindiğinde veya elemanın üzerinden gidildiğinde script çalıştırmaya yarar. onmouseenter, onmousemove ve onmouseover nitelikleri bir elemanın üzerine gelindiğinde script çalıştırırken onmouseout ve onmouseleave nitelikleri imleç bir elemanın üzerinden çekildiğinde script çalıştırır.
<!DOCTYPE html>
<html>
<head>
<title>Onmouse: over, move, enter, leave, out</title>
</head>
<body>
<table style="border:1px solid black">
<tr>
<th onmouseover="ic()" style="border:1px solid black">Onmouseover</th>
<th onmouseenter="ic()" style="border:1px solid black">Onmouseenter</th>
<th onmousemove="ic()" style="border:1px solid black">Onmousemove</th>
<th onmouseleave="dis()" style="border:1px solid black">Onmouseleave</th>
<th onmouseout="dis()" style="border:1px solid black">Onmouseout</th>
</tr>
</table>
<script>
function ic(){
alert("Elemanın üzerine geldiniz.");
}
function dis(){
alert("Elemanın dışına çıktınız.");
}
</script>
</body>
</html>
onscroll ve onmousewheel
onscroll niteliği kaydırma çubukları kullanıldığında script çalıştırmaya yarar. onmousewheel niteliği de bir eleman üzerinde farenin ortadaki tekerleği döndürüldüğünde script çalıştırır.
<!DOCTYPE html>
<html>
<head>
<title>Onmouse: over, move, enter, leave, out</title>
</head>
<body>
<div style="width:100px;height:200px;overflow:scroll" onscroll="scroll_orn()">
Buradaki kaydırma çubuklarını kullanmanız durumunda bir mesaj görüntülenecektir.
</div>
<br><br>
<div style="border:1px solid black;width:200px" onmousewheel="wheel_orn()">
Bu eleman üzerinde farenin ortadaki tekerleğini çevirdiğinizde bir mesaj görüntülenecektir.
</div>
<script>
function scroll_orn(){
alert("Kaydırma çubuklarını kullandınız.");
}
function wheel_orn(){
alert("Farenin tekerleğini kullandınız.");
}
</script>
</body>
</html>
ondragstart, ondrag ve ondragend
HTML5 elemanların sürüklenebilmesine izin vermektedir. ondragstart, ondrag ve ondragend nitelikleri sürüklenecek elemana bağlı olarak script çalıştırmaya yarar. ondragstart niteliği ile çalıştırılacak kod eleman sürüklenmeye başlar başlamaz çalıştırılır, ondrag niteliği ile çalıştırılacak kod eleman sürüklenirken çok kısa aralıklarla tekrar tekrar çalıştırılır, ondragend niteliği ile çalıştırılacak kod ise sürükleme işlemi bitirildiğinde çalıştırılır.
<!DOCTYPE html>
<html>
<head>
<title>Ondragstart, ondrag, ondragend</title>
</head>
<body>
<p>Yazıyı iki dikdörtgen arasında sürükleyin.</p>
<div style="float:left;width:100px;height:50px;border:1px solid black;margin:20px;padding:20px" ondrop="surukleme(event)" ondragover="izin(event)">
<p ondragstart="dragstart_orn(event)" ondrag="drag_orn()" ondragend="dragend_orn(event)" draggable="true" id="paragraf">Sürükle!</p>
</div>
<div style="float:left;width:100px;height:50px;border:1px solid black;margin:20px;padding:20px" ondrop="surukleme(event)" ondragover="izin(event)">
</div>
<div id="mesaj" style="clear:both">
</div>
<script>
function dragstart_orn(event){
event.dataTransfer.setData("Text", event.target.id);
document.getElementById("mesaj").innerHTML = "Sürükleme işlemi başladı.";
}
function drag_orn(event){
var newPar = document.createElement('p');
newPar.textContent= "Sürükleniyor.";
document.getElementById("mesaj").appendChild(newPar);
}
function dragend_orn(){
document.getElementById("mesaj").innerHTML = "Sürükleme işlemi bitti.";
}
function surukleme(event) {
event.preventDefault();
var data = event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(data));
}
function izin(event) {
event.preventDefault();
}
</script>
</body>
</html>
Yukarıdaki örnekte sürükleme işlemi için gerekli kodlar da kullanıldığından örnek biraz karmaşık görünebilir. Temel olarak sürükleme işlemi yapmaya yarayan kodlar dışında ondragstart, ondrag ve ondragend nitelikleri kullanılarak dikdörtgenlerin altına yazılar yazdırılmıştır. ondragstart niteliği ile çalıştırılan kod sadece bir satır yazı yazdırmaktadır. Bu yazı sürükleme işlemine başlandığında görünür. ondrag niteliği ile çalıştırılan kod yeni bir satırda yeni bir paragraf yazdırmaya yaramaktadır. Sürükleme işlemi devam ettiği müddetçe yeni satırlar eklenmeye devam edecektir. dragend niteliği ile çalıştırılan kod ise tüm yazılanları yeni bir paragrafla değiştirmeye yaramaktadır. Fare butonunu bıraktığınızda bu satır görülecektir. Dikkat edilmesi gereken bir nokta bu üç niteliğin de sürüklenen alanlar değil, sürüklenen eleman üzerinde çalışmasıdır. Örneğin sürükleme işlemini kutuların dışında bıraksanız dahi dragend niteliği ile çalıştırılması istenen kod çalışacaktır.
ondragenter, ondragover, ondragleave ve ondrop
Bu dört nitelik de sürüklenebilir alanlara bağlı olarak script çalıştırmaya yarar. ondragenter niteliği sürüklenebilir bir alana sürükleme yapıldığında kod çalıştırmaya yarar, ondragover niteliği ile sürüklenebilir bir cisim sürüklenebilir bir alan içinde tutulduğu müddetçe kod çalıştırılır. ondragleave niteliğinin karşısına girilen kod sürüklenen cisim sürüklenebilir bir alanın dışarısına çıkarıldığında çalıştırılır. ondrop niteliğinin karşısındaki fonksiyon ise sürüklenen cisim sürüklenebilir bir alana bırakıldığında çalışır.
<!DOCTYPE html>
<html>
<head>
<title>Ondragenter, ondragover, ondragleave, ondrop</title>
</head>
<body>
<p>Yazıyı dikdörtgenler arasında sürükleyin.</p>
<div style="float:left;width:100px;height:50px;border:1px solid black;margin:20px;padding:20px" ondragenter="dragenter_orn()" ondragleave="dragleave_orn()" ondrop="ondrop_orn(event)" ondragover="dragover_orn(event)">
<p ondragstart="surukleme(event)" draggable="true" id="paragraf">Sürükle!</p>
</div>
<div style="float:left;width:100px;height:50px;border:1px solid black;margin:20px;padding:20px" ondragenter="dragenter_orn()" ondragleave="dragleave_orn()" ondrop="ondrop_orn(event)" ondragover="dragover_orn(event)">
</div>
<div id="mesaj" style="clear:both">
</div>
<script>
function surukleme(event){
event.dataTransfer.setData("Text", event.target.id);
}
function dragenter_orn() {
document.getElementById("mesaj").innerHTML = "Sürüklenebilir alana girdiniz.";
}
function dragover_orn(event){
event.preventDefault();
var newPar = document.createElement('p');
newPar.textContent= "Sürüklenebilir alandasınız.";
document.getElementById("mesaj").appendChild(newPar);
}
function dragleave_orn(){
document.getElementById("mesaj").innerHTML = "Sürüklenebilir alandan çıktınız.";
}
function ondrop_orn(event) {
event.preventDefault();
var data = event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(data));
document.getElementById("mesaj").innerHTML = "Sürükleme işlemi bitti.";
}
</script>
</body>
</html>
oncut, oncopy ve onpaste
oncut niteliği ile bir elemanın içeriği kesildiğinde script çalıştırılması sağlanır. oncopy niteliği ile bir elemanın içeriği kopyalandığında kod çalıştırılır, onpaste niteliği ile de bir elemana bir şeyler yapıştırıldığında kod çalıştırılır.
<!DOCTYPE html>
<html>
<head>
<title>Oncopy, oncut, onpaste</title>
</head>
<body>
<input value="Bu yazıyı kopyalayın" oncopy="oncopy_orn()">
<input value="Bu yazıyı kesin" oncut="oncut_orn()">
<input value="Buraya bir yazı yapıştırın" onpaste="onpaste_orn()">
<script>
function oncopy_orn(){
alert("Yazıyı kopyaladınız!");
}
function oncut_orn(){
alert("Yazıyı kestiniz!");
}
function onpaste_orn(){
alert("Alana bir yazı yapıştırdınız!");
}
</script>
</body>
</html>
onkeydown, onkeypress ve onkeyup
onkeydown niteliği klavyede bir tuşa basıldığında kod çalıştırmaya yarar, onkeypress niteliği de hemen hemen benzerdir fakat sadece karakter girilebilecek tuşlarla çalışır. onkeyup niteliği ise bir klavye tuşu bırakıldığında kod çalıştırmaya yarar. onkeydown ve onkeypress nitelikleri tuş basılı olduğu müddetçe kodu tekrar tekrar çalıştırır.
<!DOCTYPE html>
<html>
<head>
<title>Onkeypress, onkeydown, onkeyup</title>
</head>
<body>
<input type="text" onkeydown="keydown_orn()" onkeypress="keypress_orn()" onkeyup="keyup_orn()">
<div id="mesaj">
</div>
<script>
function keydown_orn(){
var newPar = document.createElement('p');
newPar.textContent= "Bir tuşa basıldı.";
document.getElementById("mesaj").appendChild(newPar);
}
function keypress_orn(){
var newPar = document.createElement('p');
newPar.textContent= "Tuş basılı durumda.";
document.getElementById("mesaj").appendChild(newPar);
}
function keyup_orn(){
document.getElementById("mesaj").innerHTML = "Tuş bırakıldı";
}
</script>
</body>
</html>
Yukarıdaki örnek kodda üç niteliğin de çalışmasını gözlemleyebilirsiniz. Bir tuşa basılı tutacak olursanız onkeypress ve onkeydown niteliklerinin ikisinin birden kodu tekrar tekrar çalıştıracağını görebilirsiniz. Daha sonra yazıyı silmek için 'Backspace' tuşunu basılı tutacak olursanız bu tuşun onkeypress niteliğini etkilemediğini fakat onkeydown niteliğinin karşısındaki kodu çalıştırdığını görebilirsiniz.
Form Olayları <<<<< HTML5 >>>>> Medya Olayları