Cara menambah dan mengalih keluar acara dalam vue

Kaedah Vue untuk menambah dan mengalih keluar acara: 1. Tambah pengendali acara melalui kaedah "addEventListener()" 2. Alih keluar pengendali acara melalui kaedah "removeEventListener()".

Persekitaran pengendalian tutorial ini: sistem Windows 10, versi Vue 3, komputer Dell G3.

Bagaimana untuk menambah dan mengalih keluar acara dalam Vue?

penambahan dan penyingkiran acara vue

.removeEventListener() kaedah memerlukan kita untuk lulus kepadanya dan lulus ke .addEventListener() fungsi adalah sama dengan fungsi pendengar.

Maksud yang sama:

• mempunyai sasaran yang sama
• mempunyai jenis yang sama
• dan melepasi pendengar yang sama

Definisi dan penggunaan

Kaedah removeEventListener() digunakan untuk mengalih keluar pengendali acara yang ditambahkan oleh kaedah addEventListener().

Nota: Jika anda ingin mengalih keluar pengendali acara, fungsi pelaksanaan addEventListener() mesti menggunakan fungsi luaran, seperti yang ditunjukkan dalam contoh di atas (myFunction).

Fungsi tanpa nama, serupa dengan "document.removeEventListener("event", function(){ myScript });"

Contohnya: Jawapan kepada

 { name: 'Richard' } === { name: 'Richard' }复制代码

akan menjadi palsu kerana ia tergolong dalam entiti yang berbeza.

Jadi, apakah yang boleh berjaya dikeluarkan?

function myEventListeningFunction() {
    console.log('howdy');
}
 
// 为 点击 事件添加一个监听器，来运行 `myEventListeningFunction` 函数
document.addEventListener('click', myEventListeningFunction);
 
// 立即移除 应该运行`myEventListeningFunction`函数的 点击 事件监听器
document.removeEventListener('click', myEventListeningFunction);复制代码

Ini OK kerana semuanya menunjukkan kaedah yang sama myEventListeningFunction().

Dan jika ia

// 为 点击 事件添加一个监听器，来运行 `myEventListeningFunction` 函数
document.addEventListener('click', function myEventListeningFunction() {
    console.log('howdy');
});
 
// 立即移除 应该运行`myEventListeningFunction`函数的 点击 事件监听器
document.removeEventListener('click', function myEventListeningFunction() {
    console.log('howdy');
});复制代码

, × tidak akan berjaya dialih keluar kerana fungsi pendengar mereka tidak menghala ke yang sama.

Terdapat dua cara penyampaian acara: menggelegak dan menangkap.

Penghantaran acara mentakrifkan susunan acara elemen dicetuskan. Jika elemen

dimasukkan ke dalam

elemen

Dalam menggelegak, peristiwa elemen dalaman akan dicetuskan dahulu, dan kemudian elemen luaran, iaitu: peristiwa klik elemen

akan dicetuskan dahulu, dan kemudian peristiwa klik elemen

Dalam tangkapan, peristiwa elemen luaran akan dicetuskan terlebih dahulu, dan kemudian peristiwa elemen dalaman akan dicetuskan, iaitu: peristiwa klik elemen

dan kemudian peristiwa elemen

kaedah addEventListener() boleh menentukan parameter "useCapture" untuk menetapkan jenis penghantaran:

addEventListener(event, function, useCapture);

Nilai lalai ialah false, iaitu Penghantaran gelembung, apabila nilainya true, acara itu menggunakan penghantaran tangkapan. Kaedah

removeEventListener() mengalih keluar pengendali acara yang ditambahkan oleh kaedah addEventListener():

element.removeEventListener("mousemove", myFunction);

Pelayar Serasi dengan

var x = document.getElementById("myBtn");
if (x.addEventListener) {                    // 所有主流浏览器，除了 IE 8 及更早版本
    x.addEventListener("click", myFunction);
} else if (x.attachEvent) {                  // IE 8 及更早版本
    x.attachEvent("onclick", myFunction);
}

IE 8 dan versi IE yang lebih awal, Opera 7.0 dan versi terdahulu tidak menyokong kaedah addEventListener() dan removeEventListener(). Walau bagaimanapun, untuk versi penyemak imbas jenis ini, anda boleh menggunakan kaedah detachEvent() untuk mengalih keluar pengendali acara:

element.attachEvent(event, function);
element.detachEvent(event, function);

Pendikitan dan pengalihan keluar acara Vue

biasanya ditulis:

created() {
  window.addEventListener("scroll", this.throttle());
},
destroyed() {
  window.removeEventListener("scroll", this.throttle());
}
// methods
throttle() {
    let lastTime = new Date();
    let timer = null;
    return () => {
      let startTime = new Date();
      let remaining = 200 - (startTime - lastTime);
      clearTimeout(timer);
      if (startTime - lastTime > 200) {
        lastTime = startTime;
        this.scroll.call(this);
      } else {
        // 最后一次也执行
        timer = setTimeout(() => {
          this.scroll.call(this);
        }, remaining);
      }
    };
  }

serba salah, haha.

问题的原因和“data为什么是函数”是一样的。节流函数throttle每次返回的函数是不一样的，所以，remove的函数和add的函数式不一样的。处理的方法就是对 节流 函数进行改造。（当然你也可以不节流就没有事了）

created() {
   this.lastTime = new Date();
   this.timer = null;
   window.addEventListener("scroll", this.throttle);
},
destroyed() {
   window.removeEventListener("scroll", this.throttle);
}
// methods
throttle() {
  let startTime = new Date();
  let remaining = 200 - (startTime - this.lastTime);
  clearTimeout(this.timer);
  if (startTime - this.lastTime > 200) {
    this.lastTime = startTime;
    this.scroll.call(this);
  } else {
    // 最后一次也执行
    this.timer = setTimeout(() => {
      this.scroll.call(this);
    }, remaining);
  }
}

Operasi dan pendikitan acara disepadukan, jadi anda mesti memahami prinsip pelaksanaan pendikit. .

Pembelajaran yang disyorkan: "tutorial video vue.js"

Atas ialah kandungan terperinci Cara menambah dan mengalih keluar acara dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!