vue+百度地图——事件监听函数的绑定和解绑

事件监听函数如果绑定之后不进行解绑的话，再触发其他事件的时候这个绑定时间依旧会被触发。比如：

<el-button type="primary" @click="testBtn1()">画点</el-button>
<el-button type="primary" @click="testBtn2()">画线一</el-button>
<el-button type="primary" @click="testBtn3()">画圆</el-button>

testBtn1() {function showInfo(e) { console.log('画了一个点') }this.map.addEventListener('click', showInfo)
},
testBtn2() {function showInfo(e) { console.log('画了一条线') }this.map.addEventListener('click', showInfo)
},
testBtn3() {function showInfo(e) { console.log('画了一个圆') }this.map.addEventListener('click', showInfo)
}

首先点击画圆按钮，然后在点击画线按钮，此时会发现，控制台在打印“线”的同时，多打印了一次“圆”。并且多次点击圆按钮就会多次触发圆事件，这就是监听事件没有被解绑导致的。

通过 addEventListener 绑定的事件只能用 removeEventListener来解绑。
关于removeEventListener需要注意的几点是：

1. 无法移除匿名函数，比如：

test(){this.map.addEventListener('click',()=>{//匿名函数})this.map.removeEventListener('click',()=>{//匿名函数})}

尽管这两个函数看起来一模一样，但是他们仍然是两个不同的函数，因为他们的内存地址是不一样的，因此无法通过removeEventListener来移除。

2. 移除时传入的参数与添加处理程序时使用的参数相同

因此，在vue项目中，removeEventListener的正确用法如下：

testBtn1() {var that = this     //定义that，让showInfo内部的语句指向vue实例，而非functionfunction showInfo(e) {console.log('画了一个点')//解绑EventListener，如果写到function外部则未触发console.log便已解绑函数that.map.removeEventListener('click', showInfo)    }this.map.addEventListener('click', showInfo)},

☆前端新手记录一下自己学习的过程，如有问题望大神指出！☆

vue+百度地图——事件监听函数的绑定和解绑相关推荐

【方案篇】事件监听函数的内存泄漏，帮你搞定！不谢！！！
本文是理论篇 ,还有下篇代码篇. 前言工作中,我们会对window, DOM节点,WebSoket, 或者单纯的事件中心等注册事件监听函数. // window window.addEventL ...
百度地图实时监听缩放级别
百度地图实时监听缩放级别 map.addEventListener("zoomend", function(e){let zoom= map.getZoom(); // 获取缩放级 ...
JavaScript中绑定事件监听函数的通用方法[ addEvent() ]
上篇文章讲到了事件绑定的3中常用方法:传统绑定.W3C绑定方法.IE绑定方法.但是,在实际开发中对于我们来讲重要的是需要一个通用的.跨浏览器的绑定方法.如果我们在互联网上搜索一下会发现许多方法,一下是 ...
vue鼠标悬停事件监听
前言开发框架为 vue2.x 情景描述需求是这样的:页面在鼠标悬停(不动)n秒之后,页面进行相应的事件. 比如在我的需求下,是鼠标悬停15秒之后,页面上三个数据弹窗轮询展示. 解决方法我的思路中 ...
百度地图实时监听地图层级
initmap() {var that = this;map = new BMapGL.Map("container"); // 创建Map实例map.centerAndZoom( ...
JS-事件-写一个通用的事件监听函数
之前学习总是遇到问题再去研究表面知识,这是不可取的,在这里我们来写一个绑定事件的函数,以此巩固我们对JS事件相关知识点的理解在这里我会解释一下各个参数之间的关系 function bindEvent ...
事件监听函数addEvent
<script type="text/javascript">//这里的try{--}catch(e){--} 代替 if--else--语句,避免浏览器出现错误信息. ...
android地图旋转监听,android 百度地图监听事件
1.一般事件监听在初始化地图Activity时,注册一般事件监听,并实现MKGeneralListener的接口处理相应事件,将mBMapMan.init("我的Key", nu ...
vue/xx/事件监听，按键与键码值
vue中的事件监听 <!DOCTYPE html> <html lang="en"><head><meta charset="U ...

vue+百度地图——事件监听函数的绑定和解绑

vue+百度地图——事件监听函数的绑定和解绑相关推荐

最新文章

热门文章