Javascript menambahkan pendengar acara tidak berfungsi

Question

Ini dilakukan di codepen jadi saya tidak menyertakan dan memberi tag, tetapi masalahnya adalah saya tidak mendapatkan pesan pernyataan pengembalian ketika saya mengklik tombol

Table of Contents Show

Mengapa add event listener saya tidak berfungsi?
Bagaimana menambahkan pendengar acara bekerja di JavaScript?
Bisakah saya menggunakan add event listener?
Manakah metode yang benar untuk menambahkan pendengar acara?


submit


body{
  margin:0;
  padding:0;
  font-family:sans-serif;
}
button{
  font-size:40px;
  text-transform:uppercase;
  font-weight:700;
  background:none;
  outline:none;
}
.butt{
  display:flex;
  justify-content:center;
  align-items:center;
  height:120vh;
}


const bu = document.querySelector('.bu');
bu = window.addEventListener('click',() => {
  return 'Yes';
});

Metode removeEventListener()_ dari antarmuka EventTarget menghapus event listener yang sebelumnya terdaftar dengan EventTarget.addEventListener() dari target. Pendengar acara yang akan dihapus diidentifikasi menggunakan kombinasi jenis acara, fungsi pendengar acara itu sendiri, dan berbagai opsi opsional yang dapat memengaruhi proses pencocokan;

Memanggil removeEventListener() dengan argumen yang tidak mengidentifikasi siapa pun yang saat ini terdaftar di EventTarget tidak berpengaruh

Jika dihapus dari EventTarget sementara pendengar lain dari target sedang memproses suatu peristiwa, itu tidak akan dipicu oleh peristiwa tersebut. Namun, itu dapat disambungkan kembali

Peringatan. Jika pendengar terdaftar dua kali, satu dengan tanda tangkap dan satu tanpa, Anda harus menghapus masing-masing secara terpisah. Penghapusan pendengar yang menangkap tidak memengaruhi versi pendengar yang sama yang tidak menangkap, dan sebaliknya

Pendengar acara juga dapat dihapus dengan meneruskan

element.addEventListener("mousedown", handleMouseDown, true);

2 ke

element.addEventListener("mousedown", handleMouseDown, true);

3 dan kemudian memanggil

element.addEventListener("mousedown", handleMouseDown, true);

4 pada pengontrol yang memiliki sinyal

removeEventListener(type, listener)
removeEventListener(type, listener, options)
removeEventListener(type, listener, useCapture)

_

element.addEventListener("mousedown", handleMouseDown, true);

_5

Sebuah string yang menentukan jenis acara yang akan menghapus pendengar acara

element.addEventListener("mousedown", handleMouseDown, true);

_6

Fungsi event handler untuk menghapus dari target event

element.addEventListener("mousedown", handleMouseDown, true);

7 Opsional

Objek pilihan yang menentukan karakteristik tentang event listener

Pilihan yang tersedia adalah

```
element.addEventListener("mousedown", handleMouseDown, true);
```
_8. Nilai boolean yang menentukan apakah yang akan dihapus terdaftar sebagai pendengar penangkap atau tidak. Jika parameter ini tidak ada, nilai default
```
element.addEventListener("mousedown", handleMouseDown, true);
```
9 diasumsikan

element.removeEventListener("mousedown", handleMouseDown, false);     // Fails
element.removeEventListener("mousedown", handleMouseDown, true);      // Succeeds

0 Opsional

Nilai boolean yang menentukan apakah yang akan dihapus terdaftar sebagai pendengar penangkap atau tidak. Jika parameter ini tidak ada, nilai default

element.addEventListener("mousedown", handleMouseDown, true);

9 diasumsikan

Tidak ada

Mengingat pendengar acara yang sebelumnya ditambahkan dengan memanggil

element.addEventListener("mousedown", handleMouseDown, true);

3, Anda mungkin akhirnya sampai pada titik di mana Anda harus menghapusnya. Jelas, Anda perlu menentukan parameter

element.addEventListener("mousedown", handleMouseDown, true);

_5 dan

element.addEventListener("mousedown", handleMouseDown, true);

6 yang sama ke removeEventListener(). Tapi bagaimana dengan parameter

element.addEventListener("mousedown", handleMouseDown, true);

_7 atau

element.removeEventListener("mousedown", handleMouseDown, false);     // Fails
element.removeEventListener("mousedown", handleMouseDown, true);      // Succeeds

0?

Meskipun

element.addEventListener("mousedown", handleMouseDown, true);

_3 memungkinkan Anda menambahkan pendengar yang sama lebih dari sekali untuk jenis yang sama jika opsinya berbeda, satu-satunya opsi yang diperiksa removeEventListener() adalah bendera

element.addEventListener("mousedown", handleMouseDown, true);

8/

element.removeEventListener("mousedown", handleMouseDown, false);     // Fails
element.removeEventListener("mousedown", handleMouseDown, true);      // Succeeds

0. Nilainya harus cocok dengan removeEventListener() agar cocok, tetapi nilai lainnya tidak

