Cara menggunakan LISTERNER pada JavaScript

Event pada javascript adalah sesuatu yang terjadi pada element. Misalnya Kalian memiliki sebuah tombol di halaman website Kalian , dan kita ingin memberikan suatu aksi jika tombol tersebut di klik. jadi yang menjadi event di sini adalah “klik”. misalnya jika tombol di klik maka akan di tampilkan pesan yang menampilkan sebuah text. jadi event nya adalah klik.  Sebuah event bisa dipicu oleh browser, bisa juga dipicu oleh pengguna. Kalian bisa menggunakan JavaScript untuk memberikan reaksi tertentu pada sebuah event di halaman web.

Kalian telah mengenal elemen-elemen HTML. Adapun jenis-jenis event di HTML antara lain :
 

• Onmouseover: saat pengguna mengarahkan pointer pada sebuah elemen HTML.
• Onclick: saat pengguna melakukan klik pada sebuah elemen HTML.
• Onmouseout: saat pengguna memindahkan pointer dari sebuah elemen HTML (kebalikan onmouseover).
• Onkeydown: saat pengguna menekan sebuah tombol di keyboard.
• Onchange: saat seuah elemen HTML telah berubah.
• Onload: saat browser selesai memuat halaman web.

Event dapat digunakan untuk untuk menangani, dan memverifikasi, masukan pengguna, tindakan pengguna, dan tindakan browser. Selain itu, event pada Javascript dapat digunakan untuk:

• Hal-hal yang harus dilakukan setiap kali halaman dimuat.
• Hal-hal yang harus dilakukan ketika halaman ditutup.
• Tindakan yang harus dilakukan saat pengguna mengklik tombol.
• Konten yang harus diverifikasi ketika pengguna memasukkan data

Membuat Event pada Javascript

Untuk contoh saya akan membuat event klik pada sebuah tombol. jadi saya ingin menampilkan sebuah text yang di input melalui form input jika tombol tersebut di klik.

< !DOCTYPE html >
< html lang="en" >
< head >
< meta charset="UTF-8" >
< meta http-equiv="X-UA-Compatible" content="IE=edge" >
< meta name="viewport" content="width=device-width, initial-scale=1.0" >
< title >Javascript Event
< style >
  .container{
   width: 30%;
   height: 70px;
   background-color: lightblue;
   padding-top: 20px;
   padding-left: 30px;
   margin: 100px auto;
  }
  input{
   outline: none;
   height: 25px;
   width: 75%;
   font-size: 16px;
   padding-left: 10px;
  }
  button{
   width: 60px;
   height: 25px;
   cursor: pointer;
  }
        .my-name{
            text-transform: capitalize;
            font-weight: bold;
        }
< body >
< div class="container" >
  < input type="text" class="input-name" >
  < button >Save
  < p >Nama Saya : < span class="my-name" >

 < script >
  let input = document.querySelector('.input-name')
  let button = document.querySelector('button')
        let name = document.querySelector('.my-name')

  button.addEventListener('click', function(){
            if(input.value == ''){
                name.innerHTML = 'Inputan Kosong!'
            }else{
                name.innerHTML = input.value
                input.value = ''
            }
        })

Disini saya membuat tampilan HTML sederhana untuk mendemokan cara menggunakan event javascript, tampilannya seperti dibawah ini.

ketika button save di klik, text yang ada pada form input akan tampil di bawah.

button.addEventListener('click', function(){
        if(input.value == ''){
             name.innerHTML = 'Inputan Kosong!'
        }else{
             name.innerHTML = input.value
             input.value = ''
        }
 })

Sulfikardi

Web Design & Web Programming

Halo, saya seorang Web Developer yang terbiasa mengembangkan website menggunakan HTML, CSS, Javascript, PHP, MYSQL, dan Laravel. Disini saya akan membagikan pengalaman saya dalam membangun dan mengembangan website yang responsif dan dinamis

Apa yang dimaksud dengan event listener?

Apa fungsi dari add event listener?

Apa itu event javascript?

Kondisi event apa saja yang dapat diimplementasikan ke dalam javascript?