September 27, 2024 javascript

Cara Trigger Hover Pada Element Secara Manual di Javascript

Ketika elemen di-hover / dilewati kursor, ada beberapa event yang dapat dipicu, seperti mouseenter, mouseover dan mousemove.

Untuk memicu event-event tersebut secara manual, dapat dilakukan dengan membuat objek MouseEvent dengan tipe event yang ingin dipicu, kemudian dimasukkan ke method dispatchEvent pada elemen yang mau dipicu.

Contoh cara memicu event mouseenter.

elem.dispatchEvent(new MouseEvent('mouseenter'))

Contoh cara memicu event mouseover.

elem.dispatchEvent(new MouseEvent('mouseover'))

Contoh cara memicu event mousemove.

elem.dispatchEvent(new MouseEvent('mousemove'))

Perbedaan antara event mouseenter, mouseover dan mousemove pada suatu elemen:

  • mouseenter dipicu ketika kursor pertama kali masuk ke elemen tersebut.
  • mouseover dipicu ketika kursor masuk ke elemen tersebut beserta children-nya.
  • mousemove dipicu ketika kursor bergerak di dalam elemen tersebut.