Misalnya, pertimbangkan panggilan ini ke

element.addEventListener("mousedown", handleMouseDown, true);

3

element.addEventListener("mousedown", handleMouseDown, true);

_

Sekarang pertimbangkan masing-masing dari dua panggilan ini ke removeEventListener()

element.removeEventListener("mousedown", handleMouseDown, false);     // Fails
element.removeEventListener("mousedown", handleMouseDown, true);      // Succeeds

Panggilan pertama gagal karena nilai

element.removeEventListener("mousedown", handleMouseDown, false);     // Fails
element.removeEventListener("mousedown", handleMouseDown, true);      // Succeeds

0 tidak cocok. Yang kedua berhasil, karena

element.removeEventListener("mousedown", handleMouseDown, false);     // Fails
element.removeEventListener("mousedown", handleMouseDown, true);      // Succeeds

_0 cocok

Sekarang pertimbangkan ini

element.addEventListener("mousedown", handleMouseDown, { passive: true });

Di sini, kami menentukan objek

element.addEventListener("mousedown", handleMouseDown, true);

7 di mana

element.addEventListener("mousedown", handleMouseDown, { passive: true });

8 diatur ke

element.addEventListener("mousedown", handleMouseDown, { passive: true });

9, sedangkan opsi lainnya dibiarkan dengan nilai default

element.addEventListener("mousedown", handleMouseDown, true);

9

Sekarang lihat masing-masing panggilan ini ke removeEventListener() secara bergantian. Salah satu dari mereka di mana

element.addEventListener("mousedown", handleMouseDown, true);

8 atau

element.removeEventListener("mousedown", handleMouseDown, false);     // Fails
element.removeEventListener("mousedown", handleMouseDown, true);      // Succeeds

0 adalah

element.addEventListener("mousedown", handleMouseDown, { passive: true });

9 gagal;

Hanya setelan

element.addEventListener("mousedown", handleMouseDown, true);

_8 yang penting bagi removeEventListener()

element.removeEventListener("mousedown", handleMouseDown, { passive: true });     // Succeeds
element.removeEventListener("mousedown", handleMouseDown, { capture: false });    // Succeeds
element.removeEventListener("mousedown", handleMouseDown, { capture: true });     // Fails
element.removeEventListener("mousedown", handleMouseDown, { passive: false });    // Succeeds
element.removeEventListener("mousedown", handleMouseDown, false);                 // Succeeds
element.removeEventListener("mousedown", handleMouseDown, true);                  // Fails

Perlu dicatat bahwa beberapa rilis browser tidak konsisten dalam hal ini, dan kecuali Anda memiliki alasan khusus sebaliknya, sebaiknya gunakan nilai yang sama yang digunakan untuk panggilan ke

element.addEventListener("mousedown", handleMouseDown, true);

3 saat memanggil removeEventListener()

Contoh ini menunjukkan cara menambahkan event listener berbasis

element.removeEventListener("mousedown", handleMouseDown, { passive: true });     // Succeeds
element.removeEventListener("mousedown", handleMouseDown, { capture: false });    // Succeeds
element.removeEventListener("mousedown", handleMouseDown, { capture: true });     // Fails
element.removeEventListener("mousedown", handleMouseDown, { passive: false });    // Succeeds
element.removeEventListener("mousedown", handleMouseDown, false);                 // Succeeds
element.removeEventListener("mousedown", handleMouseDown, true);                  // Fails

_9 yang menghapus event listener berbasis

const body = document.querySelector('body')
const clickTarget = document.getElementById('click-target')
const mouseOverTarget = document.getElementById('mouse-over-target')

let toggle = false;
function makeBackgroundYellow() {
  body.style.backgroundColor = toggle ? 'white' : 'yellow';

  toggle = !toggle;
}

clickTarget.addEventListener('click',
  makeBackgroundYellow,
  false
);

mouseOverTarget.addEventListener('mouseover', () => {
  clickTarget.removeEventListener('click',
    makeBackgroundYellow,
    false
  );
});

0

Mengapa add event listener saya tidak berfungsi?

Jika pendengar acara Anda tidak berfungsi bergantung pada beberapa logika, apakah itu tentang elemen mana yang akan didengarkan atau jika terdaftar sama sekali, langkah pertama adalah memeriksanya . Menggunakan breakpoint di alat pengembang, logpoint, atau konsol. . Using a breakpoint in the developer tools , a logpoint or console.

Bagaimana menambahkan pendengar acara bekerja di JavaScript?

Metode addEventListener() bekerja dengan menambahkan sebuah fungsi, atau objek yang mengimplementasikan EventListener , ke daftar event listener untuk tipe event yang ditentukan pada EventTarget yang disebutnya . .

Bisakah saya menggunakan add event listener?

Anda dapat menambahkan event listener ke objek DOM apa pun, tidak hanya elemen HTML . Saya. e objek jendela. Metode addEventListener() memudahkan untuk mengontrol bagaimana peristiwa bereaksi terhadap gelembung.