vue如何添加和移除事件

這篇文章主要介紹“vue如何添加和移除事件”，在日常操作中，相信很多人在vue如何添加和移除事件問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”vue如何添加和移除事件”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

vue添加和移除事件的方法：1、通過(guò)“addEventListener()”方法添加事件句柄；2、通過(guò)“removeEventListener()”方法移除事件句柄。

vue事件添加和移除

.removeEventListener() 方法要求我們向其傳遞與傳遞給 .addEventListener() 的函數(shù) 完全相同的監(jiān)聽(tīng)器函數(shù)。

完全相同 意味著：

• 具有相同的目標(biāo)

• 具有相同的類(lèi)型

• 并傳遞完全相同的監(jiān)聽(tīng)器

定義和用法

removeEventListener() 方法用于移除由 addEventListener() 方法添加的事件句柄。

注意： 如果要移除事件句柄，addEventListener() 的執(zhí)行函數(shù)必須使用外部函數(shù)，如上實(shí)例所示 (myFunction)。

匿名函數(shù)，類(lèi)似 "document.removeEventListener("event", function(){ myScript });" 該事件是無(wú)法移除的。

例如：

 { name: 'Richard' } === { name: 'Richard' }復(fù)制代碼

的答案會(huì)是false，因?yàn)樗麄儗儆诓煌膶?shí)體。

那么，什么樣的可以成功移除呢？

function myEventListeningFunction() {
    console.log('howdy');
}
 
// 為 點(diǎn)擊 事件添加一個(gè)監(jiān)聽(tīng)器，來(lái)運(yùn)行 `myEventListeningFunction` 函數(shù)
document.addEventListener('click', myEventListeningFunction);
 
// 立即移除 應(yīng)該運(yùn)行`myEventListeningFunction`函數(shù)的 點(diǎn)擊 事件監(jiān)聽(tīng)器
document.removeEventListener('click', myEventListeningFunction);復(fù)制代碼

這個(gè)可以√，因?yàn)樗麄兌贾赶騧yEventListeningFunction()這同一個(gè)方法。

而如果是

// 為 點(diǎn)擊 事件添加一個(gè)監(jiān)聽(tīng)器，來(lái)運(yùn)行 `myEventListeningFunction` 函數(shù)
document.addEventListener('click', function myEventListeningFunction() {
    console.log('howdy');
});
 
// 立即移除 應(yīng)該運(yùn)行`myEventListeningFunction`函數(shù)的 點(diǎn)擊 事件監(jiān)聽(tīng)器
document.removeEventListener('click', function myEventListeningFunction() {
    console.log('howdy');
});復(fù)制代碼

則不會(huì)成功移除×，因?yàn)樗麄兊谋O(jiān)聽(tīng)器函數(shù)并不是指向同一個(gè)。

事件傳遞有兩種方式：冒泡與捕獲。

事件傳遞定義了元素事件觸發(fā)的順序。 如果將 <p> 元素插入到 <div> 元素中，用戶(hù)點(diǎn)擊 <p> 元素, 哪個(gè)元素的 “click” 事件先被觸發(fā)呢？

在 冒泡 中，內(nèi)部元素的事件會(huì)先被觸發(fā)，然后再觸發(fā)外部元素，即： <p> 元素的點(diǎn)擊事件先觸發(fā)，然后會(huì)觸發(fā) <div> 元素的點(diǎn)擊事件。

在 捕獲 中，外部元素的事件會(huì)先被觸發(fā)，然后才會(huì)觸發(fā)內(nèi)部元素的事件，即： <div> 元素的點(diǎn)擊事件先觸發(fā) ，然后再觸發(fā) <p> 元素的點(diǎn)擊事件。

addEventListener() 方法可以指定 “useCapture” 參數(shù)來(lái)設(shè)置傳遞類(lèi)型：

addEventListener(event, function, useCapture);

默認(rèn)值為 false, 即冒泡傳遞，當(dāng)值為 true 時(shí), 事件使用捕獲傳遞。

removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄:

element.removeEventListener("mousemove", myFunction);

瀏覽器兼容處理

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 及更早 IE 版本，Opera 7.0及其更早版本不支持 addEventListener() 和 removeEventListener() 方法。但是，對(duì)于這類(lèi)瀏覽器版本可以使用 detachEvent() 方法來(lái)移除事件句柄:

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

vue的事件節(jié)流和移除

通常寫(xiě)法：

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 {
        // 最后一次也執(zhí)行
        timer = setTimeout(() => {
          this.scroll.call(this);
        }, remaining);
      }
    };
  }

都是錯(cuò)誤的，呵呵。

問(wèn)題的原因和“data為什么是函數(shù)”是一樣的。節(jié)流函數(shù)throttle每次返回的函數(shù)是不一樣的，所以，remove的函數(shù)和add的函數(shù)式不一樣的。處理的方法就是對(duì) 節(jié)流 函數(shù)進(jìn)行改造。（當(dāng)然你也可以不節(jié)流就沒(méi)有事了）

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 {
    // 最后一次也執(zhí)行
    this.timer = setTimeout(() => {
      this.scroll.call(this);
    }, remaining);
  }
}

事件操作和節(jié)流融合一起，所以要理解節(jié)流的實(shí)現(xiàn)原理。

到此，關(guān)于“vue如何添加和移除事件”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！