Method addEventListener DOM HTML dan Fungsinya
Method addEventListener() merupakan salah satu method DOM yang terdapat pada html, yang berguna untuk melampirkan event handler ke elemen yang telah ditentukan sebelumnya.
Sintak: element.addEventListener(event, function, useCapture)
Catatan: Parameter ketiga untuk tangkapan penggunaan biasanya diatur dengan tipe false karena tidak digunakan.
Sebelum memahami lebih dalam materi tentang Method addEventListener DOM HTML dan Fungsinya, terlebih dahulu pelajari materi tentang: Properti activeElement DOM HTML dan Fungsinya, Membuat Pesan Peringatan Menggunakan console.warn DOM HTML, dan Melacak Kode Program HTML Menggunakan console.trace DOM.
Contoh: Berikut adalah ilustrasi program yang menggunakan method DOM addEventListener().
<!DOCTYPE html>
<html>
<head>
<title>
Lokasi Properti Host DOM
</title>
<style>
h1
{
color: green;}
h2
{
font-family: Impact;}
body
{
text-align: center;}
</style>
</head>
<body>
<h1>
Blog Elfan
</h1>
<h2>
Method addEventListener()
</h2>
<p>
Contoh berikut menggunakan
method addEventListener()
untuk menambahkan banyak event
pada tombol yang sama.
</p>
<button id="myBtn">
Try it
</button>
<p id="demo"></p>
<script>
var x = document.getElementById("myBtn");
x.addEventListener("mouseover", myFunction);
x.addEventListener("click", mySecondFunction);
x.addEventListener("mouseout", myThirdFunction);
function myFunction() {
document.getElementById("demo").innerHTML += "Moused over!<br>"
this.style.backgroundColor = "red"
}
function mySecondFunction() {
document.getElementById("demo").innerHTML += "Clicked!<br>"
}
function myThirdFunction() {
document.getElementById("demo").innerHTML += "Moused out!<br>"
}
</script>
</body>
</html>
Pada pengembangan aplikasi web, interaksi pengguna dengan halaman web merupakan hal yang sangat penting. Salah satu aspek penting yang memungkinkan interaksi tersebut adalah kemampuan halaman web untuk merespons peristiwa yang terjadi, seperti klik tombol, pengisian formulir, atau pergerakan kursor. Salah satu cara untuk menangani peristiwa-peristiwa tersebut dalam halaman web adalah dengan menggunakan metode yang disediakan oleh Dokument Objek Model atau model objek dokumen, yaitu addEventListener.
Metode addEventListener adalah alat yang memungkinkan pengembang untuk menetapkan fungsi yang akan dijalankan saat peristiwa tertentu terjadi pada elemen dalam halaman web. Dengan menggunakan metode ini, pengembang dapat menghubungkan berbagai jenis peristiwa seperti peristiwa klik, perubahan nilai, atau peristiwa lainnya dengan fungsi atau prosedur yang diinginkan. Hal ini memberikan fleksibilitas yang besar dalam membuat aplikasi web yang dinamis dan responsif terhadap tindakan pengguna.
Secara umum, addEventListener digunakan untuk mengikat fungsi penanganan peristiwa ke elemen-elemen HTML tertentu. Sebagai contoh, jika sebuah elemen tombol ingin diberi perintah untuk melakukan sesuatu saat diklik, metode ini bisa digunakan untuk menetapkan fungsi yang akan dijalankan saat tombol tersebut diklik. Dengan demikian, setiap elemen dalam halaman web dapat memiliki penanganan peristiwa yang berbeda, sesuai dengan kebutuhan aplikasi tersebut.
Salah satu keuntungan utama penggunaan addEventListener adalah kemampuannya untuk menambahkan lebih dari satu penanganan peristiwa pada elemen yang sama. Hal ini berbeda dengan metode lama yang hanya memungkinkan satu penanganan peristiwa pada elemen yang sama. Dengan addEventListener, pengembang dapat menetapkan beberapa fungsi penanganan peristiwa pada elemen yang sama tanpa harus menghapus fungsi sebelumnya. Ini sangat berguna dalam situasi-situasi dimana banyak tindakan berbeda harus dilakukan pada elemen yang sama.
Baca Juga:
Selain itu, addEventListener memberikan kemampuan untuk mendengarkan peristiwa dari elemen-elemen yang lebih tinggi dalam hirarki struktur halaman HTML. Metode ini memungkinkan peristiwa untuk diteruskan atau dibubuhkan pada elemen-elemen induk, yang memungkinkan pengelolaan peristiwa yang lebih efisien. Fitur ini dikenal dengan istilah penyaluran peristiwa atau pengalihan peristiwa. Dengan menggunakan penyaluran peristiwa, pengembang dapat menanggapi peristiwa yang terjadi pada elemen-elemen anak melalui elemen-elemen induk, yang dapat mengurangi jumlah penanganan peristiwa yang harus diterapkan di seluruh elemen dalam halaman.
Peristiwa yang bisa didengarkan oleh addEventListener sangat beragam, mencakup banyak peristiwa yang terjadi dalam siklus hidup elemen dalam halaman. Peristiwa-peristiwa tersebut termasuk klik, pergerakan kursor, pengisian formulir, pemuatan halaman, dan banyak lagi. Setiap peristiwa dapat dijadikan pemicu untuk menjalankan suatu aksi tertentu, memberi kontrol penuh kepada pengembang dalam menangani interaksi pengguna. Dalam hal ini, addEventListener menyediakan fleksibilitas yang sangat penting dalam membangun pengalaman pengguna yang lebih baik dan lebih interaktif.
Salah satu konsep yang penting saat menggunakan addEventListener adalah fase-fase peristiwa. Secara umum, peristiwa dapat dibagi menjadi tiga fase utama: fase menangkap, fase sasaran, dan fase perambatan. Fase menangkap terjadi pertama kali, diikuti dengan fase sasaran, dimana peristiwa tepat mengenai elemen yang memicunya. Terakhir, fase perambatan terjadi, dimana peristiwa bergerak kembali ke elemen-elemen induk. AddEventListener memungkinkan pengembang untuk memilih pada fase mana penanganan peristiwa ingin dilakukan. Dengan kata lain, pengembang dapat memilih apakah ingin menangani peristiwa pada fase menangkap atau fase perambatan.
Sebagai tambahan, addEventListener juga memberikan parameter yang bisa digunakan untuk menyesuaikan perilaku dari penanganan peristiwa. Salah satu parameter ini adalah opsi untuk menangani peristiwa sekali saja. Dalam beberapa kasus, mungkin hanya perlu menangani peristiwa sekali, seperti ketika pengguna pertama kali mengunjungi halaman. Dengan menggunakan opsi ini, peristiwa hanya akan dipicu satu kali, dan setelah itu penanganan peristiwa akan dihapus secara otomatis. Hal ini membuat kode lebih efisien dan menghindari pengolahan yang tidak perlu.
Metode addEventListener juga menawarkan cara yang lebih modular dalam pengelolaan peristiwa dibandingkan dengan pendekatan lama yang menggunakan atribut HTML atau penanganan peristiwa langsung dalam elemen. Penggunaan addEventListener memungkinkan pemisahan antara struktur HTML dan logika JavaScript, menjadikannya lebih mudah untuk mengelola dan memelihara kode. Dengan demikian, pengembang dapat fokus pada penanganan peristiwa secara terpusat di satu tempat dalam kode JavaScript, yang mempermudah perawatan dan perbaikan aplikasi web di masa depan.
Penggunaan addEventListener juga mengurangi ketergantungan pada atribut HTML untuk mendefinisikan penanganan peristiwa. Metode lama biasanya mengharuskan pengembang untuk menulis penanganan peristiwa langsung di dalam elemen HTML menggunakan atribut seperti onclick atau onsubmit. Ini bisa menyebabkan kode yang tidak terstruktur dengan baik dan sulit dikelola, terutama dalam proyek-proyek besar. Dengan addEventListener, penanganan peristiwa ditulis terpisah dari struktur HTML, membuat kode lebih bersih dan lebih mudah dibaca.
Selain itu, addEventListener memberikan keuntungan dalam hal kinerja. Ketika penanganan peristiwa langsung dimasukkan ke dalam elemen HTML, pengolahan peristiwa bisa menjadi kurang efisien, terutama ketika ada banyak elemen dengan penanganan peristiwa yang berbeda. Dengan addEventListener, penanganan peristiwa dapat dipusatkan pada elemen-elemen tertentu, yang memungkinkan pengolahan peristiwa dilakukan secara lebih terstruktur dan efisien.
Metode ini juga sangat berguna dalam pengembangan aplikasi web modern, yang sering kali melibatkan interaksi pengguna yang lebih kompleks, seperti animasi, efek dinamis, dan pembaruan halaman secara real-time. Dengan adanya addEventListener, pengembang dapat menciptakan pengalaman pengguna yang lebih kaya dan lebih interaktif. Kemampuan untuk menangani berbagai jenis peristiwa dengan cara yang lebih terorganisir juga membantu mengurangi kompleksitas kode, yang pada gilirannya meningkatkan efisiensi pengembangan.
Secara keseluruhan, addEventListener adalah metode yang sangat berguna dalam pengembangan aplikasi web interaktif. Dengan memberikan kontrol yang lebih besar terhadap bagaimana peristiwa diproses dan memberikan kemampuan untuk menangani berbagai peristiwa secara efisien, metode ini memainkan peran yang sangat penting dalam menciptakan aplikasi web yang responsif dan dinamis. Keuntungan seperti kemampuan untuk menambahkan banyak penanganan peristiwa pada elemen yang sama, pengelolaan peristiwa yang lebih efisien, dan penanganan peristiwa di fase yang diinginkan membuat addEventListener menjadi pilihan utama dalam pengembangan aplikasi web yang modern dan interaktif.
Referensi Tambahan:
- 2 Contoh Penggunaan Properti Body DOM pada HTML
- 2 Contoh Penggunaan Method close() DOM pada HTML
- 2 Contoh Penggunaan Properti Cookie DOM pada HTML
- Cara Penggunaan Properti characterSet DOM pada HTML
- 2 Contoh Penggunaan Method createAttribute() DOM pada HTML
- Cara Penggunaan Method createComment() DOM pada HTML
- Cara Penggunaan Method createDocumentFragment() DOM pada HTML
Artikel ini akan dibaca oleh: Tri Septi Wulandari, Wisnu Cahya Mukti, Yeni Nur Anggraeni, Adelia Qoirina Rahmawati, dan Adriel Joseph Gulo.
6 komentar untuk "Method addEventListener DOM HTML dan Fungsinya"
Hubungi admin melalui Wa : +62-896-2414-6106
Respon komentar 7 x 24 jam, mohon bersabar jika komentar tidak langsung dipublikasi atau mendapatkan balasan secara langsung.
Bantu admin meningkatkan kualitas blog dengan melaporkan berbagai permasalahan seperti typo, link bermasalah, dan lain sebagainya melalui kolom komentar.
- Ikatlah Ilmu dengan Memostingkannya -
apa yang dimaksud dengan method addEventListener() pada dom html?
BalasHapusMethod addEventListener() digunakan untuk menempelkan event handler ke elemen yang telah ditentukan. Method addEventListener() berguna untuk menempelkan event handler ke elemen tanpa menimpa event handler yang ada sebelumnya.
HapusPengembang web dapat menambahkan banyak event handler ke satu elemen yang didalamnya disertakan objek DOM apapun, yang tidak hanya elemen HTML saja.
Apa persamaan dan perbedaan method addEventListener() dan onclick pada dom html?
BalasHapusaddEventListener() dan onclick keduanya mendengarkan perintah pada event tertentu yang dapat menjalankan fungsi panggilan balik ketika tombol diklik.
Hapusperbedaannya, pada addEventListener() adalah dapat menambahkan beberapa event ke elemen tertentu. Sedangkan onclick hanya dapat menambahkan satu event saja ke suatu elemen tertentu, yang pada dasarnya adalah properti yang dilakukan overrite.
Sebutkan jenis browser apa saja yang dapat digunakan untuk mengaktifkan method addEventListener() pada dom html?
BalasHapusBerikut adalah beberapa jenis browser populer yang dapat digunakan untuk mengaktifkan method addEventListener() pada dom html:
Hapus1. Google Chrome
2. Internet Explorer
3. Firefox
4. Opera
5. Safari