Method addEventListener DOM HTML dan Fungsinya
 |
| Ilustrasi Method addEventListener() DOM HTML |
element.addEventListener(event, function, useCapture)
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>
- 2 Contoh Penggunaan Properti Body DOM pada HTML [klik]
- 2 Contoh Penggunaan Method close() DOM pada HTML [klik]
- 2 Contoh Penggunaan Properti Cookie DOM pada HTML [klik]
- Cara Penggunaan Properti characterSet DOM pada HTML [klik]
- 2 Contoh Penggunaan Method createAttribute() DOM pada HTML [klik]
- Cara Penggunaan Method createComment() DOM pada HTML [klik]
- Cara Penggunaan Method createDocumentFragment() DOM pada HTML [klik]
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