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

Postingan populer dari blog ini

ethical hacking part 14 membuat malware Trojan

CSS layouting - box model: CSS reset

ethical hacking part 3 reconnaissance & information gethering