<html>
<head>
<script>
js = {awt:{}};
js.awt.Event = function(e){
var _e = e || window.event;
var ie = (_e.stopPropagation == undefined);
this.event = _e;
this.type = _e.type;
this.timeStamp = new Date();
this.altKey = _e.altKey || false;
this.ctrlKey = _e.ctrlKey || false;
this.shiftKey = _e.shiftKey || false;
this.metaKey = _e.metaKey || false;
this.keyCode = ie ? _e.keyCode : _e.which;
// left:1, right:2, middle:4
switch(_e.button){
case 0:
this.button = 1;
break;
case 1:
this.button = ie ? 1 : 4;
break;
default:
this.button = _e.button;
break;
}
this.clientX = ie ? (_e.clientX +
document.documentElement.scrollLeft -
document.body.clientLeft) : _e.pageX;
this.clientY = ie ? (_e.clientY +
document.documentElement.scrollTop -
document.body.clientTop ) : _e.pageY;
this.offsetX = ie ? _e.offsetX : _e.layerX;
this.offsetY = ie ? _e.offsetY : _e.layerY;
this.srcElement = ie ? _e.srcElement : _e.target;
this.fromElement= ie ? _e.fromElement :
((this.type == "mouseover")? _e.relatedTarget :
(this.type == "mouseout" ? _e.target : undefined));
this.toElement = ie ? _e.toElement :
((this.type == "mouseout") ? _e.relatedTarget :
(this.type == "mouseover" ? _e.target : undefined));
this.cancelBubble = function(){
if(_e.stopPropagation){
_e.stopPropagation();
}else{
_e.cancelBubble = true;
}
};
this.getEventXY = function(){
return {x:this.clientX, y:this.clientY};
};
};
Function.prototype.$bind = function(thi$, isEventListener) {
var fn = this;
var args = Array.prototype.slice.call(arguments, 2);
fn.__handler__ = function(e) {
var array = args;
if(isEventListener){
// 在这里实例化js.awt.Event
array.unshift(new js.awt.Event(e));
}
return fn.apply(thi$, array);
};
return fn.__handler__;
};
js.awt.Event.attach = function(dom, evType, exclusive, thi$, handler){
var args = Array.prototype.slice.call(arguments, 5);
args.unshift(thi$, true);
var _handler = handler.$bind.apply(handler, args);
if(exclusive){
dom["on"+evType] = _handler;
}else{
if(dom.addEventListener){
dom.addEventListener(evType, _handler, false);
}else{
dom.attachEvent("on"+evType, _handler);
}
}
return _handler;
};
js.awt.Event.detach = function(dom, evType, exclusive, thi$, handler){
var _handler = handler.__handler__ || handler;
if(exclusive){
dom["on"+evType] = null;
}else{
if(dom.removeEventListener){
dom.removeEventListener(evType, _handler, false);
}else{
dom.detachEvent("on"+evType, _handler);
}
}
};
/////////////////////////////////////////////////////////////////////////////////////////////////////////////
//简单地定义一个Button类
js.awt.Button = function(def){
this.view = document.createElement("div");
this.view.id = def.id;
this.view.style.cssText = "position:absolute;float:left;width:150px;height:20px;cursor:default;";
this.view.style.backgroundColor = "gray";
this.view.innerHTML = "Hello World";
this.onmousedown = function(e){
e.cancelBubble();
};
this.onclick = function(e){
alert(e instanceof js.awt.Event);
};
this.onmousemove = function(e){
this.view.innerHTML = e.offsetX + ", " + e.offsetY;
};
this.onmouseover = function(e){
this.view.style.backgroundColor = "red";
if(this.label != undefined){
var t = "from:"+e.fromElement.id + " to:"+e.toElement.id;
this.label.setText(t);
}
};
this.onmouseout = function(e){
this.view.innerHTML = "Hello World";
this.view.style.backgroundColor = "gray";
};
this.setPosition = function(x, y){
this.view.style.left = x+"px";
this.view.style.top = y+"px";
};
var _ = js.awt.Event;
_.attach(this.view, "mousedown", false, this, this.onmousedown);
_.attach(this.view, "mousemove", false, this, this.onmousemove);
_.attach(this.view, "mouseover", false, this, this.onmouseover);
_.attach(this.view, "mouseout", false, this, this.onmouseout);
_.attach(this.view, "click", false, this, this.onclick);
};
//简单地定义一个Label类
js.awt.Label = function(def){
this.view = document.createElement("span");
this.setText = function(text){
this.view.innerHTML = text;
};
};
var onLoad = function(){
var label = new js.awt.Label();
document.body.appendChild(label.view);
var button1 = new js.awt.Button({id:"btn1"});
button1.setPosition(50, 50);
button1.label = label;
document.body.appendChild(button1.view);
var button2 = new js.awt.Button({id:"btn2"});
button2.setPosition(200, 50);
button2.label = label;
document.body.appendChild(button2.view);
};
js.awt.Event.attach(window, "load", true, window, onLoad);
</script>
</head>
<body>
</body>
</html>
|
