Apa itu acara di html?

Hallo sobat Webhozz jumpa lagi dengan saya, kali ini saya ingin berbagi artikel tentang event recognition di JavaScript. Agar sobat Webhozz tidak bingung, mari masuk ke pembahasan artikel sobat Webhozz

Peristiwa adalah sesuatu yang terjadi dalam elemen HTML. Suatu peristiwa dapat dipicu oleh browser, juga dapat dipicu oleh pengguna. Anda dapat menggunakan JavaScript untuk memberikan reaksi spesifik terhadap suatu peristiwa di halaman web

Contoh pemakaian event telah kalian kenal pada latihan awal, yaitu event title yang ada di tag . Kegunaannya untuk menjalankan sebuah script fungsi JavaScript saat tombol di-klik.

Melalui mekanisme yang sama, Anda dapat menerapkan kode JavaScript ke elemen HTML lain dan ke acara lainnya. Sintaks

Anda sudah mengetahui elemen-elemen HTML. Adapun jenis-jenis event pada HTML antara lain

  • Onmouseover. ketika pengguna mengarahkan pointer pada elemen HTML
  • Klik. ketika pengguna mengklik elemen HTML
  • Onmouseout. ketika pengguna memindahkan penunjuk dari elemen HTML (kebalikan dari onmouseover)
  • Onkeydown. ketika pengguna menekan tombol pada keyboard
  • Dalam perubahan. ketika elemen HTML telah berubah
  • Muat. saat browser selesai memuat halaman web

 

Nah Sobat Webhozz, itulah pembahasan singkat tentang pengenalan event di JavaScript. Semoga pembahasan artikel ini dapat membantu sobat Webhozz semua dalam belajar JavaScript, dan juga dapat menambah pengetahuan sobat Webhozz semua. Sampai jumpa lagi pada pembahasan artikel lainnya yang tentunya lebih menarik

Acara adalah salah satu bagian terpenting dari aplikasi web. Setiap elemen di halaman situs web dapat memicu suatu peristiwa. Tapi apa pentingnya kemampuan?

Event biasanya dimunculkan ketika sebuah elemen telah mengalami perubahan kondisi. Misalnya kita ingin memperbesar gambar yang ditekan oleh pengguna

Bagaimana kita tahu bahwa gambar telah diklik oleh pengguna?

Tentu masih banyak event lain yang bisa dimunculkan oleh elemen tertentu di halaman website. Misalnya, ada suatu peristiwa yang menunjukkan bahwa suatu unsur telah mengalami perubahan ukuran. Ada peristiwa yang menunjukkan bahwa suatu elemen sedang dipindahkan oleh pengguna. Ada juga event yang menandakan bahwa mouse yang digunakan user sedang bergerak

Jadi, apa itu acara?

Cara kerja

Mari kita ambil kasus di mana pengguna menekan sebuah tombol. Ketika sebuah tombol ditekan, beberapa hal terjadi. Memahami event ini dapat membantu kita untuk merespon dengan benar ketika sebuah event dimunculkan

Mari kita asumsikan kode html kita adalah sebagai berikut

<html> <head> <meta charset="UTF-8"> <title>Event</title> </head> <body> <div> <button>Tekan Saya</button> </div> </body> <html> _

Apa yang terjadi ketika tombol target.addEventListener(tipeEvent, listener [, useCapture]); 1 ditekan dapat dilihat pada gambar di bawah ini

Gambar acara

Fase Penangkapan

Saat tombol diatas ditekan, javascript tidak langsung memunculkan event target.addEventListener(tipeEvent, listener [, useCapture]); 0 pada tombol. Jika tidak, javascript memunculkan acara target.addEventListener(tipeEvent, listener [, useCapture]); _0 secara berurutan berdasarkan struktur DOM. Mulai dari objek DOM tertinggi lalu turun hingga mencapai tombol yang sebenarnya ditekan tadi

