Section Artikel
Metode addEventListener()
Contoh:
Tambahkan event listener yang aktif saat pengguna mengklik tombol.
<!DOCTYPE html> <html> <body> <h2> JavaScript addEventListener() </h2> <p> Contoh ini menggunakan metode addEventListener() untuk melampirkan event klik ke tombol. </p> <button id="myBtn">Coba</button> <p id="demo"></p> <script> document.getElementById("myBtn").addEventListener("click", displayDate); function displayDate() { document.getElementById("demo").innerHTML = Date(); } </script> </body> </html>
Metode addEventListener() melampirkan event handler ke elemen yang ditentukan.
Metode addEventListener() melampirkan event handler ke elemen tanpa menimpa event handler yang sudah ada.
Anda dapat menambahkan banyak event handler ke satu elemen.
Anda dapat menambahkan banyak event handler dari jenis yang sama ke satu elemen, yaitu dua event “klik”.
Anda dapat menambahkan event listener ke objek DOM apa pun, tidak hanya elemen HTML. yaitu objek jendela.
Metode addEventListener() membuatnya lebih mudah untuk mengontrol bagaimana eventbereaksi terhadap bubbling.
Saat menggunakan metode addEventListener(), JavaScript dipisahkan dari markup HTML, untuk readability yang lebih baik dan memungkinkan Anda untuk menambahkan event listener bahkan saat Anda tidak mengontrol markup HTML.
Anda bisa dengan mudah menghapus event listener dengan menggunakan metode removeEventListener().
Sintaks
element.addEventListener (event, function, useCapture);
Parameter pertama adalah jenis event (seperti “click” atau “mousedown” atau event DOM HTML lainnya.)
Parameter kedua adalah fungsi yang ingin kita panggil saat event terjadi.
Parameter ketiga adalah nilai boolean yang menentukan apakah akan menggunakan event bubbling atau event capturing. Parameter ini opsional.
Perhatikan bahwa Anda tidak menggunakan awalan “on” untuk event tersebut; gunakan “klik” bukan “onclick”.
Tambahkan Event Handler ke sebuah Elemen
Contoh:
Peringatkan “Halo Dunia!” ketika pengguna mengklik sebuah elemen:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript addEventListener()</h2>
<p>Contoh ini menggunakan metode addEventListener () untuk melampirkan event klik ke tombol.</p>
<button id="myBtn">cobalah</button>
<script>
document.getElementById("myBtn").addEventListener("click", function() {
alert("Halo Dunia!");
});
</script>
</body>
</html>
Anda juga dapat merujuk ke fungsi “bernama” eksternal”.
Contoh
Peringatkan “Halo Dunia!” ketika pengguna mengklik sebuah elemen:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript addEventListener()</h2>
<p> Contoh ini menggunakan metode addEventListener () untuk menjalankan fungsi saat pengguna mengklik tombol. </p>
<button id="myBtn">Coba</button>
<script>
document.getElementById("myBtn").addEventListener("click", myFunction);
function myFunction() {
alert ("Halo Dunia!");
}
</script>
</body>
</html>
Menambahkan Banyak Event Hander ke Elemen yang Sama
Metode addEventListener() memungkinkan untuk menambahkan banyak event ke elemen yang sama, tanpa menimpa event yang sudah ada.
Contoh:
<!DOCTYPE html> <html> <body> <h2>JavaScript addEventListener()</h2> <p> Contoh ini menggunakan metode addEventListener() untuk menambahkan dua event klik ke tombol yang sama. </p> <button id="myBtn">Try it</button> <script> var x = document.getElementById("myBtn"); x.addEventListener("click", myFunction); x.addEventListener("click", someOtherFunction); function myFunction() { alert ("Hello World!"); } function someOtherFunction() { alert ("This function was also executed!"); } </script> </body> </html>
Anda dapat menambahkan event dari berbagai jenis ke elemen yang sama:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript addEventListener()</h2>
<p> Contoh ini menggunakan metode 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>";
}
function mySecondFunction() {
document.getElementById("demo").innerHTML += "Clicked!<br>";
}
function myThirdFunction() {
document.getElementById("demo").innerHTML += "Moused out!<br>";
}
</script>
</body>
</html>
Menambahkan Event Handler ke objek jendela
Metode addEventListener () memungkinkan untuk menambahkan event listener pada objek DOM HTML apa pun seperti elemen HTML, dokumen HTML, objek jendela, atau objek lain yang mendukung event, seperti objek xmlHttpRequest.
Contoh:
Tambahkan event listener yang diaktifkan saat pengguna mengubah ukuran jendela.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript addEventListener()</h2>
<p> Contoh ini menggunakan metode addEventListener () pada objek jendela. </p>
<p> Coba ubah ukuran jendela browser ini untuk memicu event handler "resize". </p>
<p id="demo"></p>
<script>
window.addEventListener("resize", function(){
document.getElementById("demo").innerHTML = Math.random();
});
</script>
</body>
</html>
Passing Parameter
Saat meneruskan nilai parameter, gunakan “fungsi anonim” untuk memanggil fungsi yang ditentukan dengan parameter.
Contoh:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript addEventListener()</h2>
<p> Contoh ini menunjukkan cara meneruskan nilai parameter saat menggunakan metode addEventListener (). </p>
<p> Klik tombol untuk melakukan penghitungan. </p>
<button id="myBtn">cOBA</button>
<p id="demo"></p>
<script>
var p1 = 5;
var p2 = 7;
document.getElementById("myBtn").addEventListener("click", function() {
myFunction(p1, p2);
});
function myFunction(a, b) {
var result = a * b;
document.getElementById("demo").innerHTML = result;
}
</script>
</body>
</html>
Event Bubbling atau Event Capturing?
Ada dua cara penyebaran event di DOM HTML, bubbling dan capturing.
Propagasi event adalah cara untuk menentukan urutan elemen saat event terjadi. Jika Anda memiliki elemen <p> di dalam elemen <div> , dan pengguna mengklik elemen <p> event “click” elemen mana yang harus ditangani terlebih dahulu?
Dalam bubbling event elemen yang paling dalam ditangani terlebih dahulu dan kemudian event luar: elemen <p> ditangani terlebih dahulu, kemudian event klik elemen <div>.
Dalam capturing event elemen paling luar ditangani terlebih dahulu dan kemudian bagian dalam: elemen <div> ditangani terlebih dahulu, kemudian event klik elemen <p>.
Dengan metode addEventListener(), kita dapat menentukan jenis propagasi dengan menggunakan parameter “useCapture”:
addEventListener (event, function, useCapture);
Nilai default adalah false, yang akan menggunakan propagasi bubbling, ketika nilai diatur ke true, event menggunakan propagasi capturing.
Contoh:
<!DOCTYPE html>
<html>
<head>
<style>
#myDiv1, #myDiv2 {
background-color: coral;
padding: 50px;
}
#myP1, #myP2 {
background-color: white;
font-size: 20px;
border: 1px solid;
padding: 20px;
}
</style>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
</head>
<body>
<h2>JavaScript addEventListener()</h2>
<div id="myDiv1">
<h2>Bubbling:</h2>
<p id="myP1">Click me!</p>
</div><br>
<div id="myDiv2">
<h2>Capturing:</h2>
<p id="myP2">Click me!</p>
</div>
<script>
document.getElementById("myP1").addEventListener("click", function() {
alert("Anda mengklik elemen putih!");
}, false);
document.getElementById("myDiv1").addEventListener("click", function() {
alert("Anda mengklik elemen orange!!");
}, false);
document.getElementById("myP2").addEventListener("click", function() {
alert("Anda mengklik elemen putih!!");
}, true);
document.getElementById("myDiv2").addEventListener("click", function() {
alert("Anda mengklik elemen orange!");
}, true);
</script>
</body>
</html>
Metode removeEventListener ()
Metode removeEventListener() menghapus event handler yang telah dilampirkan dengan metode addEventListener().
Contoh:
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
background-color: coral;
border: 1px solid;
padding: 50px;
color: white;
font-size: 20px;
}
</style>
</head>
<body>
<h2>JavaScript removeEventListener()</h2>
<div id="myDIV">
<p>Elemen div ini memiliki event handler onmousemove yang menampilkan nomor acak setiap kali Anda menggerakkan mouse di dalam bidang oranye ini.</p>
<p> Klik tombol untuk menghapus event handler div. </p>
<button onclick="removeHandler()" id="myBtn">Remove</button>
</div>
<p id="demo"></p>
<script>
document.getElementById("myDIV").addEventListener("mousemove", myFunction);
function myFunction() {
document.getElementById("demo").innerHTML = Math.random();
}
function removeHandler() {
document.getElementById("myDIV").removeEventListener("mousemove", myFunction);
}
</script>
</body>
</html>