给自定义对象加上自定义事件的支持的教程
时间:2023-10-14 20:49:00
我一般是不看别人写的代码的,为啥?累!而且这位同志给的还是经过压缩的!汗。。。考我是不是?还有,这位同志也不给个示例的代码,只说是代码没有问题。我努力的试着去“破解”,但是脑细胞死的太快了!在我没有变成白痴之前,我毅然决定,不在往下看下去。不就是给自定的对象加入自定事件的支持吗?我写个示例吧,就算是教程了,如果看不懂,我也没有办法了!我不会傻到给你写好代码,让你拿去卖钱的!
好了,下面是我写的代码,注意看了:
<!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"> </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等。
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
python处理圆角图片、圆形图片的例子
![](https://img.aspxhome.com/file/2023/6/92356_0s.png)
python 实现语音聊天机器人的示例代码
![](https://img.aspxhome.com/file/2023/7/124637_0s.png)
Python Flask框架模块安装级使用介绍
![](https://img.aspxhome.com/file/2023/9/92129_0s.jpg)
python基础编程小实例之计算圆的面积
![](https://img.aspxhome.com/file/2023/4/99414_0s.png)
MySQL中修改库名的操作教程
ISO-8859-1 、Latin-1 西欧编码介绍及应用
![](https://img.aspxhome.com/file/2023/5/131845_0s.png)
python利用小波分析进行特征提取的实例
MySQL查询倒数第二条记录实现方法
vue使用Google Recaptcha验证的实现示例
![](https://img.aspxhome.com/file/2023/7/126647_0s.jpg)
MySQL 整表加密解决方案 keyring_file详解
PHP实现的服务器一致性hash分布算法示例
C#使用checkedListBox1控件链接数据库的方法示例
![](https://img.aspxhome.com/file/2023/8/94578_0s.jpg)
Matplotlib使用Cursor实现UI定位的示例代码
![](https://img.aspxhome.com/file/2023/4/90534_0s.png)
基于Python实现对比Exce的工具
![](https://img.aspxhome.com/file/2023/4/70894_0s.png)
解决Python httpx 运行过程中无限阻塞的问题
python pyppeteer 破解京东滑块功能的代码
python 爬取古诗文存入mysql数据库的方法
Python实现抖音热搜定时爬取功能
![](https://img.aspxhome.com/file/2023/2/96962_0s.png)
python [::-1] [::-1,::-1]的具体使用
![](https://img.aspxhome.com/file/2023/9/95829_0s.png)