Jadi, javascript memunculkan acara target.addEventListener(tipeEvent, listener [, useCapture]); _0 untuk pertama kalinya pada target.addEventListener(tipeEvent, listener [, useCapture]); 5. Kemudian, acara target.addEventListener(tipeEvent, listener [, useCapture]); 0 dimunculkan pada target.addEventListener(tipeEvent, listener [, useCapture]); 7, setelah itu target.addEventListener(tipeEvent, listener [, useCapture]); 8, dan selanjutnya ke elemen target.addEventListener(tipeEvent, listener [, useCapture]); 9 yang berada di atas elemen document.addEventListener("click", function() { console.log("document: fase bubbling: click"); }, false); 0. Dan peristiwa ini disebut Fase Penangkapan

Nah, event target.addEventListener(tipeEvent, listener [, useCapture]); _0 ini bisa kita dengarkan saat masih dalam tahap capture. DEMO

JS Bin

Jadi, kami menggunakan metode yang disebut document.addEventListener("click", function() { console.log("document: fase bubbling: click"); }, false); _2 pada elemen untuk mendengarkan acara dari elemen itu

target.addEventListener(tipeEvent, listener [, useCapture]);
  • document.addEventListener("click", function() { console.log("document: fase bubbling: click"); }, false); _3. adalah elemen yang memunculkan peristiwa tersebut
  • document.addEventListener("click", function() { console.log("document: fase bubbling: click"); }, false); _4. adalah event yang dimunculkan (pada contoh diatas, Event typenya adalah "klik")
  • document.addEventListener("click", function() { console.log("document: fase bubbling: click"); }, false); _5. metode yang akan dilakukan pada saat event document.addEventListener("click", function() { console.log("document: fase bubbling: click"); }, false); 4 dimunculkan pada document.addEventListener("click", function() { console.log("document: fase bubbling: click"); }, false); 3
  • document.addEventListener("click", function() { console.log("document: fase bubbling: click"); }, false); _8. ketika nilainya document.addEventListener("click", function() { console.log("document: fase bubbling: click"); }, false); _9, maka document.addEventListener("click", function() { console.log("document: fase bubbling: click"); }, false); 5 akan dijalankan pada fase Capture

Jika kita tidak mengisi nilai untuk document.addEventListener("click", function() { console.log("document: fase bubbling: click"); }, false); 8, maka nilai defaultnya adalah var tombol = document.getElementsByTagName("button")[0]; tombol.addEventListener("click", function( e ) { }, false); 2. Ketika var tombol = document.getElementsByTagName("button")[0]; tombol.addEventListener("click", function( e ) { }, false); _2, maka document.addEventListener("click", function() { console.log("document: fase bubbling: click"); }, false); 5 akan dilakukan pada fase Bubbling. Kami akan membahas fase menggelegak di bagian selanjutnya

Fase Sasaran

Berdasarkan contoh di atas, tahap penangkapan hanya berjalan sampai elemen target.addEventListener(tipeEvent, listener [, useCapture]); 9 yang berada tepat di atas elemen document.addEventListener("click", function() { console.log("document: fase bubbling: click"); }, false); 0. Saat peristiwa target.addEventListener(tipeEvent, listener [, useCapture]); _0 dimunculkan pada elemen document.addEventListener("click", function() { console.log("document: fase bubbling: click"); }, false); 0, fase telah berubah menjadi Fase Target. Ini berarti bahwa acara tersebut telah ditempatkan tepat pada elemen yang mengalami interaksi (dalam contoh kita, elemen yang ditekan oleh pengguna)

Namun, pada kenyataannya, banyak browser menerapkan fase penangkapan ke elemen target (dalam elemen contoh kami document.addEventListener("click", function() { console.log("document: fase bubbling: click"); }, false); 0).

Target Phase Demo

Fase Gelembung

Setelah event target.addEventListener(tipeEvent, listener [, useCapture]); _0 dimunculkan pada elemen document.addEventListener("click", function() { console.log("document: fase bubbling: click"); }, false); 0, javascript memulai fase baru yaitu Fase Bubbling. Fase ini dimulai dari elemen di atasnya document.addEventListener("click", function() { console.log("document: fase bubbling: click"); }, false); _0, yaitu target.addEventListener(tipeEvent, listener [, useCapture]); 9, hingga elemen teratas

