Belajar Javascript part 6 : Membuat Event di Javscript

April 12, 2017



Pengertian event pada Javascript  

event pada Javascript adalah sesuatu yang terjadi pada element . contoh kita memiliki sebuah tombol di halaman website atau aplikasi yang kita bangun 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 kalimat .jadi event nya adalh klik . adapun beberapa event yang terdapat pada javascript  adalah sebagai berikut .

Macam - Macam event pada javascript

  • onclick = adalah event jika sebuah element html di klik.
  • onchange = adalah event jika sebuah element html berubah.
  • onmouseover =  adalah event jika sebuah element html di letakkan cursor mouse.
  • onemouseout = adalah event jika saat cursor mouse meninggalkan element html.
  • onkeydown = adalah event jika saat di terjadi pengetikan pada element html.
  • onload = adalah event ketika jika saat element atau halaman di buka.

baiklah kita akam membahas beberapa event javascript yang sudah di jelaskan di atas.


Cara Membuat Event Javascript

Untuk membuat event dengan javascript , kita bisa menambahkan atribut dengan nama-nama event di atas , pada elements html yang ingin kita berikan event. contoh :

<button onclick="di sini berikan aksi yang ingin di lakukan">TOMBOL</button>
Contoh event pada javascript

Untuk contohnya saya akan membuat event klik pada sebuah tombol .jadi saya ingin menampilkan sebuah kalimat jika tombol tersebut di klik.

<!DOCTYPE html>
<html>
<head>
    <title>Belajar Javascript Part 6 : Mengenal Event Pada Javascript</title>
</head>
<body>
    <h1>Mengenal Event Pada Javascript</h1>
    <h2>www.malasngoding.com</h2>

    <!-- memberikan event pada element tombol -->
    <button onclick="tampilkan_nama()">KLIK SAYA</button>

    <!-- id hasil -->
    <div id="hasil"></div>

    <script>       
        // membuat function tampilkan_nama
        function tampilkan_nama(){
            document.getElementById("hasil").innerHTML = "<h3>Nama Saya Adalah Rizqi sunggara</h3>";
        }
       
    </script>
</body>
</html>
coba teman - teman perhatikan pada contoh di atas , terdapat tombol yang kita berikan event klik.

<button onclick="tampilan_nama()">KLIK SAYA</button>
pada saat tombol ini di klik maka akan di jalankan function tampilan_nama().

function tampilan_nama(){
          document.getElementById("hasil").innerHTML = "<h3>Nama saya Rizqi sunggara ";
}

isi dari fuction tampilan_nama() ini adalah menampilkan kalimat "nama saya adalah Rizqi sunggara" pada element id hasil.

perhatikan pada gambar berikut ini.

Pada Saat tombol belum di klik.
Pada saat tombol di klik.

Nah , Muncul "Nama saya Rizqi sunggara"

Referensi :  http://www.malasngoding.com/belajar-javascript-part-7-mengenal-event-pada-javascript/

You Might Also Like

0 comments

Popular Posts

Like us on Facebook

Flickr Images

Subscribe