Vue中全局事件的解绑
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue中全局事件的解绑相关的知识，希望对你有一定的参考价值。
参考技术A 当我们写Vue项目的时候，大部分时候，我们绑定事件都是在具体的组件上通过@去绑定的例如这样的写法，事件只会在具体元素被点击的时候才会被触发，不会影响其他的组件
但是有时候，我们绑定事件并不是在具体的元素或组件上，而是在全局对象上。例如：
这个时候，其他页面的滚动也会触发这个scroll事件，因此，为了避免影响其他页面，我们有必要对这个绑定的全局事件进行解绑
当我们对组件使用keep-alive的之后，组件会多出一个activated生命周期函数，它在每次页面展示的时候会执行，对应的，它还提供了一个新的生命周期函数，是 deactivated
deactivated 是页面即将被隐藏或者页面即将被替换成新的页面的时候，就会执行
js中的解绑事件
//解绑事件:
/*
* 注意:用什么方式绑定事件,就应该用对应的方式解绑事件
* 1.解绑事件
* 对象.on事件名字=事件处理函数--->绑定事件
* 对象.on事件名字=null;
* 2.解绑事件
* 对象.addEventListener("没有on的事件类型",命名函数,false);---绑定事件
* 对象.removeEventListener("没有on的事件类型",函数名字,false);
* 3.解绑事件
* 对象.attachEvent("on事件类型",命名函数);---绑定事件
* 对象.detachEvent("on事件类型",函数名字);
*
*
* */
页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
</head>
<script >
function my$(id){
return document.getElementById(id);
}
//设置任意元素的中间的文本内容
function setInnnerText(element,text) {
if(typeof element.textContent=="undefined"){
element.innerText=text;
}else{
element.textContent=text;
}
}
</script>
<body>
<input type="button" value="创建一个p" id="btn"/>
哈哈哈
<input type="button" value="创建二个p" id="btn2"/>
<div id=‘dv‘> </div>
</html>
绑定和解绑的兼容性代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<script >
function my$(id){
return document.getElementById(id);
}
//设置任意元素的中间的文本内容
function setInnnerText(element,text) {
if(typeof element.textContent=="undefined"){
element.innerText=text;
}else{
element.textContent=text;
}
}
</script>
</head>
<body>
<input type="button" value="按钮" id="btn1"/>
<input type="button" value="干掉第一个按钮的事件" id="btn2"/>
<script>
//绑定事件的兼容
function addEventListener(element,type,fn) {
if(element.addEventListener){
element.addEventListener(type,fn,false);
}else if(element.attachEvent){
element.attachEvent("on"+type,fn);
}else{
element["on"+type]=fn;
}
}
//解绑事件的兼容
//为任意的一个元素,解绑对应的事件
function removeEventListener(element,type,fnName) {
if(element.removeEventListener){
element.removeEventListener(type,fnName,false);
}else if(element.detachEvent){
element.detachEvent("on"+type,fnName);
}else{
element["on"+type]=null;
}
}
function f1() {
console.log("第一个");
}
function f2() {
console.log("第二个");
}
addEventListener(my$("btn1"),"click",f1);
addEventListener(my$("btn1"),"click",f2);
my$("btn2").onclick=function () {
removeEventListener(my$("btn1"),"click",f1);
};
</script>
</body>
</html>
第一种方式是常用的
my$("btn").onclick=function(){
console.log("aa");
}
my$("btn").onclick=null;
第二种方式是常用的(火狐谷歌)
/第二种方式支持谷歌和火狐,不支持ie8
function f1() {
console.log("第一个");
}
function f2() {
console.log("第二个");
}
my$("btn").addEventListener("click",f1,false);
my$("btn").addEventListener("click",f2,false);
//点击第二个按钮把第一个按钮的第一个点击事件解绑
my$("btn2").onclick=function () {
//解绑事件的时候,需要在绑定事件的时候,使用命名函数
my$("btn").removeEventListener("click",f1,false);
};
第三种方式是常用的(IE8)
//第三种支持ie8
function f3() {
console.log("第一个");
}
function f4() {
console.log("第二个");
}
my$("btn").attachEvent("onclick",f3);
my$("btn").attachEvent("onclick",f4);
my$("btn2").onclick=function () {
my$("btn").detachEvent("onclick",f3);
};
以上是关于Vue中全局事件的解绑的主要内容，如果未能解决你的问题，请参考以下文章
Vue基础系列（二十）-组件自定义事件的绑定以及基本使用（子给父传递数据）_解绑