Jadi, fase Bubbling adalah kebalikan dari fase Capture. Tapi bagaimana dengan sintaks untuk mendengarkan acara di fase Bubbling ini?

Secara sintaksis, perbedaan fase Bubbling hanya pada parameter document.addEventListener("click", function() { console.log("document: fase bubbling: click"); }, false); 8 yang memiliki nilai var tombol = document.getElementsByTagName("button")[0]; tombol.addEventListener("click", function( e ) { }, false); 2

document.addEventListener("click", function() { console.log("document: fase bubbling: click"); }, false);

Peristiwa Objek

Setiap document.addEventListener("click", function() { console.log("document: fase bubbling: click"); }, false); _5 dipasang pada suatu acara, akan mendapatkan var tombol = document.getElementsByTagName("button")[0]; function callback() { console.log("#tombol ditekan"); } // memasang event handler tombol.addEventListener("click", callback, false); // melepas event handler tombol.removeEventListener("click", callback, false); 7. var tombol = document.getElementsByTagName("button")[0]; function callback() { console.log("#tombol ditekan"); } // memasang event handler tombol.addEventListener("click", callback, false); // melepas event handler tombol.removeEventListener("click", callback, false); _7 memiliki properti menarik yang dapat kita gunakan untuk menanggapi suatu peristiwa

Mari kita ambil contoh menghasilkan acara target.addEventListener(tipeEvent, listener [, useCapture]); 0 di atas

var tombol = document.getElementsByTagName("button")[0]; tombol.addEventListener("click", function( e ) { }, false);

Parameter button.addEventListener("click", function() { orang.getName(); }); 0 diterima oleh document.addEventListener("click", function() { console.log("document: fase bubbling: click"); }, false); 5 di atas memiliki properti berikut

  • button.addEventListener("click", function() { orang.getName(); }); _2 (Tali). jenis acara yang diangkat
  • document.addEventListener("click", function() { console.log("document: fase bubbling: click"); }, false); _3 (Simpul). DOM Node tempat kejadian berasal (dalam contoh kami di atas adalah document.addEventListener("click", function() { console.log("document: fase bubbling: click"); }, false); 0)
  • button.addEventListener("click", function() { orang.getName(); }); _5 (Simpul). DOM Node tempat event sedang dimunculkan (silakan lihat kembali 3 fase di atas)
  • button.addEventListener("click", function() { orang.getName(); }); _6 (Boolean). apakah kita saat ini sedang dalam fase menggelegak?
  • button.addEventListener("click", function() { orang.getName(); }); _7 (Fungsi). kita dapat memanfaatkan properti ini untuk membatalkan respons default dari pengguna ketika document.addEventListener("click", function() { console.log("document: fase bubbling: click"); }, false); 3 mengalami peristiwa button.addEventListener("click", function() { orang.getName(); }); 2. Misalnya, saat var orang: { name: "keripix", handleEvent: function() { alert(this.name); } } button.addEventListener("click", orang, false); _0 ditekan oleh pengguna, respons default adalah membuka tautan. Tetapi kita dapat membatalkan tanggapan dengan menggunakan properti button.addEventListener("click", function() { orang.getName(); }); 7 ini
  • var orang: { name: "keripix", handleEvent: function() { alert(this.name); } } button.addEventListener("click", orang, false); 2 (Fungsi). Hentikan fase saat ini
  • var orang: { name: "keripix", handleEvent: function() { alert(this.name); } } button.addEventListener("click", orang, false); 3 (Fungsi). Hampir sama dengan var orang: { name: "keripix", handleEvent: function() { alert(this.name); } } button.addEventListener("click", orang, false); _2 di atas. Kita akan membahas perbedaannya nanti
  • var orang: { name: "keripix", handleEvent: function() { alert(this.name); } } button.addEventListener("click", orang, false); 5 (Boolean). menentukan apakah button.addEventListener("click", function() { orang.getName(); }); _7 dapat dilaksanakan atau tidak
  • var orang: { name: "keripix", handleEvent: function() { alert(this.name); } } button.addEventListener("click", orang, false); 7 (Boolean). menunjukkan apakah button.addEventListener("click", function() { orang.getName(); }); _7 telah dilakukan
  • var orang: { name: "keripix", handleEvent: function() { alert(this.name); } } button.addEventListener("click", orang, false); 9 (Boolean). menunjukkan bahwa acara tersebut dimunculkan oleh browser, bukan secara manual melalui javascript
  • button.dispatchEvent(new Event("click")); 0 (Nomor). menunjukkan fase aktif yang sedang berlangsung. (0) tangkap, (1) sasaran, (2) menggelegak
  • button.dispatchEvent(new Event("click")); _1 (Nomor). waktu yang menunjukkan kapan peristiwa itu terjadi

