给自定义对象加上自定义事件的支持的教程_javascript技巧

来源：动视网责编：小采时间：2020-11-27 20:38:50

给自定义对象加上自定义事件的支持的教程_javascript技巧

给自定义对象加上自定义事件的支持的教程_javascript技巧:我一般是不看别人写的代码的，为啥？累！而且这位同志给的还是经过压缩的！汗。考我是不是？还有，这位同志也不给个示例的代码，只说是代码没有问题。我努力的试着去破解，但是脑细胞死的太快了！在我没有变成白痴之前，我毅然决定，不在往下看下去。

推荐度：

点击下载本文 文档为doc格式

导读给自定义对象加上自定义事件的支持的教程_javascript技巧:我一般是不看别人写的代码的，为啥？累！而且这位同志给的还是经过压缩的！汗。考我是不是？还有，这位同志也不给个示例的代码，只说是代码没有问题。我努力的试着去破解，但是脑细胞死的太快了！在我没有变成白痴之前，我毅然决定，不在往下看下去。

我一般是不看别人写的代码的，为啥？累！而且这位同志给的还是经过压缩的！汗。。考我是不是？还有，这位同志也不给个示例的代码，只说是代码没有问题。我努力的试着去“破解”，但是脑细胞死的太快了！在我没有变成白痴之前，我毅然决定，不在往下看下去。不就是给自定的对象加入自定事件的支持吗？我写个示例吧，就算是教程了，如果看不懂，我也没有办法了！我不会傻到给你写好代码，让你拿去卖钱的！
好了，下面是我写的代码，注意看了：

<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"> 
 
</style> 
</head>

<body> 
 
 
 
</body> 
</html> 
 
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; 
 } 
}

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]
示例中，自定义了一个：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等。