🌐
Miniclass Web
  • Miniclass Web
  • 1. Pengenalan Pemrograman Web
    • Cara Kerja Website
    • Pengenalan Backend dan Frontend
    • HTTP Request dan HTTP Response
  • 2. HTML
    • Pengenalan HTML
    • Text Formatting
    • Link
    • Media
    • List
    • Table
    • Form
    • Grouping
  • 3. CSS
    • Pengenalan CSS
    • Selector CSS
    • Text Formatting
    • Background
    • Border
    • Height dan Width
    • Spacing
    • Layouting
    • Responsive Design
    • Membuat Template Web Responsive
  • 4. Javascript
    • Pengenalan JavaScript
    • Javascript for Java developer
    • Array
    • Fungsi
    • Manipulasi DOM
    • Event
    • Fetch API
    • Object JavaScript
    • UI Component Lanjutan
  • 5. Node.js
    • Pengenalan Node.js
    • Membuat Server HTTP
    • Routing
    • Import Export
    • Node Package Manager
    • Nodemon
  • 6. Express.js
    • Pengenalan Express.js
    • HTTP Method
    • Menerima Data dari URL
    • Middleware
    • Menerima Data dari Body
    • Mengunggah File
    • Menampilkan File dalam Folder
    • Menyimpan Data ke Database MySQL
  • 7. Modern Frontend Development
    • ECMAScript
    • Transpiler
    • Module Bundler
  • 8. React Fundamental
    • Pengenalan React JS
    • Props
    • Event
    • State
    • Conditional Rendering
    • Component Mapping
    • Side Effect
    • Custom Hook
  • 9. React State Management
    • Lifting State Up
    • Context
    • Reducer
  • 10. React Performance
    • Debounce
    • Throttling
    • Memoization
    • Profiling
  • 11. React Testing
    • Component Testing
    • Hook Testing
    • Mocking
    • End to End Testing
  • 12. Object Relational Mapping
    • Pengenalan Object Relational Mapping
  • 13. Document Oriented Database
    • Document Oriented Database
    • Object Document Mapping
  • 14. Web Service
    • REST
    • GraphQL
  • 15. Autentikasi
    • JSON Web Token
    • Membuat Web Service Sederhana
  • 16. Microservices
    • Microservices
    • Microservices Gateway
    • Message Queue
    • Remote Procedure Call
    • Membuat Micro Service Sederhana
  • 18. Caching
Powered by GitBook
On this page
  • 1. Permasalahan
  • 2. Penjelasan Event
  • 3. Penjelasan Detail Materi
  • 3.1 onclick
  • 3.2 onkeypress
  • 3.3 onchange
  • 3.4 onload
  • 3.5 onkeydown
  • 3.6 onkeyup
  • 3.7 onsubmit
  • 4. Referensi

Was this helpful?

  1. 4. Javascript

Event

PreviousManipulasi DOMNextFetch API

Last updated 2 years ago

Was this helpful?

1. Permasalahan

Saat membuat fitur web,terkadang kita membutuhkan perintah sebagai respon sistem terhadap kegiatan yang dilakukan oleh user pada web. Contohnya menampilkan pesan (alert) setelah user mengisi sebuah form, merubah warna button setelah di klik, dll.

2. Penjelasan Event

Event merupakan suatu respon dari web atau sistem terhadap kegiatan yang dilakukan oleh user dimana kegiatan tersebut akan memicu jalannya script javascript yang terhubung dengan file HTML dari web tersebut.

3. Penjelasan Detail Materi

Contoh-contoh event umum pada javascript, misalnya :

3.1 onclick

onclick adalah event yang terjadi ketika user melakukan klik pada suatu element. Syntax dibawah ini akan menampilkan pesan "event click terjadi"

<html>
  <head>
      <title>Belajar Event</title>
  </head>
  <body>
      <button onclick="alert('event click terjadi')">Tekan saya</button>
  </body>
</html>

3.2 onkeypress

onkeypress adalah event yang terjadi ketika user menekan keyboard. Syntax dibawah ini akan menampilkan alert yang berisi "hallo! ini pakai onkeypress" saat user menekan keyboard. Isi alert dapat disesuaikan dengan kebutuhan dan keinginan. Onkeypress tidak berlaku untuk semua key (contoh: ALT, CTRL, SHIFT) di semua browser.

<html>
  <head>
      <title>Belajar Event</title>
  </head>
  <body>
      <input type="text" onkeypress="alert('hallo! ini pakai onkeypress')" />
  </body>
</html>

3.3 onchange

onchange adalah event yang terjadi ketika nilai dari input form berubah. Syntax ini akan menampilkan inputan yang dibuat user dalam console browser.

<html>
  <head>
      <title>Belajar Event</title>
  </head>
  <body>
      <input onchange="console.log('halo, ini pakai onchange')" />
  </body>
</html>

3.4 onload

onload merupakan event yang terjadi ketika suatu elemen selesai dimuat. Pada contoh dibawah ini, akan muncul pesan gambar dimuat saat <img /> selesai dimuat pada browser.

<html>
  <head>
      <title>Belajar Event</title>
  </head>
  <body>
      <img src="wri.jpg" onload="alert('gambar dimuat')" width="100" height="132">
  </body>
</html>

3.5 onkeydown

onkeydown merupakan event yang terjadi ketika tombol keyboard ditekan atau dalam posisi down. jika onkeypress tidak berlaku pada key tertentu, hal itu tidak berlaku pada onkeydown. onkeydown dapat digunakan juga saat user menekan tombol ALT, CTRL,SHIFT

<input type="text" onkeydown="alert('hallo. ini pakai onkeydown')" />

3.6 onkeyup

onkeyup merupakan event yang terjadi ketika tombol keyboard selesai ditekan atau dalam posisi up

<html>
  <head>
      <title>Belajar Event</title>
  </head>
  <body>
      <input type="text" onkeyup="alert('hallo. ini pakai onkeyup')" placeholder="onkeyup" />
  </body>
</html>

3.7 onsubmit

onsubmit merupakan event yang terjadi ketika suatu form akan mengirimkan data inputan

<html>
  <head>
      <title>Belajar Event</title>
  </head>
  <body>
    <form onsubmit="alert('data sudah terkumpul')">
      Enter name: 
      <input type="text">
      <input type="submit">
    </form>
  </body>
</html>

contoh lain dari event javascript dapat dilihat pada referensi

4. Referensi

  • w3school - https://www.w3schools.com/js/js_events.asp

  • flaviocopes - https://flaviocopes.com/javascript-events/