您好,登錄后才能下訂單哦!
今天小編給大家分享一下Vue中怎么使用addEventListener添加事件和removeEventListener移除事件的相關(guān)知識(shí)點(diǎn),內(nèi)容詳細(xì),邏輯清晰,相信大部分人都還太了解這方面的知識(shí),所以分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后有所收獲,下面我們一起來了解一下吧。
最近在項(xiàng)目中需要用到addEventListener監(jiān)聽滾動(dòng)條滾動(dòng)的高度,所以就研究了一下在vue中是怎么進(jìn)行事件監(jiān)聽的。
給要添加事件的元素加上ref屬性
在mounted中添加事件
mounted() { this.$refs.box.addEventListener('scroll',()=>{ console.log('scroll',this.$refs.box.scrollTop) }); }
這樣就添加成功了!
如果要移除已添加的事件,removeEventListener中傳入的方法必須和addEventListener中傳入的是同一個(gè)方法才能成功移除,所以在添加時(shí)就不能用匿名函數(shù)啦。需改成如下寫法
mounted() { this.$refs.box.addEventListener('scroll',this.scrollEvent); }, methods:{ scrollEvent(){ console.log('scroll',this.$refs.box.scrollTop) } }
這里要注意 傳入的方法 this.scrollEvent 后面不能加括號(hào),否則無法成功添加
組件銷毀前移除事件
beforeDestroy() { this.$refs.box.removeEventListener('scroll',this.scrollEvent); }
如果是keep-alive組件,可以用下面這種方式
activated() { this.$refs.box.addEventListener('scroll', this.scrollEvent); }, deactivated(){ this.$refs.box.removeEventListener('scroll',this.scrollEvent); },
另外,addEventListener還可以給一個(gè)元素添加多個(gè)事件,并且不會(huì)覆蓋已存在的事件,這里就不多展開了~
擴(kuò)展知識(shí):
此處為考慮瀏覽器兼容性推薦使用:document.addEventListener
let n = 0; let max = 3; // 切屏最大次數(shù) document.addEventListener("visibilitychange", function () { if(document.visibilityState == 'hidden'){ n++; } else if(document.visibilityState == 'visible') { if (n > max) { this.$alert('你已經(jīng)切換離開考試頁面超過'+max+"次系統(tǒng)將自動(dòng)提交答卷!", '警告', { confirmButtonText: '知道了', callback: action => { this.msgSuccess("系統(tǒng)自動(dòng)提交答卷!"); } }); return; } this.$alert('你已經(jīng)切換離開考試頁面'+n+'次,如果超過'+max+"次系統(tǒng)會(huì)自動(dòng)提交答卷,請(qǐng)認(rèn)真作答!", '警告', { confirmButtonText: '知道了', callback: action => {} }); } });
this.$alert()
為vue的MessageBox彈框組件
運(yùn)行后報(bào):
提示this.$alert()不是一個(gè)函數(shù)
此時(shí)我們嘗試在document函數(shù)里面打印this到控制臺(tái)看看
console.log("this===",this);
控制臺(tái)輸出信息:
指向的是調(diào)用addEventListener的對(duì)象
我們使用document對(duì)象去調(diào)用VueJS的組件函數(shù)肯定是行不通的,那么怎樣可以拿到VueJS的this呢?我們只需稍作修改
修改后的代碼如下:
let n = 0; let max = 3; // 切屏最大次數(shù) let fn = function () { console.log("this===",this); if(document.visibilityState == 'hidden'){ n++; } else if(document.visibilityState == 'visible') { if (n > max) { this.$alert('你已經(jīng)切換離開考試頁面超過'+max+"次系統(tǒng)將自動(dòng)提交答卷!", '警告', { confirmButtonText: '知道了', callback: action => { this.msgSuccess("系統(tǒng)自動(dòng)提交答卷!"); } }); return; } this.$alert('你已經(jīng)切換離開考試頁面'+n+'次,如果超過'+max+"次系統(tǒng)會(huì)自動(dòng)提交答卷,請(qǐng)認(rèn)真作答!", '警告', { confirmButtonText: '知道了', callback: action => {} }); } } // 使用bind綁定的事件才是指向函數(shù),否則指向的是調(diào)用addEventListener的對(duì)象 document.addEventListener("visibilitychange", fn.bind(this));
詳解:
將觸發(fā)事件后執(zhí)行的函數(shù)抽到外部,作為外部函數(shù)并賦予函數(shù)名在事件中使用函數(shù)名.bind('指定函數(shù)')
;即可在執(zhí)行的函數(shù)中獲取到bind綁定的指定函數(shù)
控制臺(tái)查看此時(shí)的this為
效果圖:
下面介紹下vue 監(jiān)聽事件addEventListener
代碼如下所示:
// vue 添加監(jiān)聽事件,addEventListener第二個(gè)參數(shù)要綁在this上,即需要在methods中聲明,否則銷毀的時(shí)候會(huì)報(bào)錯(cuò) // 在mounted中監(jiān)聽,在beforeDestroy中銷毀,綁定的事件在methods中聲明 mounted() { // 監(jiān)聽 window.addEventListener('resize', this.handleEventListener) }, beforeDestroy() { // 銷毀 window.removeEventListener('resize', this.handleEventListener) }, methods: { // 監(jiān)聽執(zhí)行的事件 handleEventListener() { }, }
以上就是“Vue中怎么使用addEventListener添加事件和removeEventListener移除事件”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家閱讀完這篇文章都有很大的收獲,小編每天都會(huì)為大家更新不同的知識(shí),如果還想學(xué)習(xí)更多的知識(shí),請(qǐng)關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。