Masih ada lebih banyak properti dari parameter button.addEventListener("click", function() { orang.getName(); }); 0. Namun penambahannya tergantung jenis acara yang dimunculkan

Hapus Penangan Acara

Untuk berhenti mendengarkan suatu elemen, kita dapat menggunakan metode button.dispatchEvent(new Event("click")); 3

var tombol = document.getElementsByTagName("button")[0]; function callback() { console.log("#tombol ditekan"); } // memasang event handler tombol.addEventListener("click", callback, false); // melepas event handler tombol.removeEventListener("click", callback, false);

stopPropagation & stopImmediatePropagation

Kita dapat menghentikan fase dari event dengan menggunakan metode var orang: { name: "keripix", handleEvent: function() { alert(this.name); } } button.addEventListener("click", orang, false); 2 dan var orang: { name: "keripix", handleEvent: function() { alert(this.name); } } button.addEventListener("click", orang, false); 3. Walaupun kegunaannya hampir sama, namun ada hal yang membedakannya

Untuk melihat perbedaan keduanya, silahkan lihat demo ini

JS Bin

Jadi, var orang: { name: "keripix", handleEvent: function() { alert(this.name); } } button.addEventListener("click", orang, false); _2 akan menghentikan fase saat ini. Jadi pada contoh di atas, event target.addEventListener(tipeEvent, listener [, useCapture]); _0 pada target.addEventListener(tipeEvent, listener [, useCapture]); 9 tidak dijalankan ketika document.addEventListener("click", function() { console.log("document: fase bubbling: click"); }, false); 0 ditekan. Hal yang sama juga terjadi saat menggunakan var orang: { name: "keripix", handleEvent: function() { alert(this.name); } } button.addEventListener("click", orang, false); 3

Perbedaannya adalah, var orang: { name: "keripix", handleEvent: function() { alert(this.name); } } button.addEventListener("click", orang, false); _3 juga menghentikan document.addEventListener("click", function() { console.log("document: fase bubbling: click"); }, false); 5 yang diinstal untuk mendengarkan acara yang sama. Namun, document.addEventListener("click", function() { console.log("document: fase bubbling: click"); }, false); _5 yang dihentikan hanya pendengar yang diinstal setelah document.addEventListener("click", function() { console.log("document: fase bubbling: click"); }, false); 5 berjalan var orang: { name: "keripix", handleEvent: function() { alert(this.name); } } button.addEventListener("click", orang, false); 3 diinstal

Jadi, pada contoh di atas, document.addEventListener("click", function() { console.log("document: fase bubbling: click"); }, false); _5 kedua yang dilampirkan ke button.addEventListener("click", function( e ) { var target = e.target; target.classList.add("highlight"); }); 7 tidak berjalan saat button.addEventListener("click", function( e ) { var target = e.target; target.classList.add("highlight"); }); 7 ditekan. Itu karena document.addEventListener("click", function() { console.log("document: fase bubbling: click"); }, false); _5 lari pertama var orang: { name: "keripix", handleEvent: function() { alert(this.name); } } button.addEventListener("click", orang, false); 3

