Bjb Code

解绑事件

在 JS 中，解绑事件是指取消或移除之前绑定的事件处理函数，以停止特定事件发生时执行该函数。

解绑事件

// 方法一（用什么方式绑定的，就用什么方式解绑，即重新将 onclick 赋值成 null）
// 为 btn1 绑定事件
document.getElementById("btn1").onclick = function(){
	console.log("我是弹出框");
}
// 为 btn1 解绑事件
var btn1 = document.getElementById("btn1");
btn1.onclick = null;

// 方法二（removeEventListener：谷歌、火狐、IE11 支持，IE8 不支持）
// removeEventListener 是与 addEventListener 配套使用的方法，只能解绑之前通过 addEventListener 绑定的事件处理函数
// 为 btn1 绑定两个事件
// 第一种：直接用匿名函数绑定的事件，不能用 removeEventListener 解绑，只有用命名函数绑定的事件才能用 removeEventListener 解绑
document.getElementById("btn1").addEventListener("click",function(){
	console.log("我是绑定的第一个事件");
},false);
document.getElementById("btn1").addEventListener("click",function(){
	console.log("我是绑定的第二个事件");
},false);
// 第二种：用命名函数给 btn1 绑定两个事件，可以用removeEventListener 解绑
function f1(){
	console.log("我是绑定的第一个事件");
}
function f2(){
	console.log("我是绑定的第二个事件");
}
document.getElementById("btn1").addEventListener("click",f1,false);
document.getElementById("btn1").addEventListener("click",f2,false);
// 点击 btn2，把 btn1 的第一个点击事件解绑
document.getElementById("btn2").onclick = function(){
	document.getElementById("btn1").removeEventListener("click",f1,false);
}

// 方法三（detachEvent：谷歌、火狐、IE11 不支持，IE8 支持）
// detachEvent 是与 attachEvent 配套使用的方法，只能解绑之前通过 attachEvent 绑定的事件处理函数
// 用命名函数给 btn1 绑定两个事件
function f1(){
	console.log("我是绑定的第一个事件");
}
function f2(){
	console.log("我是绑定的第二个事件");
}
document.getElementById("btn2").onclick = function(){
	document.getElementById("btn1").detachEvent("onclick",f1);
}

// 谷歌、火狐、IE11、IE8 都支持的解绑方式
// 先写绑定通用函数
function addEvent(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 removeEvent(element,type,fn){
	if(element.removeEventListener){
		element.removeEventListener(type,fn,false);
	}else if(element.detachEvent){
		element.detachEvent("on"+type,fn);
	}else{
		element["on"+type] = null;
	}
}
// 用绑定事件的通用函数给 btn1 绑定两个事件
function f1(){
	console.log("我是绑定的第一个事件");
}
function f2(){
	console.log("我是绑定的第二个事件");
}
addEvent(document.getElementById("btn1"),"click",f1);
addEvent(document.getElementById("btn1"),"click",f2);
// 用解绑事件的通用函数给 btn1 解绑事件
document.getElementById("btn2").onclick = function(){
	removeEvent(document.getElementById("btn1"),"click",f1);
}