对象绑定事件处理函数和取消事件绑定

一、事件绑定

1.给一个对象绑定一个事件处理函数的第一种形式

function fn1(){
	alert(1);
}
function fn2(){
	alert(2);
}
document.οnclick=fn1;
document.οnclick=fn2;//会覆盖前面绑定的fn1

2.给一个对象绑定一个事件处理函数的第二种形式

ie:obj.attachEvent(事件名称，事件函数)；
 　　（1）没有捕获
 　　（2）事件名称有on
 　　（3）事件函数执行的顺序：标准ie->正序 非标准ie->倒序
　　 （4）this指向window 解决方法call
 标准：obj.addEventListener(事件名称，事件函数，是否捕获)；
　　 （1）有捕获
　　 （2）事件名称没有on
　　 （3）事件执行的顺序是正序
　　 （4）this指向触发该事件的对象

function fn1(){
	alert(this);
}
function fn2(){
	alert(2);
}

document.attachEvent('onclick',function(){
	fn1.call(document);
});
document.attachEvent('onclick',fn2);

//是否捕获：默认是false false:冒泡   true:捕获
//document.addEventListener('click',fn1,false);
//document.addEventListener('click',fn2,false);

3.call方法　

//call 函数下的一个方法 
//call方法的第一个参数可以改变函数执行过程中的内部this的指向
//calll方法第二个参数开始就是原来函数的参数列表
function fn3(a,b){
	alert(this);
	alert(a+b);
}
//fn3.call(1,10,20);//调用函数 fn3()==fn3.call()
fn3.call(null,10,20);

4.事件监听封装函数

function fn1(){
	alert(this);
}
function fn2(){
	alert(2);
}


//封装函数
function bind(obj,evname,fn){
	if (obj.addEventListener) {
		obj.addEventListener(evname,fn,false);
	} else{
		obj.attachEvent('on'+evname,function(){
			fn.call(obj);
		});
	}
}
bind(document,'click',fn1);
bind(document,'click',fn2);

二、事件取消

1.一般事件取消

function fn1(){
	alert(1);
}
function fn2(){
	alert(2);
}

//普通的取消事件
document.οnclick=fn1;
document.οnclick=null; //取消事件

2.取消绑定事件

function fn1(){
	alert(1);
}
function fn2(){
	alert(2);
}
//取消绑定的事件
/*
 * ie:obj.detachEvent(事件名称,事件函数)；
 * 标准：obj.removeEventListener(事件名称,事件函数,是否捕获)；
 */
//只弹出2
/*document.attachEvent('onclick',fn1);
document.attachEvent('onclick',fn2);
//取消绑定事件
document.detachEvent('onclick',fn1);*/


document.addEventListener('click',fn1,false);
document.addEventListener('click',fn1,true);
document.addEventListener('click',fn2,false);
//只取消了false的fn1事件，而进去的事件true没取消，还是会弹出1
document.removeEventListener('click',fn1,false);

　　

 

 

　　

转载于:https://www.cnblogs.com/yangxue72/p/8126998.html