DHTML: Event
10.1 Pengantar
Anda telah melihat bahwa halaman web
dapat dikendalikan lewat skrip, dan Anda juga telah melihat bahwa event dapat
memicu skrip, seperti event onclick
dan onsubmit. Bab ini akan membahas
lebih detil mengenai event pada JavaScript, yang memampukan skrip dalam
merespon interaksi pengguna dan memodifikasi halaman sesuai yang diinginkan.
Event memampukan skrip untuk merespon pengguna yang menggerakkan mouse, yang
memasukkan data formulir, atau yang menekan kunci. Event dan penanganan event
membuat aplikasi web lebih responsif, dinamis, dan interaktif.
Pada bab ini, akan didiskusikan
bagaiman membangun fungsi untuk bereaksi ketika sebua event terjadi. Akan
diberikan beberapa contoh penanganan event untuk sembilan event yang umum
dijumpai, termasuk event mouse dan event pemrosesan-formulir.
10.2 Mendaftarkan Event Handler
Fungsi yang menangani event disebut
dengan fungsi penanganan-event atau event
handler. Penugasan suatu fungsi penanganan-event kepada suatu event pada
sebuah simpul DOM dinamakan dengan pendaftaran suatu fungsi penanganan-event.
Sebelumnya, Anda telah mendaftarkan fungsi penanganan-event menggunakan model inline, yang memandang event sebagai
atribut dari elemen XHTML (misalnya, <p
onclick = “fungsiKu()”>). Model lain, yang dikenal sebagai model
tradisional, untuk mendaftarkan fungsi penanganan-event didemonstrasikan pada
Gambar 10.1 bersama dengan model inline.
Pada versi awal penjelajah web, model inline merupakan satu-satunya cara untuk
menangani event. Selanjutnya, Netscape mengembangkan model tradisional dan
Internet Explorer mengadopsinya. Sejak itu, baik Netscape maupun Microsoft
mengembangkan model-model event mutakhir secara terpisah (tidak kompatibel satu
sama lain) dengan fungsionalitas yang lebih baik daripada model inline atau model tradisional. Model
yang dikembangkan oleh Netscape diadaptasi oleh W3C untuk menciptakan
spesifikasi event DOM. Hampir semua penjelajah web mendukung model W3C, tetapi
Internet Explorer tidak melakukannya.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
<?xml
version = "1.0" encoding = "utf-8"?>
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Gambar 10.1: pendaftaran.html -->
<!--
Model Registrasi Event. -->
<html xmlns =
"http://www.w3.org/1999/xhtml">
<head>
<title>Model-Model
Registrasi Event</title>
<style type =
"text/css">
div { padding: 5px;
margin: 10px;
border: 3px solid #0000BB;
width: 12em }
</style>
<script type = "text/javascript">
<!--
// Menangani event onclick tanpa
memedulikan bagaimana ia didaftarkan
function tanganiEvent()
{
alert( "Event
berhasil ditangani." );
} // akhir fungsi tanganiEvent
// mendaftarkan handler
menggunakan model tradisional
function
daftarkanHandler()
{
var tradisional =
document.getElementById( "tradisional" );
tradisional.onclick =
tanganiEvent;
} // akhir fungsi
daftarkanHandler
// -->
</script>
</head>
<body onload = "daftarkanHandler()">
<!-- Event handler didaftarkan
dengan model inline -->
<div id =
"inline" onclick = "tanganiEvent()">
Model registrasi inline</div>
<!-- Event handler didaftarkan
oleh fungsi daftarkanHandler -->
<div id =
"tradisional">Model registrasi tradisional</div>
</body>
</html>
|
Gambar 10.1 Model registrasi event
Ini berarti bahwa untuk menciptakan
situs web lintas-penjelajah, Anda hanya dapat menggunakan mode inline dan model tradisional.
Baris 35 menugaskan “tanganiEvent()” pada atribut onclick dari div pada baris 35-36. Ini merupakan model inline untuk registrasi event yang telah Anda lihat pada
contoh-contoh sebelumnya. Elemen div
pada baris 39 ditugasi sebuah fungsi penanganan-event menggunakan model
tradisional. Ketika elemen body
(baris 33-40) dijalankan, fungsi daftarkanHandler
dipanggil.
Fungsi daftarkanHandler (baris 25-29) menggunakan JavaScript untuk
mendaftarkan fungsi tanganiEvent
sebagai fungsi penanganan-event untuk event onclick dari div dengan id “tradisional”. Baris 27 mendapatkan div, dan baris 28 menugaskan fungsi tanganiEvent kepada properti onclick
dari div.
Perhatikan bahwa pada baris 28, Anda
tidak mengapit tanganiEvent atau
mencantumkan sepasang kurung di akhir nama fungsi, seperti yang Anda lakukan
dengan model inline pada baris 35.
Pada model inline, nilai dari atribut
XHTML merupakan sebuah statemen JavaScript yang akan dieksekusi ketika event
terjadi. Nilai dari properti onclick
dari sebuah simpul DOM bukanlah sebuah statemen yang dapat dieksekusi, tetapi
nama sebuah fungsi yang akan dipanggil ketika event terjadi. Ingat bahwa fungsi
pada JavaScript diperlakukan sebagai data (dilewatkan kepada metode, ditugaskan
kepada variabel, dan lainnya).
Begitu fungsi penanganan-event
didaftarkan pada baris 28, elemen div
pada baris 39 memiliki watak yang sama dengan div pada baris 35-36, karena tanganiEvent
(baris 19-20) ditetapkan untuk menangani event onclick untuk kedua div.
Ketika salah satu div diklik, sebuah dialog alert akan menampilkan “Event
berhasil ditangani”.
Model tradisional memampukan Anda untuk
mendaftarkan fungsi penanganan-event pada kode JavaScript. Ini merupakan
implikasi penting pada apa yang dapat Anda lakukan pada event JavaScript.
Sebagai contoh, registrasi fungsi penanganan-event tradisional memampukan Anda
untuk menugaskan fungsi penanganan-event kepada banyak elemen secara cepat. Hal
ini juga memampukan Anda untuk dengan mudah menggunakan statemen repetisi.
10.3 Event onload
Event onload terpicu atau terjadi kapan saja sebuah elemen selesai
berhasil dimuat (yaitu, semua anaknya dimuat). Seringkali, event ini dipakai di
dalam elemen body untuk menginisiasi sebuah skrip ketika halaman dimuat pada
penjelajah klien. Gambar 10.2 menggunakan event onload untuk tujuan ini. Skrip yang dipanggil oleh event onload memperbarui sebuah pewaktu untuk
mengindikasikan berapa detik sejak dokumen dimuat.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
<?xml
version = "1.0" encoding = "utf-8"?>
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Gambar 10.2: onload.html -->
<!--
Mendemonstrasikan event onload. -->
<html xmlns =
"http://www.w3.org/1999/xhtml">
<head>
<title>Event onload</title>
<script type =
"text/javascript">
<!--
var detik = 0;
// dipanggil ketika halaman
dimuat untuk memulai pewaktu
function mulaiPewaktu()
{
// 1000 milidetik = 1 setik
window.setInterval( "perbaruiWaktu()",
1000 );
} // akhir fungsi mulaiPewaktu
// dipanggil setiap 1000
milidetik untuk memperbarui pewaktu
function perbaruiWaktu()
{
++detik;
document.getElementById(
"sejauhIni" ).innerHTML = detik;
} // akhir fungsi perbaruiWaktu
// -->
</script>
</head>
<body onload = "mulaiPewaktu()">
<p>Banyak detik yang Anda
lewati dalam melihat halaman sejauh ini:
<strong id = "sejauhIni">0</strong></p>
</body>
</html>
|
Gambar 10.2 Mendemonstrasikan event onload
Penggunaan event onload terjadi pada baris 30. Setelah elemen body dimuat, penjelajah web akan memicu event onload. Ini akan memanggil fungsi mulaiPewaktu (baris 15-19), yang akan menggunakan metode window.setInterval untuk menetapkan
bahwa fungsi perbaruiWaktu (baris
22-26) harus dipanggil setiap 1000 milidetik. Fungsi perbaruiWaktu menginkremen variabel detik dan memperbarui kounter pada halaman.
Perhatikan bahwa Anda tidak bisa
menciptakan program ini tanpa event onload,
karena elemen-elemen pada halaman XHTML tidak dapat diakses sampai halaman
dimuat. Jika sebuah skrip di dalam head
mencoba dalam memperoleh simpul DOM untuk suatu elemen XHTML di dalam body, maka getElementById akan menghasilkan null karena body belum
dimuat.
10.4 Event onmousemove, Objek event, dan this
Bagian ini akan mengenalkan event onmouseevent, yang memicu secara
berulang kapanpun pengguna menggerakkan mouse pada halaman web. Objek event dan katakunci this juga akan didiskusikan, yang akan
meningkatkan kapabilitas penanganan-event. Gambar 10.3 menggunakan onmousemove dan this untuk menciptakan sebuah program penggambar sederhana yang
memampukan pengguna untuk menggambar.
Elemen body memiliki sebuah table
dengan tbody yang memuat satu baris
sehingga dapat memberitahu pengguna tentang penggunaan program. Atribut onload (baris 61) memanggil fungsi ciptakanKanvas, yang menginisialisasi
program dengan mengisi tabel.
Fungsi ciptakanKanvas (baris 23-41) mengisi tabel dengan sebuah grid yang
memuat sel-sel. Aturan CSS pada baris 14-15 menetapkan width dan height dari
tiap elemen td menjadi 4px. Baris 11 menetapkan bahwa tabel
berlebar 400px. Baris 13 menggunakan
properti CSS border-collapse untuk
mengeliminasi spasi di antara sel-sel tabel.
Baris 25 mendefinisikan variabel sisi, yang menentukan jumlah sel pada
tiap baris dan jumlah baris yang diciptakan menggunakan beberapa statemen for bersarang pada baris 28-40. Anda
menetapkan sisi menjadi 100 untuk mengisi tabel dengan 10000 sel berukuran 4px. Baris 26 menyimpan elemen tbody sehingga Anda dapat menempelkan
baris-baris pada elemen tersebut.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
|
<?xml
version = "1.0" encoding = "utf-8"?>
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Gambar 10.3: menggambar.html -->
<!--
Sebuah program penggambar sederhana. -->
<html
xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>Program
Penggambar Sederhana</title>
<style type =
"text/css">
#kanvas { width: 400px;
border: 1px solid
#999999;
border-collapse:
collapse }
td { width: 4px;
height: 4px }
th.kunci { font-family: arial,
helvetica, sans-serif;
font-size: 12px;
border-bottom: 1px solid
#999999 }
</style>
<script type =
"text/javascript">
<!--
//fungsi inisialisasi untuk
menyisipkan sel-sel ke dalam tabel
function ciptakanKanvas ()
{
var sisi = 100;
var tbody =
document.getElementById( "tubuhtabel" );
for ( var i =
0; i < sisi; i++ )
{
var baris =
document.createElement( "tr" );
for ( var j
= 0; j < sisi; j++ )
{
var sel =
document.createElement( "td" );
sel.onmousemove =
prosesGerakanMouse;
baris.appendChild(
sel );
} // akhir for
tbody.appendChild( baris
);
} // akhir for
} // akhir fungsi ciptakanKanvas
// memproses event onmousemove
function
prosesGerakanMouse( e )
{
// mendapatkan objek event
dari IE
if ( !e )
var e =
window.event;
// mengubah warna sel menjadi
biru jika kunci Ctrl ditekan
if ( e.ctrlKey )
this.style.backgroundColor
= "blue";
// mengubah warna sel menjadi
biru jika kunci Shift ditekan
if ( e.shiftKey )
this.style.backgroundColor
= "red";
} // akhir fungsi
prosesGerakanMouse
// -->
</script>
</head>
<body onload =
"ciptakanKanvas()">
<table id = "kanvas"
class = "kanvas"><tbody id = "tubuhtabel">
<tr><th class
= "kunci" colspan = "100">Tekan <tt>ctrl</tt>
untuk menggambar biru. Tekan <tt>shift</tt> untuk
menggambar merah.</th></tr>
</tbody></table>
</body>
</html>
|
Gambar 10.3 Program penggambar sederhana
Beberapa statemen for bersarang pada baris 28-40 mengisi tabel dengan sebuah grid 100
100. Loop sebelah luar menciptakan
setiap baris tabel, sedangkan loop sebelah dalam menciptakan setiap sel. Loop sebelah dalam menggunakan metode createElement untuk menciptakan sebuah
sel tabel, menugaskan fungsi prosesGerakanMouse
sebagai fungsi penanganan-event untuk event onmousemove pada sel, dan menempelkan sel sebagai anak dari baris.
Event onmousemove dari sebuah elemen
terpicu atau terjadi kapanpun pengguna menggerakkan mouse pada elemen tersebut.
Pada titik ini, program diinisialisasi
dan memanggil prosesGerakanMouse
ketika mouse bergerak di atas sembarang sel tabel. Fungsi prosesGerakanMouse (baris 44-57) mewarnai sel, dengan warna yang
bergantung pada kunci yang ditekan ketika event terjadi. Baris 44-48
mendapatkan objek event, yang
menyimpan informasi tentang event yang memanggil fungsi penanganan-event.
Internet Explorer dan Firefox tidak
mengimplementasikan model event yang sama, jadi Anda perlu mengatasi perbedaan
dalam bagaimana objek event
ditangani dan digunakan. Firefox dan penjelajah lain (yang tunduk pada W3C),
seperti Safari dan Opera, melewatkan objek event
sebagai sebuah argumen kepada fungsi penanganan-event. Internet Explorer, di
sisi lain, menyimpan objek event di
dalam properti event dari objek window. Untuk mendapatkan objek event (tanpa memerhatikan jenis
penjelajah yang digunakan), Anda memerlukan sebuah proses dua-langkah. Fungsi prosesGerakanMouse mengambil parameter e pada baris 44 untuk mendapatkan objek
event dari Firefox. Kemudian, jika e tidak terdefinisi (misalnya, jika
klien adalah Internet Explorer), maka Anda menugaskan objek di dalam window.event kepada e pada baris 48.
Selain menyediakan cara berbeda dalam
mengakses objek event, Firefox dan
Internet Explorer juga mengimplementasikan fungsionalitas yang berbeda di dalam
objek event itu sendiri.
Setelah e memuat objek event,
Anda dapat menggunakannya untuk memperoleh informasi seputar event yang
terjadi. Baris 51-56 melakukan penggambaran aktual. Properti ctrlKey dari objek event memuat sebuah nilai boolean yang merefleksikan apakah kunci Ctrl ditekan selama berlangsungnya
event. Jika ctrlKey bernilai true, maka baris 52 akan dieksekusi dan
mengubah warna dari sebuah sel tabel.
Untuk menentukan sel tabel mana yang
akan diwarnai, Anda menggunakan katakunci this.
Makna dari this bergantung konteks.
Pada suatu fungsi penanganan-event, this merujuk ke objek DOM dimana event
terjadi. Skrip menggunakan this
untuk merujuk ke sel tabel dimana mouse digerakkan.
Baris 51-52 mengubah warna
latar-belakang dari sel tabel this
menjadi biru jika kunci Ctrl ditekan
selama berlangsungnya event. Sama halnya, baris 55-56 mewarnai sel dengan merah
jika kunci Shift ditekan. Untuk
melakukan hal ini, Anda menggunakan properti shiftKey dari objek event.
Contoh ini mendemonstrasikan properti ctrlKey dan shiftKey dari objek event.
Gambar 10.4 mencantumkan beberapa properti lintas-penjelajah dari objek event.
|
Properti
|
Penjelasan
|
|
altKey
|
Nilai ini true jika kunci Alt ditekan ketika event terjadi.
|
|
cancelBubble
|
Ditetapkan menjadi true untuk mencegah kondisi bubbling. Default adalah false.
|
|
clientX
dan clientY
|
Koordinat dari kursor mouse di dalam
area klien (misalnya, area aktif dimana halaman web ditampilkan, tidak
termasuk scroolbar, navigation buttons, dll.
|
|
ctrlKey
|
Nilai ini true jika kunci Ctrl ditekan ketika event terjadi.
|
|
keyCode
|
Kode ASCII dari kunci yang ditekan
pada event keyboard.
|
|
screenX
dan screenY
|
Koordinat dari kursor mouse pada
sistem koordinat layar.
|
|
shiftKey
|
Nilai ini true jika kunci Shift ditekan ketika event terjadi.
|
|
type
|
Nama dari event yang terjadi, tanpa prefiks
“on”.
|
Gambar 10.4 Beberapa properti dari objek event
10.5 Rollover dengan onmouseover dan onmouseout
Dua event lain yang dipicu oleh
pergerakan mouse adalah onmouseover dan onmouseout. Ketika kursor berpindah ke
sebuah elemen, sebuah event onmouseover
akan terjadi untuk elemen tersebut. Ketika kursor meninggalkan elemen, sebuah
event onmouseout akan terjadi.
Gambar 10.5 menggunakan kedua event ini untuk menghasilkan efek rollover yang memperbarui teks ketika
kursor digerakkan.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
|
<?xml
version = "1.0" encoding = "utf-8"?>
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Gambar 10.5: onmouseoverout.html -->
<!--
Event onmouseover dan onmouseout. -->
<html xmlns =
"http://www.w3.org/1999/xhtml">
<head>
<title>Event onmouseover
dan onmouseout</title>
<style type =
"text/css">
body { background-color:
wheat }
table { border-style:
groove;
text-align: center;
font-family: monospace;
font-weight: bold }
td { width: 6em }
</style>
<script type =
"text/javascript">
<!--
citra1 = new Image();
citra1.src = "kepala1.gif";
citra2 = new Image();
citra2.src = "kepala2.gif";
function atasMouse( e )
{
if ( !e )
var e =
window.event;
var target =
getTarget( e );
// menukar citra ketika mouse
di atasnya
if ( target.id ==
"kepala" )
{
target.src = citra2.src;
return;
} // akhir if
// jika id sebuah elemen
didefinisikan, tugaskan id kepada color
// untuk mengubah warna teks
dari kode heksa
if ( target.id )
target.style.color =
target.id;
} // akhir fungsi atasMouse
function luarMouse( e )
{
if ( !e )
var e =
window.event;
var target =
getTarget( e );
// menempatkan citra asli
kembali ketika mouse menjauh
if ( target.id ==
"kepala" )
{
target.src = citra1.src;
return;
} // akhir if
// jika id sebuah elemen didefinisikan, tugaskan id kepada innerHTML
// untuk menampilkan nama
colordisplay the color name
if ( target.id )
target.innerHTML =
target.id;
} // akhir fungsi luarMouse
// menghasilkan e.srcElement atau
e.target, mana yang ada
function getTarget( e )
{
if ( e.srcElement )
return
e.srcElement;
else
return e.target;
} // akhir fungsi getTarget
document.onmouseover = atasMouse;
document.onmouseout = luarMouse;
// -->
</script>
</head>
<body>
<img src = "kepala1.gif"
id = "kepala" alt = "Citra Kepala"
/>
<p>Dapatkah Anda
mengetahui sebuah warna dari nilai kode RGB
heksadesimalnya? Lihat kode heksa
berikut, tebak warnanya. Untuk
melihat warna apa, gerakkan mouse ke
atas kode heksa.
Dengan memindahkan mouse keluar dari
tabel kode heksa,
sel akan menampilkan nama warna.</p>
<table>
<tr>
<td id =
"Black">#000000</td>
<td id =
"Blue">#0000FF</td>
<td id =
"Magenta">#FF00FF</td>
<td id =
"Gray">#808080</td>
</tr>
<tr>
<td id =
"Green">#008000</td>
<td id =
"Lime">#00FF00</td>
<td id =
"Maroon">#800000</td>
<td id =
"Navy">#000080</td>
</tr>
<tr>
<td id =
"Olive">#808000</td>
<td id =
"Purple">#800080</td>
<td id =
"Red">#FF0000</td>
<td id =
"Silver">#C0C0C0</td>
</tr>
<tr>
<td id =
"Cyan">#00FFFF</td>
<td id =
"Teal">#008080</td>
<td id =
"Yellow">#FFFF00</td>
<td id =
"White">#FFFFFF</td>
</tr>
</table>
</body>
</html>
|
Gambar 10.5 Event onmouseover dan onmouseout
Untuk menciptakan efek rollover untuk citra, baris 20-23
menciptakan dua objek Image
JavaScript, citra1 dan citra2. Citra citra1 ditampilkan ketika mouse berada di luar citra. Skrip
menetapkan properti src dari tiap Image pada baris 21 dan 23.
Fungsi atasMouse dan luarMouse
ditetapkan untuk memproses event onmouseover
dan onmouseout pada baris 74-75.
Kedua fungsi dimulai (baris 25-28 dan baris 45-48) dengan mendapatkan objek event dan menggunakan fungsi getTarget untuk mencari elemen yang
menerima aksi. Karena perbedaan model event dari penjelajah, Anda memerlukan getTarget (didefinisikan pada baris
66-72) untuk menghasilkan simpul DOM yang menjadi target dari aksi. Pada
Internet Explorer, simpul ini disimpan di dalam properti srcElement dari objek event.
Pada Firefox, ia disimpan di dalam properti target dari objek event.
Baris 68-71 menghasilkan simpul menggunakan properti yang sesuai untuk
menyelesaikan perbedaan model event. Anda harus menggunakan fungsi getTarget (menggantikan this) karena Anda tidak mendefinisikan
fungsi penanganan-event untuk tiap elemen di dalam document. Pada kasus ini, penggunaan this akan menghasilkan
keseluruhan dokumen. Pada kedua luarMouse
dan atasMouse, Anda menugaskan nilai
balik dari getTarget kepada variabel
target (baris 30 dan 50).
Baris 33-37 pada fungsi luarMouse menangani event onmouseover untuk citra kepala dengan
menetapkan atribut srcnya (target.src) menjadi properti src dari objek Image yang sesuai (citra2.src).
Tugas yang sama terjadi pada citra1
pada fungsi luarMouse (baris 53-57).
Skrip menangani event onmouseover untuk sel-sel tabel pada
baris 41-42. Kode ini menguji apakah sebuah id ditetapkan, yang bernilai true
hanya untuk sel-sel tabel kode heksadesimal dan citra kepala pada contoh ini.
Jika elemen yang menerima aksi memiliki sebuah id, kode akan mengubah warna elemen agar sesuai dengan nama warna
yang disimpan di dalam id. Seperti
yang dapat Anda lihat, pada kode untuk table
(baris 86-111), setiap elemen td
yang memuat sebuah kode warna memiliki atribut id yang ditetapkan menjadi salah satu dari 16 warna dasar XHTML.
Baris 61-62 menangani event onmouseout
dengan mengubah teks pada sel tabel ketika kursor mouse meninggalkan kode
heksadesimal tertentu.
10.6 Pemrosesan Formulir dengan onfocus dan onblur
Event onfocus dan onblur
berguna ketika Anda berhubungan dengan elemen-elemen formulir ketika pengguna
memasukkan data (Gambar 10.6). Event onfocus
terjadi ketika sebuah elemen mendapatkan fokus (yaitu ketika pengguna mengklik
sebuah bidang formulir atau ketika menggunakan kunci Tab untuk berpindah ke
elemen formulir lain), dan event onblur
terjadi ketika sebuah elemen kehilangan fokus, yang terjadi ketika kendali lain
mendapatkan fokus.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
|
<?xml
version = "1.0" encoding = "utf-8"?>
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Gambar 10.6: onfocusblur.html -->
<!--
Mendemonstrasikan event onfocus dan onblur. -->
<html xmlns =
"http://www.w3.org/1999/xhtml">
<head>
<title>Sebuah Formulir
Menggunakan Event onfocus dan onblur</title>
<style type =
"text/css">
.tip { font-family:
sans-serif;
color: blue;
font-size: 12px }
</style>
<script type =
"text/javascript">
<!--
var bantuArray =
[ "Masukkan nama Anda
pada kotak masukan ini.", // elemen 0
"Masukkan alamat
e-mail Anda pada kotak masukan ini, " +
"dengan format
user@domain.", // elemen 1
"Periksa kotak ini jika Anda menyenangi situs kami.", // elemen 2
"Pada kotak ini,
masukkan komentar Anda agar " +
"kami dapat
membacanya.", // elemen 3
"Tombol ini
menyerahkan formulir kepada " +
"skrip
sisi-server.", // elemen 4
"Tombol ini menghapus
formulir.", // elemen 5
"" ]; // elemen 6
function bantuTeks(
jumPesan )
{
document.getElementById(
"tip" ).innerHTML =
bantuArray[ jumPesan ];
} // akhir fungsi bantuTeks
// -->
</script>
</head>
<body>
<form id = "formKu"
action = "">
<div>
Nama: <input type =
"text" name = "nama"
onfocus =
"bantuTeks(0)" onblur = "bantuTeks(6)" /><br
/>
E-mail: <input type =
"text" name = "e-mail"
onfocus =
"bantuTeks(1)" onblur = "bantuTeks(6)" /><br
/>
Klik ini jika Anda menyukai situs
ini
<input type = "checkbox" name = "like"
onfocus =
"bantuTeks(2)"
onblur = "bantuTeks(6)" /><br /><hr />
Komentar Anda?<br />
<textarea name =
"komentar" rows = "5" cols = "45"
onfocus = "bantuTeks(3)"
onblur = "bantuTeks(6)"></textarea>
<br />
<input type =
"submit" value = "Submit" onfocus =
"bantuTeks(4)"
onblur = "bantuTeks(6)" />
<input type =
"reset" value = "Reset" onfocus =
"bantuTeks(5)" onblur =
"bantuTeks(6)" />
</div>
</form>
<div id = "tip" class
= "tip"></div>
</body>
</html>
|
Gambar 10.6 Mendemonstrasikan event onfocus
dan onblur
Pada baris 31-32, skrip mengubah teks
di dalam div di bawah formulir
(baris 58) berdasarkan jumPesan yang
dilewatkan kepada fungsi bantuTeks
(baris 29-33). Setiap elemen formulir, seperti masukan nama pada baris 40-41,
melewatkan nilai-nilai yang berbeda kepada fungsi bantuTeks ketika ia mendapatkan fokus (dan event onfocus terjadi). Nilai-nilai tersebut
dipakai sebagai indeks untuk bantuArray,
yang dideklarasikan dan diinisialisasi pada baris 17-27 dan menyimpan pesan
bantuan. Ketika sebuah elemen kehilangan fokus, ia melewatkan nilai 6 kepada bantuTeks untuk menghapus div tip (perhatikan bahwa string kosong
“” disimpan di elemen terakhir array).
10.7 Pemrosesan Formulir dengan onsubmit dan onreset
Dua event lain untuk pemrosesan
formulir adalah onsubmit dan onreset. Kedua event ini terjadi ketika
sebuah formulir diserahkan (submit)
atau direset (Gambar 10.7). Fungsi daftarkanEvent (baris 35-46)
mendaftarkan fungsi penanganan-event untuk formulir setelah tubuh dimuat.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
|
<?xml
version = "1.0" encoding = "utf-8"?>
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Gambar 10.7: onsubmitreset.html -->
<!--
Mendemonstrasikan event onsubmit dan onreset. -->
<html xmlns =
"http://www.w3.org/1999/xhtml">
<head>
<title>Sebuah Formulir
Menggunakan onsubmit dan onreset</title>
<style type =
"text/css">
.tip { font-family: sans-serif;
color: blue;
font-size: 12px }
</style>
<script type =
"text/javascript">
<!--
var bantuArray =
[ "Masukkan nama Anda
pada kotak masukan ini.", // elemen 0
"Masukkan alamat
e-mail Anda pada kotak masukan ini, " +
"dengan format
user@domain.", // elemen 1
"Periksa kotak ini jika Anda menyenangi situs kami.", // elemen 2
"Pada kotak ini,
masukkan komentar Anda agar " +
"kami dapat
membacanya.", // elemen 3
"Tombol ini
menyerahkan formulir kepada " +
"skrip
sisi-server.", // elemen 4
"Tombol ini menghapus
formulir.", // elemen 5
"" ]; // elemen 6
function bantuTeks(
jumPesan )
{
document.getElementById(
"tip" ).innerHTML =
bantuArray[ jumPesan ];
} // akhir fungsi bantuTeks
function daftarkanEvent()
{
document.getElementById(
"formKu" ).onsubmit = function()
{
return confirm(
"Apakah Anda ingin menyerahkan formulir ini?" );
} // akhir fungsi anonim
document.getElementById(
"formKu" ).onreset = function()
{
return confirm(
"Apakah Anda ingin mereset formulir ini?" );
} // akhir fungsi anonim
} // akhir fungsi daftarkanEvent
// -->
</script>
</head>
<body onload = "daftarkanEvent()">
<form id = "formKu"
action = "">
<div>
Nama: <input type =
"text" name = "nama"
onfocus =
"bantuTeks(0)" onblur = "bantuTeks(6)" /><br
/>
E-mail: <input type =
"text" name = "e-mail"
onfocus =
"bantuTeks(1)" onblur = "bantuTeks(6)" /><br
/>
Klik ini jika Anda menyukai situs
ini
<input type =
"checkbox" name = "like" onfocus =
"bantuTeks(2)"
onblur = "bantuTeks(6)" /><br /><hr />
Komentar Anda?<br />
<textarea name =
"komentar" rows = "5" cols = "45"
onfocus =
"bantuTeks(3)" onblur = "bantuTeks(6)"></textarea>
<br />
<input type =
"submit" value = "Submit" onfocus =
"bantuTeks(4)"
onblur = "bantuTeks(6)" />
<input type =
"reset" value = "Reset" onfocus =
"bantuTeks(5)"
onblur = "bantuTeks(6)" />
</div>
</form>
<div id = "tip" class =
"tip"></div>
</body>
</html>
|
Gambar 10.7 Mendemonstrasikan event onsubmit
dan onreset
Baris 37-40 dan baris 42-45
mengintroduksi beberapa konsep baru. Baris 37 mendapatkan elemen form (“formKu”, baris 51-70), kemudian baris 37-40 menugaskan sebuah
fungsi anonim kepada properti onsubmit.
Fungsi anonim didefinisikan tanpa nama. Ia diciptakan hampir sama dengan fungsi
biasa, dimana tidak ada pengenal yang ada setelah katakunci function. Notasi ini berguna ketika
menciptakan sebuah fungsi yang hanya bertujuan untuk menugaskan fungsi tersebut
kepada sebuah fungsi penanganan-event. Anda tidak dapat memanggil sendiri
fungsi tersebut, jadi Anda tidak perlu memberikannya nama.
Fungsi anonim (baris 37-40) yang
ditugaskan kepada properti onsubmit
dari formKu dieksekusi untuk
merespon pengguna yang telah menyerahkan formulir (dengan mengklik tombol Submit atau menekan kunci Enter). Baris
39 mengintroduksi metode confirm
dari objek window. Sama seperti alert, Anda tidak perlu memberikan
prefiks (nama window dan operator
dot) pada pemanggilan metode confirm.
Dialog confirm dipakai untuk
bertanya kepada pengguna, dengan memberikan sebuah tombol OK dan sebuah tombol Cancel.
Jika pengguna menekan OK, maka
dialog confirm akan menghasilkan true; sebaliknya, confirm menghasilkan false.
Fungsi-fungsi penanganan-event untuk
event onsubmit dan onreset hanya menghasilkan nilai dari
dialog confirm, yang menanyakan
pengguna jika ia yakin ingin menyerahkan atau menghapus formulir (baris 39 dan
44). Dengan menghasilkan true atau false, fungsi-fungsi penanganan-event
menentukan aksi untuk event tertentu. Pada kasus ini, aksi yang akan dilakukan
adalah menyerahkan atau menghapus formulir.
10.8 Event Bubbling
Event bubbling merupakan sebuah proses dimana event yang terjadi pada elemen anak akan
“mengambang” ke elemen induk. Ketika sebuah event terjadi pada suatu elemen,
pertama-tama ia akan dikirim ke fungsi penanganan-event pada elemen tersebut
(jika ada), kemudian ia akan dikirim ke fungsi penanganan-event pada induk
(jika ada). Ini akan menghasilkan penanganan event yang tidak diinginkan. Jika
Anda ingin menangani sebuah event pada elemen anak saja, Anda harus membatalkan event bubbling dari kode penanganan-event pada elemen anak tersebut
dengan menggunakan properti cancelBubble
dari objek event, seperti ditunjukkan pada Gambar 10.8.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
|
<?xml
version = "1.0" encoding = "utf-8"?>
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Gambar 10.8: bubbling.html -->
<!--
Membatalkan event bubbling. -->
<html xmlns =
"http://www.w3.org/1999/xhtml">
<head>
<title>Event
Bubbling</title>
<script type =
"text/javascript">
<!--
function klikDokumen()
{
alert( "Anda mengklik
dokumen." );
} // akhir fungsi klikDokumen
function bubble( e )
{
if ( !e )
var e =
window.event;
alert( "Ini akan
mengambang." );
e.cancelBubble = false;
} // akhir fungsi bubble
function tidakBubble( e )
{
if ( !e )
var e =
window.event;
alert( "Ini
tidak akan mengambang." );
e.cancelBubble = true;
} // akhir fungsi tidakBubble
function daftarkanEvent()
{
document.onclick =
klikDokumen;
document.getElementById(
"bubble" ).onclick = bubble;
document.getElementById(
"tidakBubble" ).onclick = tidakBubble;
} // akhir fungsi daftarkanEvent
// -->
</script>
</head>
<body onload =
"daftarkanEvent()">
<p id =
"bubble">Bubbling diaktifkan.</p>
<p id =
"tidakBubble">Bubbling dinonaktifkan.</p>
</body>
</html>
|
Gambar 10.8 Membatalkan event bubbling
Pengklikan elemen p yang pertama (baris 45) akan memicu sebuah pemanggilan terhadap bubble. Kemudia, karena baris 37
mendaftarkan event onclick dari
objek document, maka klikDokumen juga akan dipanggil. Ini
terjadi karena event onclick
mengambang ke document. Ini bisa
jadi merupakan hasil yang tidak Anda inginkan. Pengklikan elemen p yang kedua (baris 46) akan memanggil tidakBubble, yang menonaktifkan event bubbling untuk event ini dengan
menetapkan properti cancelBubble
dari objek event menjadi true.
10.9 Event-Event Lain
Semua event yang dirangkum pada bab ini
merupakan event yang paling umum digunakan. Beberapa event yang didukung oleh
Firefox dan Internet Explorer diberikan dengan penjelasannya pada Gambar 10.9.
|
Event
|
Terjadi ketika
|
|
onabort
|
Transfer citra diinterupsi oleh
pengguna.
|
|
onchange
|
Sebuah pilihan baru diberikan pada
suatu elemen terseleksi, atau ketika sebuah masukan teks berubah dan elemen kehilangan
fokus.
|
|
onclick
|
Pengguna menglik menggunakan mouse.
|
|
ondblclick
|
Mouse diklik ganda.
|
|
onfocus
|
Sebuah elemen formulir mendapatkan
fokus.
|
|
onkeydown
|
Pengguna menekan sebuah kunci ke
bawah.
|
|
onkeypress
|
Pengguna menekan dan melepaskan
sebuah kunci.
|
|
onkeyup
|
Pengguna melepaskan sebuah kunci.
|
|
onload
|
Sebuah elemen dan semua anaknya
dimuat (loaded).
|
|
onmousedown
|
Sebuah tombol mouse ditekan ke bawah.
|
|
onmousemove
|
Mouse bergerak atau berpindah.
|
|
onmouseout
|
Mouse meninggalkan sebuah elemen.
|
|
onmouseover
|
Mouse memasuki sebuah elemen.
|
|
onmouseup
|
Sebuah tombol mouse dilepaskan
|
|
onreset
|
Sebuah form dihapus (direset), ketika
pengguna menekan tombol reset.
|
|
onresize
|
Ukuran sebuah objek berubah
(misalnya, ketika pengguna mengubah ukuran window atau frame).
|
|
onselect
|
Seleksi teks dimulai (berlaku untuk
input atau textarea).
|
|
onsubmit
|
Sebuah formulir diserahkan.
|
Gambar 10.9 Event-event lintas-penjelajah
No comments:
Post a Comment