Sementara itu, document.addEventListener("click", function() { console.log("document: fase bubbling: click"); }, false); _5 adalah yang kedua pada button.addEventListener("click", function( e ) { var target = e.target; addHighlighter(target); }); function addHighlighter( el ) { el.classList.add("highlight"); } 2 tetapi dijalankan ketika button.addEventListener("click", function( e ) { var target = e.target; addHighlighter(target); }); function addHighlighter( el ) { el.classList.add("highlight"); } 2 ditekan. Meskipun document.addEventListener("click", function() { console.log("document: fase bubbling: click"); }, false); 5 pada button.addEventListener("click", function( e ) { var target = e.target; addHighlighter(target); }); function addHighlighter( el ) { el.classList.add("highlight"); } 2 berjalan var orang: { name: "keripix", handleEvent: function() { alert(this.name); } } button.addEventListener("click", orang, false); 2

preventDefault

Secara default, browser memiliki reaksinya sendiri ketika suatu elemen memunculkan suatu peristiwa. Misalnya, ketika elemen button.addEventListener("click", function( e ) { var target = e.target; addHighlighter(target); }); function addHighlighter( el ) { el.classList.add("highlight"); } _7 ditekan, browser akan mencoba membuka tautan pada elemen tersebut

Bagaimana jika kita ingin browser tidak menjalankan reaksi defaultnya?

JS Bin

Konteks Pada Pendengar

Ada yang perlu kita perhatikan saat menjalankan document.addEventListener("click", function() { console.log("document: fase bubbling: click"); }, false); 5, yaitu konteks fungsi document.addEventListener("click", function() { console.log("document: fase bubbling: click"); }, false); 5

Sebagai contoh, lihat demo berikut

JS Bin

Masalahnya adalah, ketika metode target.addEventListener(tipeEvent, listener [, useCapture]); _01 dieksekusi, ruang lingkup fungsi bukanlah objek target.addEventListener(tipeEvent, listener [, useCapture]); 02, tetapi elemen document.addEventListener("click", function() { console.log("document: fase bubbling: click"); }, false); 0. Jadi, target.addEventListener(tipeEvent, listener [, useCapture]); _04 bernilai target.addEventListener(tipeEvent, listener [, useCapture]); 05. Karena document.addEventListener("click", function() { console.log("document: fase bubbling: click"); }, false); _0 tidak memiliki properti

Untuk mengatasinya, kita dapat menggunakan pendekatan berikut

button.addEventListener("click", function() { orang.getName(); });

Atau, kita juga bisa menerapkan metode target.addEventListener(tipeEvent, listener [, useCapture]); _07 pada objek target.addEventListener(tipeEvent, listener [, useCapture]); 02 di atas. Secara otomatis, nilai dari target.addEventListener(tipeEvent, listener [, useCapture]); _09 akan melekat pada objek yang memiliki metode target.addEventListener(tipeEvent, listener [, useCapture]); 07

var orang: { name: "keripix", handleEvent: function() { alert(this.name); } } button.addEventListener("click", orang, false);

Hasilkan Acara Menggunakan Javascript

Kita dapat membuat event pada sebuah elemen menggunakan javascript

Misalnya, kami ingin menaikkan acara target.addEventListener(tipeEvent, listener [, useCapture]); 0 secara manual

button.dispatchEvent(new Event("click"));

Kita juga bisa membuat acara baru

JS Bin

Untuk menambahkan data spesifik ke Objek Acara, kita dapat menambahkannya ke properti target.addEventListener(tipeEvent, listener [, useCapture]); 12

Kiat

Delegasi Acara

Ketika jumlah document.addEventListener("click", function() { console.log("document: fase bubbling: click"); }, false); _5 yang diinstal pada elemen yang berbeda bertambah, maka kita dihadapkan pada masalah kinerja di browser

