JavaScript Örnekleri – JavaScript Olaylar

JavaScript Örneklerimize olaylar konusu ile devam ediyoruz, JavaScirpt te olayların ne olduğu ve nasıl kullanıldıklarından burada bahsetmiştik, şimdi kullanabileceğimiz tüm javascript olaylarını içeren bir uygulama yapıyoruz kaynak kodlar v uygulamanın çalışan hali aşağıda, deneyebileceğiniz olaylar onclick, ondblclick, onmouseover, onmouseout, onmousemove, onfocus, onblur, onkeydown, onkeyup, onkeypress, onchange, onselect, onreset, onsubmit

[wp-js-fiddle url=”http://jsfiddle.net/BilisimOgretmeni/9HK4N/1/” style=”width:100%; height:400px; border:solid #4173A0 1px;”]

<script type="text/javascript" language="JavaScript">
<!-- 
function calistir(textkutusu,calisacak,olay)
{
textkutusu.value +=olay;
calisacak.checked = true;
return 0
//http://www.bilisimogretmeni.com/
}
// -->
</script>
<form name="formA" action="javascript:void(0)"
onreset="calistir(formkutular.text1, formkutular.reset, 'reset ')" 
onsubmit="calistir(formkutular.text1, formkutular.submit, 'submit ')">
<table>
<tr>
<td valign="middle" align="right">
<b>Olayları Bu kutuda deneyebilirisiniz</b>
</td>
<td>
<textarea rows="4" cols="45" wrap="soft" 
onclick=    "calistir(formkutular.text1, formkutular.click, 'click ')" 
ondblclick= "calistir(formkutular.text1, formkutular.dblclick, 'dblclick ')" 
onmouseover="calistir(formkutular.text1, formkutular.over, 'over ')" 
onmouseout= "calistir(formkutular.text1, formkutular.out, 'out ')" 
onmousemove="calistir(formkutular.text2, formkutular.move, '+')" 
onfocus=    "calistir(formkutular.text1, formkutular.focus, 'focus ')" 
onblur=     "calistir(formkutular.text1, formkutular.blur, 'blur ')" 
onkeydown=  "calistir(formkutular.text1, formkutular.keydown, 'keydown ')" 
onkeyup=    "calistir(formkutular.text1, formkutular.keyup, 'keyup ')" 
onkeypress= "calistir(formkutular.text1, formkutular.keypress, 'keypress ')" 
onchange=   "calistir(formkutular.text1, formkutular.change, 'change ')" 
onselect=   "calistir(formkutular.text1, formkutular.select, 'select ')">http://www.bilisimogretmeni.com
Fare ile text kutusunda hareketler yapın, seçin, tıklayın...
</textarea>
</td>
</tr>
<tr>
<td align="right">
<b>Buton olayları</b>
</td>
<td valign="top">
<input type="Reset" value="Temizle">  <input type="Submit" value=
"Gönder">
</td>
<td>
</td>
</tr>
</table>
</form>
<form name="formkutular">
<table>
<tr>
<td valign="middle" align="right">
<b>Çalıştırılan olaylar</b>
</td>
<td>
<textarea name="text1" rows="8" cols="45" wrap= 
"soft"></textarea>
</td>
<td>
<textarea name="text2" rows="8" cols="10" wrap= 
"soft"></textarea>
</td>
</tr>
<tr>
<td align="right">
<b>Sonuç:</b>
</td>
<td colspan="2">
<table>
<tr align="right">
<td>
click:<input type="checkbox" name="click">
</td>
<td>
dblclick:<input type="checkbox" name=
"dblclick">
</td>
<td>
mouseover:<input type="checkbox" name="over">
</td>
<td>
mouseout:<input type="checkbox" name="out">
</td>
<td>
mousemove:<input type="checkbox" name="move">
</td>
</tr>
<tr align="right">
<td>
focus:<input type="checkbox" name="focus">
</td>
<td>
blur:<input type="checkbox" name="blur">
</td>
<td>
keydown:<input type="checkbox" name=
"keydown">
</td>
<td>
keyup:<input type="checkbox" name="keyup">
</td>
<td><!--http://www.bilisimogretmeni.com/ -->
keypress:<input type="checkbox" name=
"keypress">
</td>
</tr>
<tr align="right">
<td>
change:<input type="checkbox" name="change">
</td>
<td>
select:<input type="checkbox" name="select">
</td>
<td>
reset:<input type="checkbox" name="reset">
</td>
<td>
submit:<input type="checkbox" name="submit">
</td>
</tr>
</table>
</td>
</tr><!--http://www.bilisimogretmeni.com/ -->
<tr>
<td></td>
<td>
<input type="Reset" value="Sonuçları temizle">
</td>
</tr>
</table>
</form>
X

Pin It on Pinterest

X