Belajar javaScript : JavaScript – Events

posted in: Tutorial Pemrograman | 0

Apa itu Event ?

Interaksi JavaScript dengan HTML ditangani melalui peristiwa yang terjadi ketika pengguna atau browser memanipulasi halaman.

Ketika halaman di load, hal itu disebut sebuah event. Ketika pengguna mengklik tombol, yang klik juga merupakan event. Contoh lain termasuk event seperti menekan tombol apa saja, menutup jendela, mengubah ukuran jendela, dll

Onclick Event Type

Event ini adalah yang paling sering digunakan dimana jenis event yang terjadi ketika pengguna mengklik tombol kiri mouse-nya. Anda dapat menempatkan validasi Anda, peringatan dll, terhadap jenis acara ini.

Contoh


<html>
<head>

<script type="text/javascript">
<!--
function sayHello() {
alert("Hello World")
}
//-->
</script>

</head>

<body>
<p>Click the following button and see result</p>

<form>
<input type="button" onclick="sayHello()" value="Say Hello" />
</form>

</body>
</html>

Onsubmit Event type

onsubmit adalah suatu peristiwa yang terjadi ketika Anda mencoba untuk mengirimkan formulir. Anda dapat menempatkan validasi formulir Anda terhadap jenis acara ini.

Contoh

Contoh berikut menunjukkan bagaimana menggunakan onsubmit. Di sini kita memanggil fungsi validate() sebelum mengirimkan formulir data ke webserver. Jika fungsi validasi () mengembalikan true, form akan disubmit, jika tidak maka tidak akan submit data.


<html>
<head>

<script type="text/javascript">
<!--
function validation() {
all validation goes here
.........
return either true or false
}
//-->
</script>

</head>
<body>

<form method="POST" action="t.cgi" onsubmit="return validate()">
.......
<input type="submit" value="Submit" />
</form>

</body>
</html>

Onmouseover dan Onmouseout

Kedua jenis acara akan membantu Anda membuat efek yang bagus dengan gambar atau bahkan dengan teks. Event onmouseover dipicu ketika Anda membawa mouse Anda ke setiap elemen tertentu dan onmouseout dipicu ketika Anda memindahkan mouse Anda keluar dari elemen.

Contoh


<html>
<head>

<script type="text/javascript">
<!--
function over() {
document.write ("Mouse Over");
}

function out() {
document.write ("Mouse Out");
}

//-->
</script>

</head>
<body>
<p>Bring your mouse inside the division to see the result:</p>

<div onmouseover="over()" onmouseout="out()">
<h2> This is inside the division </h2>
</div>

</body>
</html>

Leave a Reply