8.

DOM Event

Pemrograman Web - ST084

Anna Baita

Fakultas Ilmu Komputer

 OUTLINE

• PENGERTIAN
• JENIS EVENT
• CARA MEMBUAT DOM EVENT
• CONTOH PENGGUNAAN

Fakultas IlmuKomputer
 DOM EVENT

• Event pada javascript merepresentasikan kejadian yang terjadi di dalam DOM

• Kejadian tersebut bisa dilakukan oleh user, misal mouse event,keyboard event
dll
• kejadian terbebut bisa jugadilakukan secara otomatis oleh API, misal animasi
setelah dijalankan, halaman setelah selesai di load.dll

Fakultas IlmuKomputer
 JENIS EVENT

• MOUSE EVENT
• KEYBOARD EVENT
• RESOURCES EVENT
• FOCUS EVENT
• VIEW EVENT
• FORM EVENT
• CSS ANIMATION & TRANSITION EVENT
• DRAG & DROP EVENT
https://developer.mozilla.org/en-US/docs/Web/Events

Fakultas IlmuKomputer
 MOUSE EVENT

Event Name Fired When

click A pointing device has been pressed and released on an element
dbclick a pointing device is clicked twice on an element
mousedown A pointing device is pressed on an element
mouseenter A pointing device is moved onto the element that has listener attached
mouseleave A pointing device is moved over an element (fired continously as the mouse moves)
mouseover A pointing device is moved onto element that has listener attached or onto one of its children
mouseup A pointing device button is released over an element
select some text is being selected

Fakultas IlmuKomputer
 KEYBOARD EVENT

Event Name Fired When

keydown Any key is pressed
keypress Any Key(except: Shift,Fn or Capslock) is in pressed possition(fired contonously)
keyup Any Key is released

Fakultas IlmuKomputer
 RESOURCE EVENT

Event Name Fired When

error A resource filed to load
abort A loading of a resource has been aborted
load A resource and its dependent resources have finished loading
unload A document or dependent resource is being unloaded
beforeunload The window, document and its resources are about to be unloaded

Fakultas IlmuKomputer
 FOCUS EVENT

Event Name Fired When

focus An Element has received focus (does not bubble)
blur An Element Has lost focus (does not bubble)
focusin An element is an about receive focus (does bubble)
focusout An element is an about lose focus (does bubble)

Fakultas IlmuKomputer
 VIEW EVENT

Event Name Fired When

fullscreenchange An element was toggled to or from full screen mode
fullscreenerror it was possible to switch to full screen mode for technical reason or because
the permission was denied
resize the document view has been resized
scroll the document view or an element has been scrolled

Fakultas IlmuKomputer
 FORM EVENT

Event Name Fired When

reset the reset button is pressed
submit the submit button is pressed

Fakultas IlmuKomputer
 CSS ANIMATION AND TRANSITION EVENT

Event Name Fired When

animationstart A CSS animation has started
animationcancel A CSS animation has aborted
animationend A CSS animation has completed
animationiteration A CSS animation is repeated

Fakultas IlmuKomputer
 DRAG AND DROP EVENT

Event Name Fired When

drag An element or text selection is being dragged(fired continously every 350 ms)
dragend A drag operation is being ended(by releasing a mouse button or heating the escape key)
dragenter A dragged element or text selection enters a valid drop target
drop An element is dropped on a valid drop target

Fakultas IlmuKomputer
 CARA MEMBUAT DOM EVENT

• Event Handler
• Inline HTML attribute (not recomended)
• Element Method (recomended)
• AddEventListener

Fakultas IlmuKomputer
 Event Handler

• Inline HTML method

• buat sebuah function untuk menuliskan instruksi yang akan dilakukan oleh
javascript setelah event terjadi
• gunakan keyword on kemudian diikuti nama eventnya.
• contoh: onclick,ondrag,ondrop,onkeyup
• letakkan keyword tersebut ke dalam atribut html yang ingin di beri event
handler, kemudian isikan value dari atrribut tsb dengan memanggil function
yang telah di create

Fakultas IlmuKomputer
 Event Handler

• Inline HTML method

• contoh:
• event name: onclick
• efek yang ingin diberikan: muncul sebuah alert yang berisi informasi ‘Selamat datang ‘

Fakultas IlmuKomputer
 Event Handler

• Inline HTML method

FIle HTML:
index.html

Fakultas IlmuKomputer
 Event Handler

• Inline HTML method

file js:myScript.js

• output:

Fakultas IlmuKomputer
 Event Handler

• Inline HTML method

• contoh2
• event name: onclick
• efek yang ingin diberikan: mengubah warna text dari sebuah element

Fakultas IlmuKomputer
 Event Handler

• Inline HTML method

file html:
index.html

Fakultas IlmuKomputer
 Event Handler

• Inline HTML method

file js:myScript.js

• output

Fakultas IlmuKomputer
 Event Handler- Element Method

• buat sebuah function untuk menuliskan instruksi yang akan dilakukan oleh
javascript setelah event terjadi
• seleksi element HTML yang akan diberi event
• tuliskan keyword sebagai method dan panggil nama functionnya. nama function
tanpa diikuti dengan kurungbuka kurung tutup
• contoh:
• kasus pertama

Fakultas IlmuKomputer
 Event Handler- Element Method

file html:
index.html

Fakultas IlmuKomputer
 Event Handler- Element Method

file js:myScript.js

• output

Fakultas IlmuKomputer
 AddEventListener

• buat sebuah function untuk menuliskan instruksi yang akan dilakukan oleh java
script setelah event terjadi
• lakukan seleksi terhadap element yang ingin diberi event
• gunakan method addEventListener dengan 2 buah parameter: nama event
serta functionnya
• contoh: kasus ke 2

Fakultas IlmuKomputer
 AddEventListener
file html:
index.html

Fakultas IlmuKomputer
 AddEventListener

file js:myScript.js

• output

Fakultas IlmuKomputer
 AddEventListener

• Atau parameter function boleh diisi dengan function expression:

file js:myScript.js

• output

Fakultas IlmuKomputer
• Any Question?
• Thanks

Fakultas IlmuKomputer