Saat document.addEventListener("click", function() { console.log("document: fase bubbling: click"); }, false); _5 diinstal pada elemen di halaman situs web, browser harus menyimpan referensi ke document.addEventListener("click", function() { console.log("document: fase bubbling: click"); }, false); 5. Yang artinya, peningkatan memori yang dibutuhkan

Semakin banyak document.addEventListener("click", function() { console.log("document: fase bubbling: click"); }, false); _5 dipasang pada elemen pada halaman website, maka browser membutuhkan waktu untuk memasang target.addEventListener(tipeEvent, listener [, useCapture]); 17

Untuk mengurangi beban, kita bisa menggunakan delegasi acara. Caranya adalah dengan memanfaatkan fase Bubbling yang akan dilalui event saat event dimunculkan. Berikut ini adalah demo pelaksanaan acara delegasi

JS Bin

Jika melihat contoh di atas, maka daripada menginstal target.addEventListener(tipeEvent, listener [, useCapture]); 17 untuk 5 elemen target.addEventListener(tipeEvent, listener [, useCapture]); 19, kita dapat menginstal target.addEventListener(tipeEvent, listener [, useCapture]); 17 pada elemen target.addEventListener(tipeEvent, listener [, useCapture]); 21. Javascript akan berjalan document.addEventListener("click", function() { console.log("document: fase bubbling: click"); }, false); _5 (berdasarkan contoh di atas), ketika event generation sedang dalam fase bubbling. Berikut adalah contoh penerapan delegasi acara

Penanganan Acara hanya untuk penanganan

Sebaliknya kita menulis target.addEventListener(tipeEvent, listener [, useCapture]); _17 seperti contoh berikut

button.addEventListener("click", function( e ) { var target = e.target; target.classList.add("highlight"); });

Ada baiknya kita mengubahnya menjadi

button.addEventListener("click", function( e ) { var target = e.target; addHighlighter(target); }); function addHighlighter( el ) { el.classList.add("highlight"); }

Alasannya, pertama, kami memisahkan event handling dari apa yang seharusnya terjadi saat event dimunculkan. Penanganan acara hanya membutuhkan elemen apa document.addEventListener("click", function() { console.log("document: fase bubbling: click"); }, false); 3. Ini akan mendelegasikan tugas "apa yang harus dilakukan saat tombol ditekan" ke metode lain

Keuntungan dari pemisahan di atas adalah kita dapat memanfaatkan metode target.addEventListener(tipeEvent, listener [, useCapture]); 25 di tempat lain. Karena kemungkinan besar, yang diuntungkan dengan adanya metode tersebut tidak hanya document.addEventListener("click", function() { console.log("document: fase bubbling: click"); }, false); 5 di atas

Alasan kedua adalah kita dapat lebih mudah menguji respons terhadap suatu peristiwa tanpa harus mensimulasikan pembuatan peristiwa pada unit pengujian kita. Jadi, pengujian unit kami akan lebih sederhana

Apa itu atribut acara?

atribut peristiwa adalah atribut global yang dapat digunakan di semua tag HTML, tetapi nilai dalam bentuk kode JavaScript. title adalah event atribut yang akan mengeksekusi kode JavaScript di dalam tanda kutip saat elemen diklik.

Apa itu event JavaScript?

Aktif Javascript . Peristiwa adalah peristiwa yang terjadi di halaman web. Peristiwa yang dimaksud di sini adalah aktivitas yang dilakukan di halaman web.

2 Apa nama peristiwa yang terjadi saat pengguna mengeklik elemen HTML?

title = adalah peristiwa jika elemen html di klik .

Bagaimana cara menampilkan dialog peringatan () pada acara tertentu misalnya saat tombol diklik?

Pertanyaannya. Cara menampilkan dialog alert() pada kejadian tertentu , misalnya saat tombol diklik ? . dialog pada event listener. Dalam HTML, kita dapat memasukkan fungsi alert() pada onClick atribut sehingga nanti ditampilkan ketika sebuah elemen diklik .

Postingan terbaru

LIHAT SEMUA