Olay niteliklerinin karşısına script ismi girilir ve şart gerçekleştiğinde ismi verilen script çalıştırılır.
onafterprint
Bu nitelik yazdırma işlemi yapılırken yazdırma penceresi kapatıldıktan sonra script çalıştırmak için kullanılır. Bu niteliğin girilebileceği tek eleman <body> elemanıdır. Yazının yazıldığı an itibarı ile bu nitelik sadece Internet Explorer ve Mozilla Firefox tarafından desteklenmektedir.
onbeforeprint
Bu nitelik yazdırma işlemi yapılırken yazdırma penceresi görünmeden önce script çalıştırmak için kullanılır. Bu niteliğin girilebileceği tek eleman <body> elemanıdır. Yazının yazıldığı an itibarı ile bu nitelik sadece Internet Explorer ve Mozilla Firefox tarafından desteklenmektedir.
onbeforeunload
Bu nitelik bir sayfadan ayrılırken script çalıştırmak için kullanılır. Bu niteliğin girilebileceği tek eleman <body> elemanıdır. Bu nitelik kullanıldığında tarayıcı kendi standart mesajını da görüntüler, bu mesaj çoğunlukla "Sayfadan ayrılmak istediğinize emin misiniz?" tarzında bir mesajdır. Mozilla Firefox'ta bu mesaj dışında bir mesaj görüntülenemez.
onunload
Bu nitelik bir sayfadan ayrıldıktan sonra script çalıştırmak için kullanılır. Bu niteliğin girilebileceği tek eleman <body> elemanıdır. Yazının yazıldığı an itibarı ile bu nitelik sadece Internet Explorer ve Safari tarafından desteklenmektedir.
<!DOCTYPE html>
<html>
<head>
<title>Pencere Şartları</title>
</head>
<body onbeforeprint="print_before()" onafterprint="print_after()" onbeforeunload="unload_before()" onunload="unload()">
<script>
function print_before(){
alert("Sayfa yazdırılmak üzere.");
}
function print_after(){
alert("Sayfa yazdırılıyor.");
}
function unload_before(){
alert("Sayfa kapanacak.");
}
function unload(){
alert("Güle Güle");
}
</script>
<p>Örnekteki dört niteliği de destekleyen Internet Explorer ile örneği deneyebilirsiniz. Yazdırma penceresi kapandıktan sonra çalışacak script için yazdırma işlemi tamamlanmak zorunda değildir. Pencereyi iptal ederek kapatmanız durumunda da script çalışacaktır. Fakat Internet Explorer'da onafterprint niteliği de yazdırma penceresi görünmeden önce çalıştırılmaktadır.</p>
</body>
</html>
onload
Bu nitelik bir eleman yüklendiğinde script çalıştırmak için kullanılır. Bu niteliğin girilebileceği elemanlar <body>, <img>, <input type="image">, <link>, <style> ve <script> elemanlarıdır.
onpageshow
Bu nitelik bir sayfa yüklendiğinde script çalıştırmak için kullanılır. Bu niteliğin girilebileceği tek eleman <body> elemanıdır. Bu niteliğin onload niteliğinden farkı sayfanın her gösteriminde scriptin çalıştırılmasıdır. onload niteliği kullanıldığında yükleme bellekten yapılırsa script çalışmaz.
onpagehide
Bu nitelik bir sayfadan ayrılırken script çalıştırmak için kullanılır. Bu niteliğin girilebileceği tek eleman <body> elemanıdır. Yazının yazıldığı an itibarı ile bu nitelik sadece Internet Explorer ve Safari tarafından desteklenmektedir.
onoffline
Bu nitelik tarayıcı çevrimdışı çalıştırılmaya başladığında script çalıştırmak için kullanılır. Bu niteliğin girilebileceği tek eleman <body> elemanıdır. Yazının yazıldığı an itibarı ile bu nitelik sadece Mozilla Firefox tarafından desteklenmektedir.
ononline
Bu nitelik tarayıcı çevrimiçi çalıştırılmaya başladığında script çalıştırmak için kullanılır. Bu niteliğin girilebileceği tek eleman <body> elemanıdır. Yazının yazıldığı an itibarı ile bu nitelik sadece Mozilla Firefox tarafından desteklenmektedir.
onhashchange
Bu nitelik sayfanın linkindeki kısım belirteci, yani #sembolünden sonraki kısmı değiştiğinde script çalıştırmak için kullanılır. Bu niteliğin girilebileceği tek eleman <body> elemanıdır.
<!DOCTYPE html5>
<html>
<head>
<title>onhashchange</title>
</head>
<body onhashchange="hashchange_ornek()">
<a href="#almanya">Almanya</a>|
<a href="#turkiye">Türkiye</a><br>
<h1 id="almanya">Almanya</h1>
<p>Başkent: Berlin Para Birimi: Euro Eski Para Birimi: Mark</p>
<h1>Birleşik Krallık</h1>
<p>Başkent: Londra Para Birimi: Sterlin</p>
<h1>İtalya</h1>
<p>Başkent: Roma Para Birimi: Euro Eski Para Birimi: Liret</p>
<h1>Fransa</h1>
<p>Başkent: Paris Para Birimi: Euro Eski Para Birimi: Frank</p>
<h1>Portekiz</h1>
<p>Başkent: Lizbon Para Birimi: Euro Eski Para Birimi: Esküdo</p>
<h1>İspanya</h1>
<p>Başkent: Madrid Para Birimi: Euro Eski Para Birimi: Pezeta</p>
<h1 id="turkiye">Türkiye</h1>
<p>Başkent: Ankara Para Birimi: Lira Eski</p>
<h1>İsviçre</h1>
<p>Başkent: Bern Para Birimi: Frank Eski</p>
<script>
function hashchange_ornek(){
alert("Linkteki kısım belirteci değişti");
}
</script>
</body>
</html>
Yukarıdaki örnekteki linkler sayfanın farklı kısımlarına odaklanılmasını sağlamaktadır. Bu yapıldığında linkteki değişimi gözlemleyebilirsiniz. Linkteki kısım belirtecinin değişmesi yazılan JavaScript fonksiyonunu tetiklemektedir.
onresize
Bu nitelik pencere boyutu değiştiğinde script çalıştırmak için kullanılır. Bu niteliğin girilebileceği tek eleman <body> elemanıdır.
<!DOCTYPE html>
<html>
<head>
<title>Onresize</title>
</head>
<body onresize="resize_ornek()">
<p>Pencere boyutunu değiştirin</p>
<script>
function resize_ornek() {
alert("Pencere boyutu değiştirildi.");
}
</script>
</body>
</html>
onerror
Bu nitelik bir hata oluştuğunda script çalıştırmak için kullanılır. Bu nitelik tüm HTML elemanlarına girilebilir.
<!DOCTYPE html>
<html>
<head>
<title>Onerror</title>
</head>
<body>
<p>Görsel yüklenemediği için hata mesajı gösterilmektedir.</p>
<img src="" onerror="hata()">
<script>
function hata(){
alert("Görsel yüklenemedi");
}
</script>
</body>
</html>
onmessage
Bu nitelik mevcut sayfaya bir mesaj gönderildiğinde script çalıştırmaya yarar. Bu niteliğin girilebileceği tek eleman <body> elemanıdır. Bu nitelik yazının yazıldığı an itibarı ile sadece Google Chrome ve Opera tarafından desteklenmektedir.
Örnek olması açısından aşağıdaki iki kod parçası incelenebilir. Bu iki kodla oluşturulacak sayfalar aynı klasörde olmalı ve alttaki kodla oluşturulan sayfanın ismi "cerceve.html" olmalıdır.
<!DOCTYPE html>
<html>
<head>
<title>Ana Sayfa</title>
</head>
<body onmessage="receiver()">
<iframe src="cerceve.html" style="height:60px; width:500px"></iframe>
<script>
function receiver() {
alert("Bir mesaj alındı!");
}
</script>
</body>
</html><!DOCTYPE html>
<html>
<head>
<title>Çerçeve</title>
</head>
<body>
<p>Çerçeveden ana sayfaya bir mesaj gönderilmektedir.</p>
<script>
window.parent.postMessage("mesaj", '*');
</script>
</body>
</html>
Yukarıdaki örnekte çerçeve ana sayfaya bir mesaj göndermektedir. Bu JavaScript ile sağlanmıştır. Ana sayfada ise bu mesajı alınca bir kutu açılmasını sağlayan onmessage niteliği kullanılmıştır.
onpopstate
Bu nitelik gezinme geçmişinde bir değişiklik olduğunda script çalıştırmaya yarar. Bu niteliğin girilebileceği tek eleman <body> elemanıdır. Bu nitelik yazının yazıldığı an itibarı ile sadece Google Chrome, Opera ve Safari tarafından desteklenmektedir. Aşağıdaki örnek çalıştırıldıktan sonra Google linkine tıklayıp sonra da tarayıcıdaki "Geri" tuşuyla sayfaya geri dönülürse script çalıştırılacaktır.
<!DOCTYPE html>
<html>
<head>
<title>Onpopstate</title>
</head>
<body onpopstate="ornek()">
<a href="http://www.google.com">Google</a>
<script>
history.replaceState({page: 1}, "title 1", "?page=1");
function ornek(){
alert("Örnek Yazı");
}
</script>
</body>
</html>
onstorage
Bu nitelik yerel depolamada bir değişiklik olduğunda script çalıştırmaya yarar. Bu niteliğin girilebileceği tek eleman <body> elemanıdır. Bu nitelik kullanıldığında aynı sayfanın farklı pencere ya da sekmelerinde açılmış olanlarında script çalıştırılır. Bu nitelik yazının yazıldığı an itibarı ile sadece Opera ve Safari tarafından desteklenmektedir.
Aşağıdaki örnek kod ile oluşturduğunuz sayfayı iki farklı sekmede açın ve sekmelerden birinde "Değiştir" butonuna tıklayın. Bu durumda diğer sekmede bir mesaj görüntülenecektir. Fakat örneğin çalışması için sayfanın bir sunucu üzerinde olması gereklidir.
<!DOCTYPE html>
<html>
<head>
<title>Onstorage</title>
</head>
<body onstorage="storage_ornek()">
<button id="add" onclick="localStorage.setItem("a","b")">Değiştir</button>
<button id="clear" onclick="localStorage.clear()">Temizle</button>
<script>
function storage_ornek() {
alert("Yerel depolamada değişiklik");
}
</script>
</body>
</html>
Global Nitelikler <<<<< HTML5 >>>>> Form Olayları