日期:2014-05-16  浏览次数:20401 次

js 模仿jquery的写法
测试代码:
(function(){


var p=new PEvent(document);

p.click(function() {
	//alert("单击");
	//alert(p.style);
	var html="";
	for ( var item in document) {
		html+=item+':'+document[item]+"\r\n";
	}
	//alert(html);
});

p.dblclick(function() {
	alert("双击");
});

p.contextmenu(function(event) {
try{
	var x=event.clientX;
	var y=event.clientY;
	var menu=g("menu");
	
	//判断坐标
	var width=document.body.clientWidth;
	var height=document.body.clientHeight;
	x=(x+menu.clientWidth)>=width?width-menu.clientWidth:x;
	y=(y+menu.clientHeight)>=height?height-menu.clientHeight:y;
	
	//alert("可视高度:"+height+",鼠标高度:"+y);
	menu.style.top=y+"px";
	menu.style.left=x+"px";
	menu.style.display="block";
	
}catch(e){
	alert(e);
}
	return false;
});

function PEvent(dom){
	
	this.x=function() {
		this.style.css=dom.style;
	}
	
	this.click=function(fn){
		dom.onclick=fn;
		this.x();
	}
	
	this.dblclick=function(fn){
		dom.ondblclick=fn;
	}
	
	this.contextmenu=function(fn){
		dom.oncontextmenu=fn;
	}
	
	this.style=new Po();
	
};
	

function Po() {
	this.name=new Object();
	this.id=new Object();
	this.css=new Object();
}
})();

function g(id){
	return document.getElementById(id);
}


在jquery中,处理事件的时候,都可以匿名方法来写,例如:

obj.click(function(){

alert("hello");

});

上诉这种形式。


在方法传递参数的时候,可以传递fun 方法。

调用呢,就可以这样调用:

this.dblclick=function(fn){
		dom.ondblclick=fn;
	}