自从我写了几个还可以拿出手的东东之后，自我感觉牛B了许多，还有不少同志围着我，称我为高手，虚容心大大的得到了满足。这些是后话，暂且不表。。。
论坛里有位小鸟，发邮件给我，要我给他添加一个功能，自定义事件！
如贴：http://bbs.blueidea.com/viewthread.php?tid=2793794&highlight=
我一般是不看别人写的代码的，为啥？累！而且这位同志给的还是经过压缩的！汗。。。考我是不是？还有，这位同志也不给个示例的代码，只说是代码没有问题。我努力的试着去“破解”，但是脑细胞死的太快了！在我没有变成白痴之前，我毅然决定，不在往下看下去。不就是给自定的对象加入自定事件的支持吗？我写个示例吧，就算是教程了，如果看不懂，我也没有办法了！我不会傻到给你写好代码，让你拿去卖钱的！
好了，下面是我写的代码，注意看了：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>自定义事件</title>
<style type="text/css">
<!--
.JCEventDemo {
border: thick dotted #0000FF;
}
-->
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>
</html>
<script language="javascript" type="text/javascript">
function JCEvent(pParent){
var self = this;
var body = JCEvent.$(pParent) || document.body;
var oOutline = null;
var outline_click = function(){
if(self.onClick instanceof Function)
self.onClick();
}
this.create = function(){
oOutline = JCEvent.$c("DIV");
body.appendChild(oOutline);
oOutline.onclick = outline_click;
if(typeof this.onCreate == "function")
this.onCreate();
}
this.getOutline = function(){
return oOutline;
}
this.setSkin = function(pSkin){
var oldSkin = oOutline.className;
oOutline.className = pSkin;
if(typeof this.onChangeSkin == "function")
this.onChangeSkin(oldSkin,pSkin);
}
this.getSkin = function(){
return oOutline.className;
}
}
(function($){
$.$ = function(p){
return (typeof(p) != "object") ? document.getElementById(p) : p;
}
$.$c = function(pTag){
return document.createElement(pTag);
}
$.$css = function(pKey,pValue,p){
var obj = p ? $.$(p) : this;
obj.style[pKey] = pValue;
obj.$css = $.$css;
return obj;
}
})(JCEvent);
var c1 = new JCEvent("div1");
c1.onCreate = function(){
alert("onCreate事件\n创建 c1");
}
c1.onChangeSkin = function(pOld,pNew){
alert("onChangeSkin事件\n设置c1的皮肤：\n新皮肤：" + pNew + "\n旧皮肤：" + pOld);
}
c1.onClick = function(){
this.setSkin(this.getSkin() == "JCEventDemo" ? "" : "JCEventDemo");
}
c1.create();
JCEvent.$css("top","20px",c1.getOutline()).$css("left","100px").$css("backgroundColor","#ff00ff").$css("height","100px").$css("width","100px").$css("position","absolute");
var c2 = new JCEvent("div2");
c2.onCreate = function(){
alert("onCreate事件\n创建 c2");
}
c2.onChangeSkin = function(pOld,pNew){
alert("onChangeSkin事件\n设置c2的皮肤：\n新皮肤：" + pNew + "\n旧皮肤：" + pOld);
}
c2.onClick = function(){
this.setSkin(this.getSkin() == "JCEventDemo" ? "" : "JCEventDemo");
}
c2.create();
JCEvent.$css("top","60px",c2.getOutline()).$css("left","200px").$css("backgroundColor","#00ff00").$css("height","100px").$css("width","200px").$css("position","absolute");
var c3 = new JCEvent("div3");
c3.create();
JCEvent.$css("top","70px",c3.getOutline()).$css("left","300px").$css("backgroundColor","#cc6600").$css("height","100px").$css("width","150px").$css("position","absolute");
c1.setSkin("JCEventDemo");
c1.getOutline().innerHTML = "Click me!";
c2.getOutline().innerHTML = "Click me!";
c3.getOutline().innerHTML = "Don't click me!";
</script>
示例中，自定义了一个：JCEvent，c1,c2,c3都是这它的实例。
每个实例都有一个oOutline，我一般用它来做为对象的容器。pParent是用来指示自定义对象在哪里显示的,也就相当于占位符吧，如果不指定，就是document.body。
示例中，我定义了三个自定事件：onCreate,onChangeSkin,onClick
onCreate 在 create方法里触发。
onChangeSkin在setSkin方法里触发。
onClick在oOutline.onclick里触发。
调用顺序：
由于onCreate是在create方法里调用的，所以c1.onCreate要在c1.create()之前声明。
事件的参数，见：
this.setSkin = function(pSkin){
var oldSkin = oOutline.className;
oOutline.className = pSkin;
if(typeof this.onChangeSkin == "function")
this.onChangeSkin(oldSkin,pSkin);
}
this.onChangeSkin(oldSkin,pSkin);
这样，你就可以在每个实例里运用oldSkin和newSkin了。
如：
c1.onChangeSkin = function(pOld,pNew){
alert("onChangeSkin事件\n设置c1的皮肤：\n新皮肤：" + pNew + "\n旧皮肤：" + pOld);
}
另外，示例中：
$.$css = function(pKey,pValue,p){
var obj = p ? $.$(p) : this;
obj.style[pKey] = pValue;
obj.$css = $.$css;
return obj;
}
这一段，写成Object.prototype.$css = function(...)是绝对不成功的，至于为什么，就不是这里的讨论范围。
没话可说了，就留空白吧，看不懂的同志，在补补你们的javascript知识。
说点题外话：不要老是整jQuery,prototype,json等。
[教程]给自定义对象加上自定义事件的支持！
