javascript 事件绑定及深入(二)

最新推荐文章于 2025-06-08 03:54:18 发布

「已注销」

最新推荐文章于 2025-06-08 03:54:18 发布

阅读量272

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript

本文链接：https://blog.csdn.net/yuanjin1988/article/details/43051583

javascript 专栏收录该内容

41 篇文章

订阅专栏

本文探讨了W3C标准与IE浏览器对于事件绑定的不同处理方式，包括事件监听的添加与移除、事件对象的获取及this指向问题，并提供了一套跨浏览器解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


//W3C自带的两个添加时间和删除时间
//1.覆盖问题,解决

window.addEventListener("load",function(){

	alert("Lee");
},false);

window.addEventListener("load",function(){

	alert("Lee");
},false);

window.addEventListener("load",function(){

	alert("Lee");
},false);

//2.相同函数屏蔽的问题，解决

window.addEventListener("load",init,false);
window.addEventListener("load",init,false);
window.addEventListener("load",init,false);
function init(){

	alert("Lee");
}

//3.是否可以传递this，解决
window.addEventListener("load",function(){
	var box = document.getElementById("box");
	box.addEventListener("click",toBlue,false);
},false);

function toRed(){
	this.className = "red";
	this.removeEventListenr("click",toRed,false);
	this.addEventListener("click",toBlue,false);
}

function toBlue(){
	this.className = "blue";
	this.removeEventListenr("click",toBlue,false);
	this.addEventListener("click",toRed,false);
}


4.添加一个额外的方法，会不会被覆盖，或者只能执行一次，解决


window.addEventListener("load",function(){
	var box = document.getElementById("box");
	box.addEventListener("click",function(){
	
		alert("Lee");
	},false);
	box.addEventListener("click",toBlue,false);
},false);

function toRed(){
	this.className = "red";
	this.removeEventListenr("click",toRed,false);
	this.addEventListener("click",toBlue,false);
}

function toBlue(){
	this.className = "blue";
	this.removeEventListenr("click",toBlue,false);
	this.addEventListener("click",toRed,false);
}

//综上所诉：W3C是比较完美的解决了这些问题，
//但是IE8和之前的浏览器并不支持，而是采用自己的事件，
当然，IE9已完全支持

//冒泡和捕获
//W3C可以设置冒泡和捕获方式

window.addEventListener("laod",function(){
	var box = document.getElementById("box");
	box.addEventListener("click",function(){
	
		alert("div");
	},false);
	
	document.addEventListener("click",function(){
		alert("document");
	},false)
},false);


//IE的事件绑定机制
//1.覆盖问题,解决了，但有不同，顺序不同，倒过来了

window.attachEvent("onload",function(){
	alert("Lee");
});

window.attachEvent("onload",function(){
	alert("Mr.Lee");
});

window.attachEvent("onload",function(){
	alert("Miss.Lee");
});

//2.相同函数屏蔽问题,未解决

window.attachEvent("onload",init);
window.attachEvent("onload",init);

function init(){
	alert("Lee");
}

//3.是否可以传递this


window.attachEvent("onload",function(){
	var box = document.getElementById("box");
	box.attachEvent("onclick",function(){
	
		//alert(this === box);
		alert(this === window);    //不能传递this
	});

});

//添加一个额外的方法，会不会被覆盖，或者只能执行一次

window.attachEvent("onload",function(){
	var box = document.getElementById("box");
	box.attachEvent("onclick",function(){
	
		alert("Lee");
	});
	
	box.attachEvent("onclick",function(){
	
		alert("Mr.Lee");
	});

});


//IE的事件切换器

window.attachEvent("onload",function(){
	var box = document.getElementById("box");
	box.attachEvent("onclick",toBlue);

});


function toRed(){
	var that = window.event.srcElement;
	that.className = "red";
	that.detachEvent("onclick",toRed);
	that.attachEvent("onclick",toBlue);
 
}

function toBlue(){
	var that = window.event.srcElement;
	that.className = "blue";
	that.detachEvent("onclick",toBlue);
	that.attachEvent("onclick",toRed);
	
}


//event对象的获取
window.attachEvent("onload",function(){
	var box = document.getElementById("box");
	//box.onclick = function(evt){    //传统方法IE无法通过参数获取evt
	//	alert(evt);
	
	//}
	
	box.attachEvent("onclick",function(evt){   //IE的现代事件绑定机制是可以的
		//alert(evt);
		//alert(evt.type);
		//alert(evt.srcElement.tagName);
		//alert(window.event.srcElement.tagName);
	});

});


//跨浏览器添加事件
function addEevent(obj,type,fn){
	if(obj.addEventListener){
		obj.addEventListener(type,fn,false);
	}else if(obj.attachEvent){
		obj.attachEvent("on" + type, fn)
	}
}

//跨浏览器移除事件
function removeEvent(obj,type,fn){
	if(obj.removeEventListenr){
		obj.removeEventListenr(type,fn,false);
	}else if(obj.detachEvent){
		obj.detachEvent("on" + type,fn);
	}
}

//跨浏览器获取目标对象
function getTarget(evt){
	if(evt.target){     //W3C
		return evt.target;
	}else if(window.event.srcElement){  //IE
		return window.event.srcElement;
	}
}

addEevent(window,"load",function(){
	var box = document.getElementById("box");
	addEevent(box,"click",toBlue);
});

function toRed(evt){
	var that = getTarget(evt);
	that.className = "red";
	
	removeEvent(that,"click",toRed);
	addEevent(that,"click",toBlue);
	
}

function toBlue(evt){
	var that = getTarget(evt);
	that.className = "blue";
	
	removeEvent(that,"click",toBlue);
	addEevent(that,"click",toRed);
}