myNotlar Logo

onClick Olayı (Event)


JavaScript onClick olayı (event), ilgili elemente fare ile tıklandığı zaman tetiklenir. HTML onClick özelliği element üzerinde click olayı gerçekleştiği zaman çalıştırılacak fonksiyonun veya betiğin (script) belirtilmesini sağlar.

HTML dahilindeki sadece tek bir fonksiyon belirtilebilen bu tip olay yönetim fonksiyonlarına olay tutucu (event handler) ismi verilir. Fakat, HTML DOM'da birden fazla olay yönetim fonksiyonu belirtilebildiği için olay tutucusu isminden ziyade olay dinleyici (event listener) ismi kullanılmaktadır. DOM'da olay dinleyici fonksiyonlar attachEvent ve addEventListener fonksiyonları ile ilgili elemente eklenebilir/bağlanabilir.

HTML Sözdizimi

<element onclick="betik" > ... </element>

DOM Sözdizimi

element.onclick = fonkBetik;

betik = element.onclick
betikonclick olayı tetiklendiğinde çalıştırılacak betik (script) kodlarını belirtir.
fonkBetikonclick olayı tetiklendiğinde çalıştırılacak fonksiyon adını veya betik kodlarını belirtir.

Dönüş Değeri

betikFonksiyon belirtildiyse fonksiyon gövdesi veya betik kodları döner.

Örnek

Aşağıdaki örnek, JavaScript onClick olay tutucu kullanarak Button kontrollerine tıklandığı zaman İstiklal Marşı'mızın gösterilmesini/gizlenmesi göstermektedir.

<html>
<head>
	<title>JavaScript onClick Olay tutucu örneği</title>
	
<style type="text/css">
body { font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 10pt; }
#discerceve { width: 400px; border: solid 4px #59f; padding: 5px; }
#iccerceve { width: 378px; border: solid 1px #59f; padding: 10px; font-weight: bold; color: #606060; }
</style>

<script type="text/javascript">
var IstiklalMarsi = "<h3 style=\"text-align:center;\">İSTİKLAL MARŞI</h3>"+
"Korkma, sönmez bu şafaklarda yüzen al sancak <br />"+
"Sönmeden yurdumun üstünde tüten en son ocak. <br />"+

"O benim milletimin yıldızıdır parlayacak! <br />"+
"O benimdir, o benim milletimindir ancak! <br /><br />"+

"Çatma, kurban olayım, çehreni ey nazlı hilal! <br />"+
"Kahraman ırkıma bir gül... ne bu şiddet, bu celâl? <br />"+

"Sana olmaz dökülen kanlarımız sonra helal. <br />"+
"Hakkıdır, Hakk'a tapan milletimin istiklal. <br /><br />"+
"<div style=\"text-align:right;\">Mehmet Akif ERSOY</div><br/>";

function IstiklalMarsiGoster() {
	document.getElementById('iccerceve').innerHTML = IstiklalMarsi;
}
function IstiklalMarsiGizle() {
	document.getElementById('iccerceve').innerHTML = '';
}
</script>
</head>
<body>
<input type="button" value="İstiklal Marşı'nı Göster" onClick="IstiklalMarsiGoster()" />
<input type="button" value="Gizle" onClick="IstiklalMarsiGizle()" />

<br/><br/>

<div id="discerceve">
	<div id="iccerceve">	</div>
</div>

</body>
</html>
Test Edin


Elementler

click olayının gerçekleşebileceği/kontrol edilebileceği HTML etiketleri/elementleri

A (Anchor) | ABBR | ACRONYM | ADDRESS | AREA | B (Bold) | BIG | BLOCKQUOTE | BODY | BUTTON | CANVAS | CAPTION | CITE | CODE | COL | COLGROUP | DD | DEL | DFN | DIV | DL | DT | EM | FIELDSET | FORM | H1,H2,H3,H4,H5,H6 | HR | I (Italic) | IMG | INPUT | INPUT-hidden | INPUT-text | INPUT-password | INPUT-checkbox | INPUT-radio | INPUT-submit | INPUT-reset | INPUT-file | INPUT-image | INPUT-button | INS | KBD | LABEL | LEGEND | LI | LINK | MAP | MARQUEE | NOFRAMES | NOSCRIPT | OBJECT | OL | OPTGROUP | OPTION | P (Paragraph) | PRE | Q (Quote) | SAMP | SELECT | SMALL | SPAN | STRONG | SUB | SUP | TABLE | TBODY | TD | TEXTAREA | TFOOT | TH | THEAD | TR | TT | U (Underline) | UL | VAR

İlgili Başlıklar
 
myNotlar Hakkında
Telif Hakkı © 2007-2009 mynotlar.com Tüm Hakları Saklıdır. Kopyalanamaz. Yayınlanamaz.
E-Posta : support@myNotlar.com

| Tek Kişilik Oyunlar | Sudoku | Oyunlar |