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>