javascript DOM : DOM events
javascript DOM : DOM events
Events pada Javascript merepesentasikan sebuah kejadian yang terjadi di dalam DOM
Kejadiannya ITU bisa di lakukan oleh user misal(mouse event, keyboard event,dll)
Ataupun events ini bisa dilakukan tomatis oleh API misalnya (animasi selesai di jalankan,halaman selesai di load,dll)
Ada beberapa cara untuk menetapkan events ini atau istilahnya cara mendengarkan events
•events handler
•inline html attribute
•element methode
•addEventListener()
1.event handler
Cara memanggil events handler kalian memanggil keyword nya on<event>
Contoh event handler inline html attribute
Untuk Membuat event handler inline html attribute di element nya kita harus menambahkan on<event> = menjalankanfunction()
-di html
<p class="p3" onclick ="ubahwarna()">paragraf 3</p>
-di js
const p3 = document.querySelector('.p3');
function ubahwarna() {
p3.style.backgroundColor = 'skyblue';
}
contoh event handler element methode
function ubahwarna() {
p2.style.backgroundColor = 'skyblue';
}
const p2 = document.queySelector('.p2');
p2.onclick = ubahwarna;
contoh addEventListener()
Kalau methode ini dia lebih baru daripada on fungsinya sama aja tapi silahkan kalian cari perbedaanya
Untuk mencontohkan nya Misal kita punya element p dan jika element p nya di klik akan ada alert('ini sudah di tekan:)
const p4 = document.querySelector('p')
p4.addEventListener('click' , function() {
alert('ini sudah ditekan');
});
Mungkin ITU dia event pada Javascript
even list
Daftar event
•mouse event
•keyboard event
•resources event
•fokus event
•view event
•form event
•css animation & Transition event
•drag & drop event
•dll.
Mouse event
•click
•dblclick
•mouseover
•mouseenter
•mouseup
•wheel
•dll.
Keyboard event
•keydown
•keypress
•keyup
View event
•resize
•scroll
Form event
•reset
•submit
Komentar
Posting Komentar